【jQuery TextFX】テキストに動きを付けられる便利なjQuery

こんにちは、ハル@haru_elpisです。

テキスト表示を印象的な動きにできる「jQuery TextFX」の紹介です。

jQuery TextFXの使い方

ダウンロード

Build software better, together

GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.

github.com

ダウンロードした「jquery.transit.js」・「jquery.textFx.js」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。

head

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.transit.js"></script>
<script type="text/javascript" src="jquery.textFx.js"></script>

HTML

<p class="class名">テキスト</p>

JavaScript

$(document).ready(function() {
  $('.class名').textFx({
    type: 'slideIn', //動きfadeIn  slideIn  rotate  scale
    iChar: 20, //文字間の表示間隔
    iAnim: 20, //アニメーションの速度
    direction: 'top' //現れる方向slideのみ
  });