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

Create Awesome Text Switch Animations Using jQuery And CSS3 - switchText.js
File Size: 5.54 KB
Views Total:
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.