プログラミング雑記

【 wow.js 】画面スクロールに合わせてアニメーションをニュルッと発火

楠 剛毅(goke)

個人開発から世界を変えるようなプロダクトづくりを目指しています

はじめに

flowはタイムラインで流れを伝えるサイトですが、ページを読み込んだ直後にコンテンツが全て表示されるわけではなく、画面のスクロールに合わせてコンテンツをニュルッと表示して動きをつけています。
これはwow.jsを利用してとても簡単に実装できます。

実装方法

実装に必要なファイルは下記の2つなので

animate.css
wow.min.js

こちらからダウンロードします。

jsファイルはdistフォルダに、cssファイルはcssフォルダに格納されています。

これらを読み込んで、

new WOW().init();

を実行して、対象としたい要素に対して

<div class="content wow fadeInUp"></div>

のように設定すれば準備完了です。

<html>
<head>
  <script src="dist/wow.min.js"></script>
  <link rel="stylesheet" href="css/libs/animate.css">
  <script>
    new WOW().init();
  </script>
</head>
<body>
  <div class="content wow fadeInUp" style="width:200px;height:200px;background:#aaa;margin:10px;"></div>
  <div class="content wow fadeInUp" style="width:200px;height:200px;background:#aaa;margin:10px;"></div>
  <div class="content wow fadeInUp" style="width:200px;height:200px;background:#aaa;margin:10px;"></div>
  <div class="content wow fadeInUp" style="width:200px;height:200px;background:#aaa;margin:10px;"></div>
  <div class="content wow fadeInUp" style="width:200px;height:200px;background:#aaa;margin:10px;"></div>
  <div class="content wow fadeInUp" style="width:200px;height:200px;background:#aaa;margin:10px;"></div>
  <div class="content wow fadeInUp" style="width:200px;height:200px;background:#aaa;margin:10px;"></div>
  <div class="content wow fadeInUp" style="width:200px;height:200px;background:#aaa;margin:10px;"></div>
  <div class="content wow fadeInUp" style="width:200px;height:200px;background:#aaa;margin:10px;"></div>
  <div class="content wow fadeInUp" style="width:200px;height:200px;background:#aaa;margin:10px;"></div>
  <div class="content wow fadeInUp" style="width:200px;height:200px;background:#aaa;margin:10px;"></div>
  <div class="content wow fadeInUp" style="width:200px;height:200px;background:#aaa;margin:10px;"></div>
  <div class="content wow fadeInUp" style="width:200px;height:200px;background:#aaa;margin:10px;"></div>
  <div class="content wow fadeInUp" style="width:200px;height:200px;background:#aaa;margin:10px;"></div>
</body>

これを表示するとスクロールするたびに箱がニュルッと表示されるようになります。

animeteはfadeInUp

構造としてはanimate.cssのアニメーション効果を利用してwowで表示しているということになるので、animate.cssのアニメーションを別のもの指定すれば表示のされ方も変わります。

つまり、classで指定したfadeInUpの部分をこちらから選んで指定してあげればいいので、例えばflipInYにしてみると

animeteをflipInYにしてみる

こんな感じになりました。

最後に

gokeでは上記のようなプログラムを駆使して新しいサービスを制作しています。気になることなどがあればコメントまたはTwitterでご連絡ください。

  • この記事を書いた人

楠 剛毅(goke)

個人開発から世界を変えるようなプロダクトづくりを目指しています

-プログラミング雑記