サイトにアニメーションを簡単実装【Animate.css&wow.js】

最近サイトにアニメーションを実装するために利用したものを紹介します。
それらを使ってこちらのサイトを作っています。参考にどうぞ。

■css3アニメーション「Animate.css」

javascriptやjqueryを利用しているわけではなく、cssで動作しています。

デモ（demo）　：　http://daneden.github.io/animate.css/
GitHub　：　https://github.com/daneden/animate.css

■実装手順（animate.css単体）

GitHubからファイルをダウンロード
ファイルを解凍して、「animate.min.css」を所定の場所へアップロード

<head>内に以下のように記述する。

<link rel="stylesheet" href="animate.min.css">

アニメーションさせたい要素に以下のように記述する。
```
<div class="animated bounce">～～～</div>
```

※「animated」は必須、二つ目はデモから選んだアニメーションを記述する。

jsは動作には必要ありませんが、細やかな設定をするならばjsは必要になります。
その部分で「wow.js」を利用します。

■アニメーションの設定「wow.js」

スクロールでアニメーションさせるjsです。jqueryは利用していません。

デモ（demo）　：　http://mynameismatthieu.com/WOW/
GitHub　：　https://github.com/matthieua/WOW

■実装手順（+animate.css）

GitHubからファイルをダウンロード
ファイルを解凍して、「wow.min.js」を所定の位置にアップロード

<head>内に以下のような記述をする

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

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

アニメーションさせたい要素に以下のように記述する
```
<div class="wow bounce">～～～</div >
```

※「wow」は必須、後ろをデモから選んだアニメーションを記述する。

次にdata属性を使って、アニメーションのタイミングや時間、回数などの設定をします。

data-wow-duration：アニメーションの時間(s)（何秒かけて動作するか）
data-wow-delay：アニメーションのスタートまでの遅延時間(s)
data-wow-offset：アニメーションのスタート位置（ブラウザの下から何px）
data-wow-iteration：アニメーションを繰り返す回数

以上の4つで設定します。こちらのサイトで使ったもので説明すると。

<div class="wow fadeInDown">About
<div class="wow fadeInRight" data-wow-delay="1s">
<div class="wow fadeIn" data-wow-duration="2s" data-wow-offset="620">

1行目は、ページが読み込まれたら動作する「fadeInDown」アニメーション。
2行目は、ページが読み込まれてから1秒遅れて動作する「fadeInRight」アニメーション。
3行目は、要素がブラウザ下から620pxの位置まで来たら動作する「fadeIn」アニメーション。

といった感じで使います。個人的にはシンプルでわかりやすかったです。ファイルも軽いですからね。

何か質問、誤情報、誤字などがあればコメントでお願いします。

■css3アニメーション「Animate.css」

■アニメーションの設定「wow.js」

最近の投稿

コメント