Simple Configurable Text Shift Animation With jQuery - shiftLetters

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

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.