「textillate.js」を使ってHTMLにテキストアニメーションを実現できる10の即席コード

「textillate.js」を使ってHTMLにテキストアニメーションを実現できる10の即席コード

「textillate.js」を使ってHTMLにテキストアニメーションを実現できる10の即席コードを紹介しています。

HTMLにテキストアニメーションを実現できる「textillate.js」

textillate.jsを使用すれば、簡単にサイトのHTMLにテキストアニメーションを導入することができます。

しかし、使い方を知らないと意外と実装めんどうですし、覚えてもその後使うことが無かったりするので、簡単に導入できるように即席コードをまとめておきました。

ちなみに、変化が微細な場合があるので、困ったときは私が用意したCodePenでパラメータをいじくっていただけると良いかと思います。

公式サイト:http://textillate.js.org/

導入

必要なソースの読み込みです。Bootstrap(CSSファイルのみ)など一部は利便性を考えて入れているだけなので、臨機応変に対応願います。

CSS

html
<!--必要な人だけ-->
<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">
<!--必要な人だけ-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

Javscript

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>

コード集

まずは、各種設定ごとの細かな違いを見ていきます。(アニメーションの速さやループさせるか・・・など)

また、途中で「effect」という設定値が出てきます。これは、アニメーションの動き方を指定する設定値で、種類は公式サイトで確認することが出来ます。

1: デフォルト設定のまま

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: ループ

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:ループ時のループ間のインターバル時間の調整