/    Sign up×
Community /Pin to ProfileBookmark

TTT: jQuery plugin for text animation

This plugin allows to change one text to another on hover or click. Every symbol of the current text moves shortest way within its category (letters, digits, symbols…) and stops when it reaches the goal. As a result, we see how the desired text appears out of rotating chaos. Demo is [URL=”http://contorra.ru/ru/ttt-jquery-plagin-animacii-teksta”]here[/URL].

Installing manual:

[LIST=1]

  • [*]

    enable jQuery


  • [*]

    [URL=”http://contorra.ru/sites/default/files/ttt-1.0.min.js”]download plugin file (2 kb)[/URL]


  • [*]

    add to HTML something like this:

    [CODE]<div data-ttt-new=”Future text”>Current text</div> [/CODE]


  • [*]

    call TTT plugin …


  • [/LIST]

    [CODE] $(document).ready(function() {
    $(‘div’).ttt();
    });[/CODE]

    When you hover that object, old text changes to new one, no hover – it goes back to old, with 60 fps speed.

    Some settings:

    [LIST]

  • [*]

    set object to call event: ‘btn’:’selector’


  • [*]

    set event type on click: ‘event’:’click’


  • [*]

    symbol change speed: ‘fps’:any number of frames per second


  • [/LIST]

    Example:

    [CODE] $(‘div’).ttt({
    ‘btn’:’div’,
    ‘event’:’click’,
    ‘fps’:15
    });[/CODE]

    No callback in current plugin version.

    to post a comment
    JavaScript

    0Be the first to comment 😎

    ×

    Success!

    Help @contorra spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.4,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...