WoW..! CSS3 Animations are just beyond the word – Amazing, whether you are dealing with a particular text or any element, applying animations and transitions to these has been made simpler with a professional touch. There are so many useful and popular Javascript libraries like Textillate.js – a jquery plugin that has made animating texts or text, even more, easier and convenient.
Textillate.js is built using Animate.css & Lettering.js but with lot more advancement and features. In Animate.css you can give animation to either a single sentence or particular words but Textillate.js gives you the opportunity to give javascript text animation effects to each and every single letter.
Here’s
How Textillate.js Works? Getting Started
First of all, textillate.js separates the CSS text animation into 2 parts, In and Out animation.
Means if you want to animate a sentence you can give two animation effects to the sentence, first how the animation starts and second how the animation end.
How to Use Textillate.js?
It is very easy to use Textillate.js let’s see how:
First of all, textillate.js is dependent on three more libraries: Animate.css, Lettering.js, and jQuery.
Just visit all the 3 projects, download each of them and host them on your server.
After hosting all the files add the scripts and CSS before the closing </head> tag in your web page.
Here’s how to include the scripts in your web page after hosting them on your server.
|
1 2 3 |
<script src="js/jquery.min.js"></script> <script src="js/jquery.lettering.js"></script> <script src="js/jquery.textillate.js"></script> |
Now add the Animate.CSS file along with the scripts.
|
1 |
<link href="css/animate.css" rel="stylesheet"> |
You can also use the CDN of the scripts in the <head> section to directly call the scripts from the remote server and don’t waste your space and bandwidth from your own servers.
JQuery CDN, Textillate.js CDN, and Animate.css CDN
|
1 2 3 |
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.min.js https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css |
Now you’re done with the integration of all the 3 dependencies of Textillate.js So, let’s get started guys and girls for integrating with it and start doing css3 magic animations.
Textillate.js Basic Markup
Step 1: If you want to apply textillate.js to any of your element then, first of all, you have to give a Class or ID to that particular element. here’s below:
|
1 |
<h2 class="custom-title">Tuluzz.com</h2> |
Now just add the javascript syntax with the class and your element will be loaded with text animations, check below for more:
|
1 2 3 4 5 |
<script> $(function () { $('.custom-title').textillate(); }) </script> |
Note:
The text animation that will be applied to the element will be the default animation setting. If you want to apply your own text animations and want to change the defaults then there are two more ways:
1. Using HTML Data API
|
1 2 3 |
<div class="custom-title" data-in-effect="swing"> <p>Every single letter will animate of this sentence.</p> </div> |
data-in-effect: Entry animation effect of the text
data-out-effect: Exit animation effect of the text
2. Add Javascript in the Initialization of the function
|
1 2 3 4 5 6 7 8 9 |
<script> $(function () { $('.custom-title').textillate({ in: { effect: 'swing' } }); }) </script> |
This will also output the same text animation effect as using HTML Data API.
Recommended Readings:
- Bounce.js: Add Javascript Animation Without Writing Code
- Want to give a typewriter effect in your website. Click Here to know more.
- Watermark all your images Now
This is how you can give the Textillate.js effect to all your elements using the plugin but there are much more customizations you can do with Textillate.js, for more check out below textillate.js options:
Textillate.js Options
selector: default selector to use, in case you are selecting multiple texts to animate
loop: Want to enable looping, you can loop the animation effect. The default is false
minDisplayTime: This sets the minimum time in ms that the text is displayed
initialDelay: set your custom initial delay before starting the animation
autoStart: in case if you want or not to start your animation automatically
inEffects: Entry text animation effect
outEffects: Exit text animation effect
delayScale: apply the delay factor to each and every consecutive character
delay: delay between each character
reverse: reverse the character sequence (Note: reverse doesn’t make sense with sync = true)
sync: animate all the characters at the same time. Default is false
shuffle: randomize the character sequence. Default is set to false (Note: shuffle doesn’t make sense with sync = true)
Callback (textillate callback): this will execute once the animation has finished its job.
Applying more complex textillate.js options to the code, just check below code attentively:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$('.custom-title').textillate({ loop: true, in: { effect: 'wobble', delayScale: 1.2, delay: 100, reverse: true initialDelay: 0 }, out: { effect: 'hinge', delayScale: 1.5, delay: 50, sync: false, shuffle: false, reverse: false } }); |
If you want to check out the demo of the customized code, check out here.
The above code gives extra customization to Textillate.js animation effects. Similarly give a try to your own customization and see how everything works.
Check out the complete documentation of Textillate.js on the github and start using it on your websites and your client projects and impress them with simple and awesome javascript tricks to interact and style your content and web pages.
