📜 ⬆️ ⬇️

TTT: jVuery text animation plugin from Contorra

The working title is TTT, or Shuffled Text Transformation.
Designed by special order digital-agency Contorra.
This plugin allows you to change one text to another through “click” or “hover” events on the object itself, or any other, with the effect of transforming each character. Each character of the current text moves along the shortest path in an array of characters of its type (uppercase, lowercase letters, numbers, punctuation, etc.) and stops when the final result is achieved. As a result, we observe how a given text gradually appears from the chaos of rotating symbols.

Demo

Installation Instructions:
- connect jQuery
- download the plug-in file (2 kb) or copy it in the example above and connect after jQuery (make sure that the Russian characters are not recoded by the browser when downloading)
- add in html an object containing the text, the date attribute data-ttt-new with the text to which it will be transformed. For example: <div data-ttt-new = “Future text”> Base text </ div>
- call the TTT plugin on the processed object:
$(document).ready(function() { $('div').ttt(); }); 

And everything, according to the standard, when you hover on this object, its text will change to a new one, and if you lose the guidance, it will return to the original one, at a speed of 60fps. There are also a number of settings:
- set the object to trigger the event: 'btn': 'selector' - set the event type by click: 'event': 'click' - character change rate: 'fps': any number of frames per second
For example:
 $('div').ttt({ 'btn':'div', 'event':'click', 'fps':15 }); 

Custom callback function is not implemented in this version.
---
Original article

')

Source: https://habr.com/ru/post/238643/


All Articles