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

animate-wow
  • URLをコピーしました!

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

目次

Animate.css

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

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

Animate.cssの基本的な使い方

まずは、メインのCSSファイルの中でインポートするか、<head>タグの中で読み込みます。
CDNを利用すると良いでしょう。

次に、動きをつけたいHTMLタグにクラス要素を追加して、どのように動かすか指定します。

WOW.js

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

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

WOW.jsの動作サンプル

CodePenに全部入りのサンプルがありましたので、ここでは敢えて使い方を紹介しません。

あわせて読みたい
wow.js when using delay with wow.js only a few of the animate.css classes keep elements invisible until scroll past. They are highlighted blue. ...

これであなたのWEBサイトも賑やかになりますね!

ソシム
¥3,080 (2024/07/29 02:38時点 | Amazon調べ)
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次