テキストにアニメーションをかける「textillate.js」の使い方

コラム

今回のjQueryプラグインの組み込みは画像スライドショーではなく、テキストにアニメーションをかけるjQueryプラグインです。
動画を使わずに、テキストを動的に表現するためのjQueryプラグインです。
アイキャッチの部分などに使うと、かなり動的な表現が出来るようになります。
既存のホームページやシステムの中でUIに動きを出したい時に使いやすいと思います。
組み込み自体はそこまで難しいモノではありませんが、設定内容が理解できないとちょっと難しいかもしれません。
基本的には書き込むだけのことでして、CSSの改変などは必要ありません。
ということで、構えず見て頂ければと思います。

「ちょっとは役に立ったかな？」や「ちょっと面白いな（笑）」みたいなことを感じられましたら、シェアして頂けますと幸いです。

jQuery/JS Tipsに投稿したコラム記事

テキストにアニメーションをかける「textillate.js」の使い方

jQuery/JS Tips

textillate.jsとは？

テキストを動かすためのjQueryプラグイン

「textillate.js」は普通のテキストデータを動的に動かすことが出来るjQueryプラグインです。基本的にテキストはCSSで装飾するだけのコンテンツデータで、動的な要素を見せる場合、動画や画像を使うことが多いですよね。しかし、textillate.jsを使うことで、単なるテキストを動的に動かすことが出来ます。

このjQueryプラグインは単体では動きません。
本家の他に、このプラグインを補助するCSSやjavascriptを一緒に使って動的にアニメーションをかけることが出来ます。

ということで、そのあたりを念頭において頂いて進めて下さい。

本家サイトと外部サイト

以下が本家サイトとGit Hubです。
以下のサイトで諸々のファイルをダウンロードして頂けます。

ダウンロードと組み込みサンプル

textillate.js組み込み済みファイルのダウンロード

phptemp_textillate_160523.zip

組み込み済みサンプル

「textillate.js」を組み込んだページのサンプルです。

組み込み済みサンプル

元になるWEBサイトテンプレート（PHP）について

当サイト内の「SEOの基礎知識」の中のコンテンツです。

コンテンツSEOのためのWEBサイトテンプレート（PHP）

組み込み手順

凡そ、流れ的には以下のような順番です。

CSS、JS、画像ファイル諸々を所定のディレクトリにアップします。
実装するページに、CSS、JSを読み込ませ、jsで設定記述をし、アニメーション動作をさせるテキストにidなどを付与します。
すべてのファイルをアップします。

CSS、JS、画像ファイルを所定のディレクトリにアップします。

本家、またはGitHubから本体ファイル「textillate-master.zip」をダウンロードしてきます。
その中にある「/assets/animate.css」「/jquery.textillate.js」「/assets/jquery.lettering.js」をそれぞれ適宜ディレクトリにアップします。

この時、アニメーションの挙動を助けるjsやcssである「lettering.js」から「jquery.lettering.js」、「animate」から「animate.css」を拾ってきても問題ありません。
基本的に、それぞれ、本家サイトのバージョンの方が新しいと思われますので、バージョンに違和感を感じられたら本家からもらってくるようにして下さい。

因みにですが、サンプルでは、「animate.css」は本家から最新バージョンを頂きました。

実装するページに、CSS、JSを読み込ませ、jsで設定記述をし、アニメーション動作をさせるテキストにidなどを付与します。

それぞれダウンロードしてきたファイルをそれぞれアップさせたら、テキストにアニメーションをかけるページに読み込ませて下さい。サンプルでは、トップページのみ適応させています。

次に、ヘッダに設定記述を記載します。
以下、参考にして下さい。

<script type="text/javascript">
$(function () {
$('#eftxt').textillate({
loop: true,
minDisplayTime: 3000,
initialDelay: 1000,
autoStart: true,

in: {
effect: 'bounceInDown',
delayScale: 1.5,
delay: 50,
sync: false,
shuffle: false
},

out: {
effect: 'fadeOutUpBig',
delayScale: 1.5,
delay: 50,
sync: false,
shuffle: false
}

});
});
</script>

上記は、設定を入れた場合の記述です。
設定を書き入れない最低限の記述の場合、以下の記述だけコピペして下さい。

<script type="text/javascript">
$(function () {
$('#eftxt').textillate();
});
</script>

上記の最低限の記述だけでとりあえずは動作します。
「jquery.textillate.js」の最下部にデフォルト設定が記述されていますので、「jquery.textillate.js」のデフォルト設定に従って動作します。

最後に、アニメーション動作をさせるテキストにid若しくはclassを付与して下さい。
サンプルではメイン画像部分のテキストに「id="eftxt"」を付与するようにしています。

<div id="mainbg">
<div id="main"><div id="eftxt">キャッチコピーを入れましょう</div></div>
</div>

全てのファイルをアップロードして下さい

html記述とjs記述が完了したら、適宜ファイルをサーバーにアップロードして下さい。

オプションの設定について

オプションの指定に関しては、どのような記述でも動作します。
本家では、設定記述の手法が異なっていて、jsで動的に設定させていました。

実は、今回のサンプルを作成中、設定記述部分を本家で見てある程度理解したところで本家のように組み入れようとしたんですが、かなり手間な感じがしました。
ですので、デフォルト設定箇所にある記述をそのまま取り入れた感じにしました。

因みにですが、アニメーション動作の指定は「animate」や本家サイトのプルダウンから選んで使って頂けます。
プルダウン中にある名称をそのままアニメーション動作設定箇所に記載することで挙動を変えることが出来ます。
記述例「textillate.jsの設定記述例」内の「effect」の箇所に該当します。

その他、設定記述例の内容は、アニメーションの動作を決める時間などです。
とりあえず中身は理解せずとも、設定例をそのままコピペして頂くことで、ある程度自由に編集することが出来るようになっています。

その他、補足

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。