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

Pocket

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

スポンサーリンク

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

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

animate-css

デモ(demo) : http://daneden.github.io/animate.css/
GitHub : https://github.com/daneden/animate.css

■実装手順(animate.css単体)

  1. GitHubからファイルをダウンロード
  2. ファイルを解凍して、「animate.min.css」を所定の場所へアップロード
  3. <head>内に以下のように記述する。
  4. アニメーションさせたい要素に以下のように記述する。

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

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

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

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

wowjs

デモ(demo) : http://mynameismatthieu.com/WOW/
GitHub : https://github.com/matthieua/WOW

■実装手順(+animate.css)

  1. GitHubからファイルをダウンロード
  2. ファイルを解凍して、「wow.min.js」を所定の位置にアップロード
  3. <head>内に以下のような記述をする
  4. アニメーションさせたい要素に以下のように記述する

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

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

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

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

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

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


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

Pocket