Simple Configurable Text Shift Animation With jQuery - shiftLetters
File Size: | 3.34 KB |
---|---|
Views Total: | 1669 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

shiftLetters is a lightweight jQuery plugin for create a configurable text shift effect that animates the letters within your text using CSS and a little JavaScript.
How to use it:
1. Link to the required files as follows:
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script> <script src="jquery.shiftLetters.js"></script>
2. Just call the function on the text container and done.
$('h1').shiftLetters();
3. Set the max/min offsets:
$('h1').shiftLetters({ minOffset: 2, maxOffset: 5, });
4. Specify the duration in ms to show the shift effect for.
$('h1').shiftLetters({ duration: 800 });
5. Add an extra easing effect to the text shift animation. You need to load the jQuery easing plugin or jQuery UI for more easing functions.
<script src="/path/to/jquery.easing.min.js"></script>
$('h1').shiftLetters({ easing: 'easeOutBounce' });
This awesome jQuery plugin is developed by aziev. For more Advanced Usages, please check the demo page or visit the official website.