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

01_animate-wow

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

でも、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;
}

DEMO

スポンサーリンク
ad
ad

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
ad