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

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

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

jQuery TextFXの使い方

jQuery TextFXの使い方

ダウンロード

Build software better, together

GitHub is where people build software. More than 100 million...

ダウンロードした「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のみ
  });