最近サイトにアニメーションを実装するために利用したものを紹介します。
それらを使ってこちらのサイトを作っています。参考にどうぞ。
■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>内に以下のように記述する。
1 - アニメーションさせたい要素に以下のように記述する。
1~~~
※「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>内に以下のような記述をする
1
123new WOW().init(); - アニメーションさせたい要素に以下のように記述する
1~~~
※「wow」は必須、後ろをデモから選んだアニメーションを記述する。
次にdata属性を使って、アニメーションのタイミングや時間、回数などの設定をします。
- data-wow-duration:アニメーションの時間(s)(何秒かけて動作するか)
- data-wow-delay:アニメーションのスタートまでの遅延時間(s)
- data-wow-offset:アニメーションのスタート位置(ブラウザの下から何px)
- data-wow-iteration:アニメーションを繰り返す回数
以上の4つで設定します。こちらのサイトで使ったもので説明すると。
1 2 3 |
About |
1行目は、ページが読み込まれたら動作する「fadeInDown」アニメーション。
2行目は、ページが読み込まれてから1秒遅れて動作する「fadeInRight」アニメーション。
3行目は、要素がブラウザ下から620pxの位置まで来たら動作する「fadeIn」アニメーション。
といった感じで使います。個人的にはシンプルでわかりやすかったです。ファイルも軽いですからね。
何か質問、誤情報、誤字などがあればコメントでお願いします。