Create Awesome Text Switch Animations Using jQuery And CSS3 - switchText.js

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.