Simple Configurable Text Shift Animation With jQuery - shiftLetters
| File Size: | 3.34 KB |
|---|---|
| Views Total: | 1690 |
| 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.











