【JavaScript】jQuery不要で動く[wow.js]でスクロール連動型アニメーションを実装。(1)TagsONZE株式会社オンズ企業サイトへMenu株式会社オンズ開発ブログ【JavaScript】jQuery不要で動く[wow.js]でスクロール連動型アニメーションを実装。【JavaScript】jQuery不要で動く[wow.js]でスクロール連動型アニメーションを実装。Google最近はjQuery不要でも動くスクリプトが流行りのように感じていますが、気のせいでしょうか?今日紹介する[wow.js]も、jQuery要らずで実装可能な優良スクリプト。容量も8KBと軽量で、別途配布されている「Animate.css」との組み合わせで様々なアニメーション効果を付与することができます。アニメーションが開始されるスイッチはウィンドウのスクロールに依存しており、いくつかのオプションを設定することでタイミングやアニメーションの持続時間、繰り返される回数などを指定できます。実際に[wow.js]を使ったサンプルサイトを用意しましたので、まずはコチラをご覧ください。wow.js:サンプルサイト画面をスクロールさせると、それに合わせてコンテンツがアニメーションするのが確認できます。jQueryを使わずに済むこともあり、導入はいたって簡単です。必要なファイルをダウンロードする[wow.js]の利用には、メインとなるスクリプト本体ファイルの「wow.js」以外に、スタイルシートの「animate.css」が必要です。それぞれを以下のサイトからダウンロードしてきましょう。wow.jsanimate.css取得したファイルを読み込む以下のコードを参考に、ダウンロードしてきた2つのファイルをhtmlファイルに読み込ませます。src="js/wow.min.js"></script>さらに、[wow.js]を起動させるための初期設定が必要なので、以下のコードも記述しておく必要があります。WOW().init();</script>繋げて書くと以下のようになります。WOW().init();</script>記述する場所は<head>〜</head>内が適切でしょう。アニメーション処理を施したい要素を定義する最後に、動作させたい要素に特定のクラス名を付与します。fadeInUp">アニメーションさせたい要素</div>アニメーションの種類は「animate.css」に依存しており、「fadeInRight」「fadeInUpBig」「flipOutX」「rotateInUpLeft」などなど、様々な動きの中から好きなものを指定して使うことができます。このとき、クラス名に「wow」を付けておくことも忘れないように。オプション設定HTML5から導入されたカスタムデータ属性を使って、以下、4つのオプションを指定することが可能です。data-wow-durationアニメーションを継続させる時間。長く設定するとゆっくりアニメーションされる。data-wow-delayアニメーションの開始タイミング。data-wow-offsetアニメーションをスタートさせる位置。data-wow-iterationアニメーションを繰り返す回数。公式サイトのデモは以下より。AUSSAGUEL商用での利用は有料になるのでご注意を。オンズ株式会社オンズ制作チーム。ウェブサイト制作、デザイン制作でお悩みの際はお気軽にご相談ください。https://on-ze.comこちらの記事もいかがですか?アナタにオススメ!同じカテゴリーの他の記事です。【JavaScript】超軽量・超高速のJavaScriptフレームワーク[Vanilla.js]をオススメします。Images]を紹介します。