スクロールしたらふわっと表示するサイトが増えていますよね。
なかなかそういうサイトをコーディングする機会がないのと、難しそうだったので躊躇していました。
でも、Animate.cssとWOW.jsを使えば簡単にできるんですね！
「Animate.css」と「wow.js」でWebサイトにアニメーションをつけてみようを参考にしました。
まずは、Animate.cssをダウンロードします。
head内にダウンロードしたAnimate.cssを読み込みます。
<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;
}