textillate.jsは、サイト内の文字を表示する際にアニメーションを加えることができるjQueryプラグインです。
挙動については、こちらで確認できます。
textillate.jsの使い方
ステップ1. 各種スクリプトとCSSのダウンロードと設置
GitHubから各種スクリプトとCSSファイルをダウンロードします。
ダウンロードしたファイルの中から、以下のファイルをサーバーにアップロードしてください。
- jquery.textillate.js
- assets/animate.css
- assets/jquery.fittext.js
- assets/jquery.lettering.js
ステップ2. jQuery本体および各種スクリプト・CSSの読み込み
続いて、jQuery本体と各種スクリプト、CSSファイルを読み込みます。
1 2 3 4 5 | < link rel = "stylesheet" href = "assets/animate.css" > < script src = "//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></ script > < script src = "jquery.textillate.js" <</script> < script src = "assets/jquery.fittext.js" <</script> < script src = "assets/jquery.lettering.js" <</script> |
スクリプトは、</body>の直前で読み込んで大丈夫です。
ステップ3. HTMLのマークアップ
HTMLで文字をマークアップします。今回は.sampleというクラスを追加しました。
1 | < p class = "sample" >Test Text</ p > |
HTMLは非常にシンプルですね。
ステップ4. textillate.jsの実行
最後にtextillate.jsを実行します。
1 2 3 4 5 | <script> $( function () { $( '.sample' ).textillate(); }) </script> |
.sampleのところは、環境に合わせてクラス名を変更してください。
textillate.jsのオプション指定
textillate.jsには、各種オプションが用意されています。以下のようにアニメーションの繰り返しや遅延などを細かく指定できます。
01 02 03 04 05 06 07 08 09 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 | <script> $( '.sample' ).textillate({ selector: '.texts' , //要素の指定 loop: false , //アニメーションの繰り返し minDisplayTime: 3000, //アニメーションの間隔 initialDelay: 1000, //アニメーション開始までの遅延 autoStart: true , //アニメーションの自動スタート inEffects: [], //エフェクト開始時のアニメーション outEffects: [ 'hinge' ], //エフェクト終了時のアニメーション //アニメーション開始時の設定 in : { effect: 'fadeInLeftBig' , //エフェクトの指定 delayScale: 1.5, //各文字に適用される遅延係数 delay: 50, //文字ごとの遅延時間 sync: false , //アニメーションをすべての文字に同時に適用 shuffle: false , //ランダム表示 reverse: false , //エフェクトの逆再生(sync:trueとの併用は不可) callback: function () {} //コールバック関数 }, //アニメーション終了時の設定 out: { effect: 'hinge' , delayScale: 1.5, delay: 50, sync: false , shuffle: false , reverse: false , callback: function () {} } callback: function () {}, type: 'char' }); </script> |
詳しくは、GitHubのReadmeをご参照ください。
あとがき
キャッチコピーなど、注目してほしい文字にアニメーションを加えると効果的ですね。
文字にアニメーションを加えたい時は、ぜひ参考にしてください。