こんにちは、ハル@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.
ダウンロードした「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のみ
});
コメント