Jquery Plugin For CSS3 Text Animations – Textillate.js

Looking for a affordable website?

GET STARTED
www.codingexpertz.com
Jquery Plugin For CSS3 Text Animations – Textillate.js

File Size: 74KB

Total Views: 3625

Date Created:

Last Modified Date:

Official Website: Go to website

License: MIT

Textillate.js combines some awing libraries to produce a ease-to-use plugin for applying CSS3 animations to any text.

Simply embody textillate.js and it’s dependencies in your project to begin making unique effects.

Textillate.js is constructed on high of the straightforward, nonetheless surprisingly powerful animate.css and piece of writing.js libraries.

Features:

  • Easy to use and customizeable with CSS.
  • Multiple texts animation with minimal settings.
  • Set display time manually as you need.
  • Choose various type of animation from animate.css

How to use it:

1. Load the required JavaScript jquery.lettering.js and jquery.textillate.js in the HTML page.

<script src="/path/to/jquery.lettering.js"></script>
<script src="/path/to/jquery.textillate.js"></script>

2. Load the required Stylesheet animate.css in the HTML page.

<link rel="stylesheet" href="/path/to/animate.css">

3. The HTML structure to create a textillate animation.

<div class="tlt">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

4. Initialize the textillate and we’re ready to go.

$(function () {
  $('.tlt').textillate({
    loop: true,
    in:{
      effect: 'flipInX'
    },
    out: {
      effect: 'fadeOut'
    }
  });
});

Plugin’s default configuration options:

$('.tlt').textillate({
  selector: '.texts',
  loop: false,
  minDisplayTime: 2000,
  initialDelay: 0,
  autoStart: true,
  inEffects: [],
  outEffects: [ 'hinge' ],
  in: {
    effect: 'fadeInLeftBig',
    delayScale: 1.5,
    delay: 50,
    sync: false,
    shuffle: false,
    reverse: false,
    callback: function () {}
  },
  out: {
    effect: 'hinge',
    delayScale: 1.5,
    delay: 50,
    sync: false,
    shuffle: false,
    reverse: false,
    callback: function () {}
  },

  callback: function () {},
  type: 'char'
});

Plugin’s Options:

Name Default Type Description
selector .texts string the default selector to use when detecting multiple texts to animate
loop false boolean enable looping
minDisplayTime 2000 number sets the minimum display time for each text before it is replaced
initialDelay 0 number sets the initial delay before starting the animation (note that depending on the in effect you may need to manually apply visibility: hidden to the element before running this plugin)
autoStart true boolean set whether or not to automatically start animating
inEffects null custom set of ‘in’ effects. This effects whether or not the character is shown/hidden before or after an animation
outEffects hinge custom set of ‘out’ effects
in: in animation settings
effect fadeInLeftBig string set the effect name
delayScale 1.5 number set the delay factor applied to each consecutive character
delay 50 number set the delay between each character
sync false boolean set to true to animate all the characters at the same time
shuffle false boolean randomize the character sequence (note that shuffle doesn’t make sense with sync = true)
reverse false boolean reverse the character sequence (note that reverse doesn’t make sense with sync = true)
callback function null callback that executes once the animation has finished
out: out animation settings.
effect hinge string set the effect name
delayScale 1.5 number set the delay factor applied to each consecutive character
delay 50 number set the delay between each character
sync false boolean set to true to animate all the characters at the same time
shuffle false boolean randomize the character sequence (note that shuffle doesn’t make sense with sync = true)
reverse false boolean reverse the character sequence (note that reverse doesn’t make sense with sync = true)
callback function null callback that executes once the animation has finished

Leave a comment

Your email address will not be published. Required fields are marked *

STAYUPDATED

Receive all our future posts instantly in your inbox. Enter your email to enroll.