こんにちは、ハル@haru_elpisです。
テキストにアニメーションを施す[textillate.js]の紹介です。
Splitting.jsの使い方
公式HP→http://textillate.js.org/
ダウンロード
GitHub - jschr/textillate: A jquery plugin for CSS3 text animations.
A jquery plugin for CSS3 text animations. Contribute to jschr/textillate development by creating an account on GitHub.
ダウンロードした「jquery.textillate.js」・「jquery.lettering.js」・「animate.css」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。
HTML head
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="./css/animate.css">
<script src="./js/jquery.textillate.js"></script>
<script src="./js/jquery.lettering.js"></script>
HTML body
<span class="hoge" data-in-effect="rollIn" data-out-shuffle="true">SAMPLE HELLO!!</span>
JavaScript
$('.hoge').textillate({
selector: '.texts', // 要素を指定
loop: true, // ループ繰り返し
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: true,
reverse: false,
callback: function () {}
},
callback: function () {},
type: 'char'
});
</script>
コメント