「Animate.css」と「wow.js」でサイトに動きをつける（デモあり）

2017.8.29 ,

最近作ったサイトに導入しようとして、結局その動きいらない…ということになったので、デモだけここにリサイクルしておきます。

Animateだけだと、ページを開いた瞬間に動きがつくので、「スクロールしたら出てくる」とか、「何秒後に･･･」とか少し指定したい場合はwow.jsも併用するといいです。

ダウンロード

まずは公式からAnimate.cssをダウンロードします。

次にGitHubからwow.jsをダウンロードです。

設置方法

ヘッダーに読み込み

<link rel="stylesheet" href="animate.css" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="wow.min.js"></script>

jqueryも勿論必要です。上記はヘッダーに読み込みます。

フッターへの記述

bodyの閉じタグの直前に下記を追加します。

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

htmlへの記述

動きをつけたいコンテンツに、クラスでwow と希望のanimateのクラスをつけるだけです。

class="wow fadeIn"

例はフェードインがついています。効果のクラスは公式に一覧があるので、実際の動きを見ながらクラスを付けていくといいと思います。

wowでの表示指定は「〇秒かけて表示」「スクロールがここまできたら表示」など、何種類かあるので、他のブログなどを参考にするといいです。（ぶん投げ）

data-wow-duration="3.0s"

上は、3秒かけてこの効果を表示する･･･という感じです。

デモページ

簡単なデモページを作ってみました。
パララックスサイトや縦に長いサイトで、簡単にコンテンツに動きをつけたい場合はこれがよさそうですね。

B!