近年のレスポンシブやフレキシブルデザインの流行と共に、すっかりお馴染みとなったanimate.cssとwow.jsの組み合わせ。
スクロールする度にコンテンツがアニメーション付きで表示される手法です。
しかもそのアニメーションはFlashや動画を使わず、CSSのみで実現できるのでとても簡単かつエコです。
Animate.css
まずは、Animate.cssの公式サイトでどういったアニメーションがある確認しておきましょう。
プルダウンから効果を選んで「Aminate it」ボタンを押すだけで確認できます。
WOW.js
上記のAnimate.cssにWOW.jsを組み合わせると、WOW.jsの公式サイトのような”動き”を付けることができます。
下にスクロールしていくと、その効果が確認できます。
動作サンプル
CodePenに全部入りのサンプルがありましたので、ここでは敢えて使い方を紹介しません。
これであなたのWEBサイトも賑やかになりますね！
- Original:https://minory.org/animate-wow.html
- Source:Minory
- Author:管理者
Amazonベストセラー
Now loading...