HOME > コラム > WEB全般 > テキストにアニメーションをかける「textillate.js」の使い方

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

コラム

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

WEB全般に投稿したコラム記事

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

textillate.jsイメージ
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の基礎知識」の中のコンテンツです。

組み込み手順

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

  1. CSS、JS、画像ファイル諸々を所定のディレクトリにアップします。
  2. 実装するページに、CSS、JSを読み込ませ、jsで設定記述をし、アニメーション動作をさせるテキストにidなどを付与します。
  3. すべてのファイルをアップします。
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)の修正にあたって、以下の点に配慮しています。

  • 今回、サンプルにしたWEBサイトテンプレート(PHP)は「 phptemp_160202.zip 」です。
締め

いかがでしたでしょうか?
設定部分が少々面倒だったかもしれませんね。

テキストを動的に動かすことなんて滅多にないので、なんかわくわくしたプラグインでした。
今すぐにでも導入出来るあたりが嬉しいところです。

画像のスライドショーなどは、やはりそのコンテンツ部分のCSSの設定など配慮すべきことが多いですが、本プラグインについては何ら気にする必要はありません。
ある程度理解出来れば今すぐにでもお使い頂けるのが嬉しいプラグインですので、動的箇所を増やしたい方には是非オススメのプラグインです。

執筆 : 清水 隼斗

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

Facebookコメント

他のカテゴリ記事は下記からお選び下さい。
SEO対策に関する記事を投稿するカテゴリです。とにかく、SEO対策のことのみを記事にしようと思います。弊社の本業です(笑)
インターネットやWEBに関する総合情報に関する記事を投稿するカテゴリです。技術的なことでも出来るだけ分かりやすくしていこうと思います。
社内での出来事やランチのことなど、小さなことから大きなことまでを投稿するカテゴリです。少人数なのでネタは限られてますが面白可笑しくいきます!
その他、上記に当てはまらないことは全てこのカテゴリに投稿します。弊社の歴史・・・というわけではありませんが、後になって懐かしむことが出来る記事を投稿します。
株式会社SEMラボラトリー
TEL : 06-4394-8427
MAIL : info@oosaka-web.jp
PAGE TOP