Create Awesome Text Switch Animations Using jQuery And CSS3 - switchText.js
File Size: | 5.54 KB |
---|---|
Views Total: | 1827 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
switchText.js is a lightweight jQuery plugin which allows to rotate through an array of text one after the other with CSS3 powered animations.
Animations supported:
- zoomIn
- fadeIn
- glitch
- rotateY
- rotateX
- bounce
How to use it:
1. Load the switchtext.css
in the header that will provide the CSS3 based animations during text switching.
<link href="switchtext.css" rel="stylesheet">
2. Create a DIV container where you want to switch between the text just like a rotator.
<div class="demo"></div>
3. Load jQuery library and the core JavaScript file switchtext.css
before we close the body tag.
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script> <script src="switchtext.js"></script>
4. Call the function on the DIV container you just created and pass the following parameters to the text rotator.
$('.demo').switchText( // an arrary of words or sentences ['I Love','jQuery Script','.Net!'], // animation speed 2000, // 1 = loop 1, // 1 = remove animation on end 1, // animation type 'zoomIn' );
This awesome jQuery plugin is developed by damianurbanski. For more Advanced Usages, please check the demo page or visit the official website.