TTT: jQuery text animation plugin by Contorra
The working title is TTT, or Shuffle Text Transformation.
Designed by special order of digital agency Contorra.
This plugin allows you to change one text to another through the events of "click" or "hover" 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 the array of characters of its type (uppercase, lowercase letters, numbers, punctuation marks and others) and stops when the final result is reached. As a result, we observe how a given text gradually emerges from the chaos of rotating symbols.
Demo
Installation Instructions:
- connect jQuery
- download plug-in file (2 kb)or copy in the example above and connect after jQuery (make sure that Russian characters are not recoded by the browser when downloading)
- add an object containing text to the html, date attribute data-ttt-new with the text to which it will be transformed. For instance:
- call the TTT plugin on the processed object:
And everything, by the standard, when hovering over this object, its text will be replaced with a new one, and when hovering is lost, 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 speed: 'fps': any number of frames per second
For example:
The custom callback function is not implemented in this version.
---
Original article
Designed by special order of digital agency Contorra.
This plugin allows you to change one text to another through the events of "click" or "hover" 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 the array of characters of its type (uppercase, lowercase letters, numbers, punctuation marks and others) and stops when the final result is reached. As a result, we observe how a given text gradually emerges from the chaos of rotating symbols.
Demo
Installation Instructions:
- connect jQuery
- download plug-in file (2 kb)or copy in the example above and connect after jQuery (make sure that Russian characters are not recoded by the browser when downloading)
- add an object containing text to the html, date attribute data-ttt-new with the text to which it will be transformed. For instance:
Base text
- call the TTT plugin on the processed object:
$(document).ready(function() {
$('div').ttt();
});
And everything, by the standard, when hovering over this object, its text will be replaced with a new one, and when hovering is lost, 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 speed: 'fps': any number of frames per second
For example:
$('div').ttt({
'btn':'div',
'event':'click',
'fps':15
});
The custom callback function is not implemented in this version.
---
Original article