【textillate.js】テキストにアニメーションを付けられるjQuery

こんにちは、ハル@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.

github.com

ダウンロードした「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>