簡単！スクロールでふわっと表示させる方法

スクロールしたらふわっと表示するサイトが増えていますよね。
なかなかそういうサイトをコーディングする機会がないのと、難しそうだったので躊躇していました。

でも、Animate.cssとWOW.jsを使えば簡単にできるんですね！
「Animate.css」と「wow.js」でWebサイトにアニメーションをつけてみようを参考にしました。

まずは、Animate.cssをダウンロードします。

head内にダウンロードしたAnimate.cssを読み込みます。

1	`<link` `rel="stylesheet"` `href="css/animate.css">`

次にWOW.jsをダウンロードします。
WOW.jsは商用利用だと有料になるので、ライセンスをお確かめの上お使いください。

こちらはbody終了タグの直前に読み込みます。

<script src="js/wow.min.js"></script>
<script>new WOW().init();</script>

スクロールして表示領域に入ったらふわっと表示させたい箇所に、

class=”wow Animate.cssで指定できるアニメーション” オプション

を指定します。

オプションは下記があります。

data-wow-duration:
どれくらいのスピードかけて表示するか時間を指定

data-wow-delay:
スクロールで表示領域に入ったら指定した秒数だけ遅らせて表示開始する

data-wow-offset:
アニメーションを開始する距離を指定（基準値は画面下）

data-wow-iteration:
何回アニメーションを繰り返すか指定

実際にサイトを作成してみました。

htmlには下記のように書きました。

<header>
  <div class="contain">
  <nav>
    <h1>LOGO</h1>
    <ul>
      <li class="wow fadeInUp" data-wow-duration="2s" data-wow-delay="1s">fadeInUp</li>
      <li class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="1s">fadeInUp</li>
      <li class="wow fadeInDown" data-wow-duration="2s" data-wow-delay="1s">fadeInDown</li>
      <li class="wow fadeInDown" data-wow-duration="2s" data-wow-delay="1.2s">fadeInDown</li>
    </ul>
  </nav>
  </div>
</header>
 
<figure><img class="wow slideInLeft img100" data-wow-duration="2s" data-wow-delay="0.5s" src="img/img-1.jpg" alt=""></figure>
<figure><img class="wow zoomInUp img100" data-wow-duration="2s" data-wow-delay="0.5s" src="img/img-2.jpg" alt=""></figure>
<figure><img class="wow fadeInDownBig img100" data-wow-duration="2s" data-wow-delay="0.5s" src="img/img-3.jpg" alt=""></figure>
<figure><img class="wow flipInX img100" data-wow-duration="2s" data-wow-delay="0.5s" src="img/img-4.jpg" alt=""></figure>

cssは下記のように書きました。

.contain {
    width: 1000px;
    margin: 0 auto;
}
img {vertical-align: bottom;}
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
}
nav {
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin-top: 10px;
}
h1 {
    color: #fff;
    text-shadow: 1px 1px 3px #000;
    width: 150px;
    padding: 10px 0;
}
nav ul {
    display: flex;
}
nav li {
    color: #fff;
    text-shadow: 1px 1px 3px #000;
    width: 150px;
    padding: 10px 0;
}
 
.img100 {
    width: 100%;
    height: auto;
}

DEMO