本日は、テキストをフワッと出すjQueryプラグインであるWOW.jsの実装方法をご紹介していきます。
目次
1.WOW.jsのファイルをダウンロードする。
まずは、以下のリンクからファイルをダウンロードして、作業ファイルにWOW.jsのファイルを入れましょう！
https://github.com/graingert/wow
2.作業ファイルにライブラリを読み込む
それでは、作業ファイルにライブラリを読み込んでいきましょう！
まずは、htmlのhead内に以下のコードを入れてください。
<head>
・・・
<link rel="stylesheet" href="./WOW-master/css/libs/animate.css">
<script src="./WOW-master/dist/wow.min.js"></script>
</head>
ファイルの名称を変えずに、そのまま作業ファイルに入れた方は、上記のコードで大丈夫です。
ファイルの名称を変えた方は、hrefのコードを記載の際、名称に合わせた階層で記入してください。
3.</body>の直前にscriptを記載する
java script内に、以下のコードを入れてください。
・・・
<script>
new WOW().init();
</script>
</body>
</html>
java scriptの記載は、以上のコードだけでOKです！
めちゃくちゃ便利ですね！
4.適用させたいテキストのclassにコードを記載
class内に以下のコードを入れます。
<div class="wow fadeIn">テキスト</div>
上記のコードのように、wowを記載した後に、スペースを入れてアニメーションを指定します。
アニメーションの種類やオプションの動きについては、以下のサイトがわかりやすいため確かめてみてください。
番外編：WordpressにWOW.jsを実装する方法
1.header.phpの<?php wp_head()?>の後に、ライブラリ読み込みコードを記載する
<head>
・・・
<?php wp_head(); ?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/WOW-master/css/libs/animate.css">
<script src="<?php echo get_template_directory_uri(); ?>/WOW-master/dist/wow.min.js"></script>
</head>
<?php echo get_template_directory_uri(); ?>を忘れずに記載しましょう！
・・・
<script>
new WOW().init();
</script>
<?php wp_footer(); ?>
</body>
</html>
3.適用させたいテキストのclassにコードを記載する
こちらは、上記で紹介したやり方と同じです。
まとめ
以上が、WOW.jsの実装方法でした。
wordpressの実装方法で、もっといい方法をご存知の方は、ぜひtwitterのダイレクトメールで教えてください！
それでは、最後まで読んでいただきありがとうございました。
タグ
