文字を動かす、jQuery
こんにちは、合同会社beReadyの奥山です。
最近はかなり暑くて、屋内の作業が多い僕は、わざわざ暑い日中に
外に散歩して、みるみる黒くなっていっています笑
さて、みなさんはウェブサイト制作を行うときや、
サイトデザインを見て、参考にしているときに、
文字が順番に動いてくるのを見たことがありませんか？？
あれかっこいいですよねー！！
今回は文字を順番に表示したり、消したりできるjQueryプラグインの
「textillate.js」についてご紹介します。
デモページ
まずはtextillate.jsのデモページをご覧ください。
textillate.jsの使うための準備
textillate.jsの使い方はまず3つのファイルをダウンロードするところから始まります。
必要なものはこちら。
①textillate.js
②letterring.js
③animate.css
これらのダウンロードURLを載せておきますので、
必要に応じて持っていない人はダウンロードしてください。
textillate.js
letterring.js
animate.css
なぜ3つも必要なのかというと、感覚的にお話しすると、
lettering.jsが、文字の1つ1つに時間差でエフェクトをかけるという仕事をします。
そのエフェクトの内容がanimate.cssというわけですね。
animate.cssに保存されているエフェクトの内容を時間差でかけると。
この一連の挙動を、textillate.jsで管理しているといった感じです。
もし間違っていたらご指摘ください笑
textillate.jsの使い方
まずはダウンロードした3つのファイルを各サーバーに
FTP経由でアップロードします。
大体は「js」とかいうフォルダがあるのでそこに入れるか、
自分でフォルダを作って入れればいいでしょう。
animate.cssはcssフォルダに入れる感じで。
そしたら、読み込んでいきます。
お使いのサイトのhead部分に
|
1 2 3 4 |
<link href="css/animate.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="js/jquery.lettering.js"></script> <script src="js/jquery.textillate.js"></script> |
と記述して、（ここは人によってどこに保存しているか異なるので少し変わります。）
ファイルを読み込んでいきます。
説明は省いていますがjQueryの読み込みの後にtextillate.jsと
letterring.jsは読み込んでくださいね。
次は実際に動かすための記述をしていきます。
/headの直前に
|
1 2 3 4 5 |
<script> $(function () { $('効果をつけたいもののclass名').textillate(); }) </script> |
これを記述します。
これがもっとも単純な記述の仕方ですね。
そして実際に効果をつけたい要素を記述していきます。
|
1 2 3 |
<p class="demo">デモですデモですデモです。</p> <p class="demo2">デモですデモですデモです。</p> <p class="demo3">デモですデモですデモです。</p> |
これで基本形は完成しました。
続いて効果をつけていきます。
効果には（animate.cssのことですね）はjs要素としてつけるのか、
あるいはdata要素としてつけるのか2つ種類があります。
js要素での使い方
js要素ではこのように記述していきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<script> $(function () { $('.demo').textillate({ //繰り返し loop: true, // アニメーションの間隔時間 minDisplayTime: 1000, // アニメーション開始までの遅延時間 initialDelay: 0, // アニメーションの自動スタート autoStart: true, // 開始時のアニメーション設定 in: { // エフェクトの指定 effect: 'fadeIn', // 遅延時間の指数 delayScale: 1.5, // 文字ごとの遅延時間 delay: 50, // true:アニメーションをすべての文字に同時適用 sync: false, // true:文字表示がランダムな順に表示される shuffle: true, }, // 終了時のアニメーション設定 out: { effect: 'hinge', delayScale: 1.5, delay: 50, sync: false, shuffle: false } }); }) </script> |
textillate.jsにはinとoutのタイミングがあり、
まあ単純に文字がどういう感じで入ってくるのか、
消えていくのかを指定することができるんです。
ここで注意が必要なのはoutのエフェクトをかけるときは
必ずloopがtrueになっていなければなりません。
loopがfalseの時はoutの効果は発動しないので注意してください。
data要素での使い方
data要素での使い方は動かしたい要素に
直接書き込んでいきます。
data要素に書き込む前に一応トリガーとしてjsも書いておく必要があるので、
まずそちらを書いていきましょう。
|
1 2 3 4 5 |
<script> $(function () { $('.demo1, .demo2').textillate(); }) </script> |
最初に書いた基本形と同じですね笑
これを書いたら直接data要素を書き込みます。
|
1 2 |
<p class="demo1" data-in-effect="fadeInLeftBig" data-out-effect="bounceOut" data-loop="true" data-out-shuffle="true">デモですデモですデモです。</p> <p class="demo2" data-in-effect="zoomInLeft" data-out-effect="zoomOutRight" data-loop="true" data-out-shuffle="true">デモですデモですデモです。</p> |
これで大丈夫です。
書き方としては
data-(inかoutかどちらの時でもないものは書かない)-(effectなのかdelayなのかshuffleなのか)
という書き方になります。
ちょっと見にくいですね笑
本当によく間違えるのですがdata要素ですからね？？
date要素ではないですよw
綴りをよく確認して使ってくださいね！！
ではまた。