[JS]デモがめちゃ楽しい！jQuery不要でスクロールにあわせて要素をアニメーションで表示するスクリプト -WOW.js

Post on:2014年2月12日

ページを表示した時やスクロールした時など、ページ上の要素がビューポートに表示された時に各要素にさまざまなアニメーションをセットする超軽量（3KB）スクリプトを紹介します。

上から左から右からスライドさせたり、タイミングをずらして順番に表示したり、さまざまな設定を簡単に実装できます。

サイトのキャプチャ

WOW.js
WOW.js -GitHub

WOW.jsのデモ

デモでは上記キャプチャのアニメーション以外にも、さまざまなアニメーションが仕込まれています。

サイトのキャプチャ

デモページ

要素がビューポートに表示される時にアニメーションが発動するので、ゆっくりスクロールして見てください。
アニメーションのタイミング、持続時間、回数、位置などを簡単に設定できます。

サイトのキャプチャ

ページ下部にもたくさんのアニメーションが！

アニメーションはAnimate.cssを使用しているので、さまざまなものが利用できます。
どのようなアニメーションががあるのか、実装方法など、当ブログで以前紹介した記事をご覧ください。

WOW.jsはデモ以外にも、他のサイトで実際に使用されているさまざまな例があります。
どのサイトもアニメーションが楽しく、とても印象的です。

サイトのキャプチャ

Fliplingo

サイトのキャプチャ

Nasty Icons

サイトのキャプチャ

Stream Line Icons

WOW.jsのつかいかた

Step 1: 外部ファイル

当スクリプトを</body>の上、Animate.cssをhead内に外部ファイルとして記述します。

<head>
  ...
  <link rel="stylesheet" href="css/libs/animate.css">
</head>
<body>
  ...
  <script src="dist/wow.js"></script>
</body>

Step 2: JavaScript

スクリプトをセットします。

<script>
 new WOW().init();
</script>

Step 3: HTML

まず、適用する要素に「.wow」を加えます。

<div class="wow">アニメーションさせるコンテンツ</div >

あとは、Animate.cssのエフェクトを加えます。

<div class="wow bounceInUp">アニメーションさせるコンテンツ</div >

これでその要素が表示された時に、アニメーションがスタートします。

data属性を使い、アニメーションスタートのタイミングや持続時間を設定することもできます。

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></section>
data-wow-duration
アニメーションの持続時間
data-wow-delay
アニメーションをスタートする時の遅延時間
data-wow-offset
アニメーションをスタートする距離（ブラウザの下から）
data-wow-iteration
アニメーションが繰り返される数

sponsors

top of page

©2024 coliss