WEBデザイナーAkiの備忘録

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

2017.8.29 ,

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

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

ダウンロード

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

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

設置方法

ヘッダーに読み込み

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

フッターへの記述

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

htmlへの記述

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

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

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

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

デモページ

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

コメント