animate.css+wow.jsで手軽にかっこいいスクロールエフェクトを!

animate-wow

近年のレスポンシブフレキシブルデザインの流行と共に、すっかりお馴染みとなったanimate.csswow.jsの組み合わせ。
スクロールする度にコンテンツがアニメーション付きで表示される手法です。
しかもそのアニメーションFlash動画を使わず、CSSのみで実現できるのでとても簡単かつエコです。

Animate.css

まずは、Animate.cssの公式サイトでどういったアニメーションがある確認しておきましょう。

プルダウンから効果を選んで「Aminate it」ボタンを押すだけで確認できます。

WOW.js

上記のAnimate.cssWOW.jsを組み合わせると、WOW.jsの公式サイトのような”動き”を付けることができます。

下にスクロールしていくと、その効果が確認できます。

動作サンプル

CodePenに全部入りのサンプルがありましたので、ここでは敢えて使い方を紹介しません。
これであなたのWEBサイトも賑やかになりますね!


Amazonベストセラー

返信を残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA