https://wplabo.idea-hack.com/blog/code-catalog/frontend/23712/
10 instant codes that can implement text animation in HTML using “textillate.js”

10 instant codes that can implement text animation in HTML using “textillate.js”

We introduce 10 instant code which can realize text animation in HTML using “textillate.js”.

“Textillate.js” that can realize text animation in HTML

With textillate.js, you can easily introduce text animation to the HTML of your site.

However, if you do not know how to use it is surprisingly difficult to implement, and since you do not have to use it afterwards.

So I will introduce some instant codes.

By the way, there are times when the change is subtle, so when you are in trouble I think that it is a good idea to play with parameters with CodePen I prepared.

Official site:http://textillate.js.org/

Introduction

It is necessary to load the source. Since Bootstrap (CSS file only) and so on are partly put in consideration of convenience, please respond flexibly.

CSS

html
<!--Only those who need it-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<!--Only those who need it-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

Javascript

html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>

Code collection

The setting value “effect” comes out on the way.

This is a setting value that specifies how animation moves, and you can check the type on the official website.

1: Leave the default setting

Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text.
html
<div class="container bg-color my-5 px-5 py-3">
  <div class="textillate textillate-1">
    Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text.
  </div>
</div>
css
div.bg-color {
  background-color: #487eb0;
}

div.container div.textillate {
  color: #fff;
}
JQuery
jQuery(function ($) {
  $('.textillate-1').textillate();
});
Code Pen

2: loop

Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text.
html
<div class="container bg-color my-5 px-5 py-3">
  <div class="textillate textillate-2">
    Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text.
  </div>
</div>
css
div.bg-color {
  background-color: #487eb0;
}

div.container div.textillate {
  color: #fff;
}
JQuery
jQuery(function($){
  $('.textillate-2').textillate(
    {loop: true},
  );
});
Code Pen

3:Adjustment of interval time between loops in loop

If you liked this article
please click on the "Like!".

Follow on Twetter !

Related Posts