2020.09.29  2021.05.30

テキストアニメーションができる。jquery プラグインのtextillateを紹介

こんにちは!マコブログです!

本日は、テキストを1文字ずつアニメーションさせるjQueryプラグイン「textillate」についてご紹介していきたいと思います!

textillateってなんだ?

textillateは、正式には「textillate.js」という名前で公開されているjQueryプラグインです!

簡単に説明すると、WEBサイト上に表示されたテキスト(H1タグの中身など)を1文字ずつアニメーションさせて個性的なフェードインができるプラグインなんです!



テキストを一文字ずつアニメーションさせようとすると、1つずつspanタグで括ってcssでanimationと@keyflameを使用して細かく値を設定しなくてはいけないですよね…。

その手間を省いてくれるすごいやつがこの textillate.jsなんです!

実際に使ってみる

まずはtextillate.jsでできるアニメーションの例を見てみましょう。

下記URLから公式ページに遷移できます↓
https://textillate.js.org/

それでは参りましょう!…といきたいところですが、jQueryプラグインなので、必ずjQueryは読み込んでおいてくださいね!
jQueryの読み込みが完了したら、その記述の後に次の3つのファイルを読み込んでください。↓↓↓↓

jquery.textillate.js
jquery.lettering.js
animate.css

下記URL(GIT)からダウンロードできます。
https://github.com/jschr/textillate

※CDNでこれらのファイルを別々で読み込む場合、animate.cssは3系にしてください。最新の4系ではtextillate.jsは機能しません。

読み込みが完了したら、使用しているjsファイルに下記を記述してください。

<script>
$(function () {
$('アニメーションさせたいクラス').textillate();
})
or
$('アニメーションさせたいクラス').textillate({
loop: false, // ループ繰り返し
minDisplayTime: 3000, // アニメーションの間の時間を記入
initialDelay: 1000, // アニメーション遅延時間を記入
autoStart: true, // アニメーションの自動スタートの有無
in: {
effect: 'fadeInLeftBig', // エフェクトの指定、公式ページも参照してください。
delayScale: 1.5, // 遅延時間のスケール
delay: 50, // 一文字ごとにどれだけ感覚を開けるかを記入
sync: false, // すべての文字にアニメーションを同時に充てるかの有無
shuffle: false, // 文字のランダム表示をするかの有無
reverse: false, // エフェクトを逆に再生するかどうか(syncがtrueのときは記述しないでください。)
},
})
</script>

オプションの設定箇所は、$(‘アニメーションさせたいクラス’).textillate({オプション})
↑↑↑
上記の様に設定してみてください。

そのほかのオプションに関して設定方法をもっと詳しく知りたい場合は下記を参考にしてください。
https://www.oosaka-web.jp/column/web/160523/

まとめ




いかがでしたでしょうか?

本日は、jQueryプラグイン「textillate」を使用してテキスト1文字ずつにアニメーションを加える方法をご紹介しました。

途中で注意書きをしましたが、animate.cssは、2020年5月に、V4(バージョン4)がリリースされ、V3(バージョン3)とは互換性が無くなってしまいました。

この影響で、animate.cssのV4をよみこんでしまうと、textillateがうまく動作しないです。←(これで自分もやられました…。)

プログラミングをしていく際、エラーやバグはつきものです。それらがないほうが不自然ですし、あったらその都度成長できます。

負けずに一緒に成長していきましょう!

こちらの記事も是非チェックしてみてください↓
HTML5 videoタグを使ってWEBサイト上で動画を再生させる方法

あなたにオススメの記事
マコブログ
Makoto
高校卒業と同時にプログラミングを学習しはじめ、今年で4年目になります。
普段はフロント周りで作業をしていて、WordPressの開発とSEO対策には自信があります。
マコブログでは、プログラミングやSEO対策についての情報を発信しています。

よく読まれる記事

S&P500研究所

【マコブログ 2nd】S&P500研究所がOPENしました!!

Read More →