「Animate.css」と「wow.js」で動きのあるサイトを作る

LINE

「Animate.css」と「wow.js」を組み合わせて使うことで、簡単でシンプルにWebサイトに動きをつけることができます。このふたつを使うことで、ほとんどプログラミングせずに動きのあるサイトが作れます。

DEMO

Contents

使用方法
ダウンロード
準備するファイル
外部ファイルの読み込み
JavaScript
HTML
Option

使用方法

ダウンロード

Animate.css
wow.js

準備するファイル

・jquery.js
・Animate.css
・wow.js

外部ファイルの読み込み

<!-- css -->
<link rel="stylesheet" href="css/animate.min.css”>

<!-- js -->
<script src="js/wow.min.js"></script>

JavaScript

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

new WOW().init();

</script>

HTML

要素のclassに”wow アニメーション名”を指定することでスクロールが要素に達した時指定したアニメーションが実行されます。

<div class="wow fadeInUp"> コンテンツ内容 </div >

1	<div class="wow fadeInUp"> コンテンツ内容 </div >

アニメーションの種類を調べるには、Animate.cssのページのプルダウンメニューから確認することができます。
Animate.css

Option

表示させるタイミングをずらしたり、繰り返しアニメーションするオプション設定もありますのでお時間があれば試してみてください。
「data-wow-duration = アニメーション時間」
「data-wow-delay = アニメーションのスタートのタイミング」
「data-wow-offset = アニメーションがスタートする距離」
「data-wow-iteration = アニメーションの繰り返し回数」

DEMO

オプションもいくつか用意されており、ループや自動再生なんかも簡単に設定できたりしますのでオススメです。