「textillate.js」は普通のテキストデータを動的に動かすことが出来るjQueryプラグインです。 基本的にテキストはCSSで装飾するだけのコンテンツデータで、動的な要素を見せる場合、動画や画像を使うことが多いですよね。 しかし、textillate.jsを使うことで、単なるテキストを動的に動かすことが出来ます。
このjQueryプラグインは単体では動きません。
本家の他に、このプラグインを補助するCSSやjavascriptを一緒に使って動的にアニメーションをかけることが出来ます。
ということで、そのあたりを念頭において頂いて進めて下さい。
以下が本家サイトとGit Hubです。
以下のサイトで諸々のファイルをダウンロードして頂けます。
phptemp_textillate_160523.zip
「textillate.js」を組み込んだページのサンプルです。
当サイト内の「SEOの基礎知識」の中のコンテンツです。
凡そ、流れ的には以下のような順番です。
本家、または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」は本家から最新バージョンを頂きました。
それぞれダウンロードしてきたファイルをそれぞれアップさせたら、テキストにアニメーションをかけるページに読み込ませて下さい。 サンプルでは、トップページのみ適応させています。
次に、ヘッダに設定記述を記載します。
以下、参考にして下さい。
<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）の修正にあたって、以下の点に配慮しています。
いかがでしたでしょうか？
設定部分が少々面倒だったかもしれませんね。
テキストを動的に動かすことなんて滅多にないので、なんかわくわくしたプラグインでした。
今すぐにでも導入出来るあたりが嬉しいところです。
画像のスライドショーなどは、やはりそのコンテンツ部分のCSSの設定など配慮すべきことが多いですが、本プラグインについては何ら気にする必要はありません。
ある程度理解出来れば今すぐにでもお使い頂けるのが嬉しいプラグインですので、動的箇所を増やしたい方には是非オススメのプラグインです。
執筆 : 清水 隼斗
「テキストにアニメーションをかける「textillate.js」の使い方」のシェアをお願い致します！