こんにちは、ハル@haru_elpisです。
テキスト表示を印象的な動きにできる「jQuery TextFX」の紹介です。
jQuery TextFXの使い方
ダウンロード
![](https://harublog-elpis.com/wp-content/uploads/cocoon-resources/blog-card-cache/f543dc43b7b380979be974b14c3fd120.png)
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のみ
});
コメント