スクロールアニメーションを実装できる「wow.js」の使い方と動作デモ
2021/1/28
2021/11/8
6275 views
「wow.js」使い方とデモ
スクロールで下や上や横からふわっとボックス要素が出てくるウェブデザインってモダンなウェブサイトではかなりよく見かけます。
目を引くだけでなく、おしゃれな雰囲気に仕上げられますよね。
そんな要素アニメーションを簡単に実装できるJavaScriptライブラリ「wow.js」を今回は紹介したいと思います。
wow.jsとは？
wow.jsは、どこかのすごい人が作成したJavaScriptライブラリです。
スクロール連動の要素アニメーションを実現することができます。
個人や商用ライセンスや、フォークされた無料版などがあるので公式サイトで規約を確認ください。
wow.jsの使い方
必要なファイルを読み込み準備する
まず、jQuerlyも必要なのでインストールしておきましょう。
では本題に、上記のGitHubからファイルをダウンロードできます。
「wow.min.js」と「animate.css」というファイルを自身のサーバーの任意の場所にアップし、読み込みます。
以下はそれぞれを読み込む参考の記述です。
1. wow.min.jsを読み込む
<script src="js/wow.min.js"></script><head>タグ内に記述でいいと思います
2. animate.cssを読み込む
<link rel="stylesheet" href="css/animate.css"><head>タグ内に記述でいいと思います
3. 使用宣言のスクリプトを記述する
これ重要箇所で、以下を記述する必要があります。
<script>
new WOW().init();
</script></body>タグの直前でいいと思います
動かしたい要素にclassを付けて実装
実装には以下のように動かしたい要素に「wow」と動作を指定する２つのクラスを付与します。
<div class="wow fadeInUp">ここが動くよ</div>以下のデモページでいくつかのクラスの動きを紹介しています。
詳細設定も可能
次のパラメーターを使って詳細な調整もできます。
data-wow-duration=””
data-wow-durationでは、動きが継続する時間を設定できます。長くすればゆっくり動くことになります。
<div class="wow fadeInUp" data-wow-duration="3s">ここが動くよ</div>data-wow-delay=””
data-wow-delayでは、要素が表示されてから動きだす時間を設定できます。
<div class="wow fadeInUp" data-wow-delay="3s">ここが動くよ</div>data-wow-offset=””
data-wow-offsetでは、要素の動き出す位置を設定できます。
<div class="wow fadeInUp" data-wow-offset="10">ここが動くよ</div>data-wow-iteration=””
data-wow-iterationでは、要素を何回繰り返して動かすか設定できます。
値に「infinite」にすると無限になります。
<div class="wow fadeInUp" data-wow-iteration="10">ここが動くよ</div>ファーストビューで一瞬表示されてしまう問題
上記でwow.jsの実装の解説は終わりなのですが、ページのファーストビューとなる位置に配した要素では、アニメーション前の要素が一瞬表示されてしまうというこのになる場合があります。
ma2.workさんのサイトにて対応方法を解説されていましたのでご紹介したいと思います。
wow.jsで簡単スクロールアニメーション！でもバグが…【対処法】
対処方法
1. 囲っている要素にクラスを付与
bodyや全体を囲っている要素に「preload」のクラスを付与します。
<body class="preload">2. CSSで要素を初期非表示に
以下のようにCSSで対象の要素を非表示します。
以下は、fadeInを付与した場合です。
body.preload .wow.fadeIn {
opacity: 0 !important;
}3. 読み込み終了時にクラスを削除
ソースの読み込み終了時にスクリプトで非表示クラスを削除します。
<script>
$(window).load(function() {
$("body").removeClass("preload");
});
</script>以上です。
なるほどこのような解決方法があるのですね！
まとめ
以上がwow.jsの使い方とクラスのサンプルのご紹介でした。
この記事へのコメント
- まだ書き込みはありません