ふわっふわなWebページを作りたい

どうもこんにちは塚本です。

AppleのWebサイトを筆頭に、海外のおしゃれなWebサイトは画像などをふわっと表示させてたりしますよね。
スクロールに応じて反応するのでなんか気持ちいいし、これってどうやってんだろうなーって昔はよく思っていました。
色々と調べてみると、とーっても簡単に実装できるものがあったので皆さんも使ってみてはいかがですか？

Animate.css と wow.js を読み込んでclassにちょこっと追記するだけです♪

Animate.css

Animate.cssを読み込むことで、ふわっとさせるのが簡単になります。
公式サイトで、アニメーションの確認とcssファイルのダウンロードが出来ます。

公式サイトはコチラからご覧下さい。

今回の目的の”ふわっと”はもちろん、様々なアニメーションが内蔵されています。

wow.js

wow.jsを利用することで、画面のスクロールに応じてアニメーションを開始させることができます。
こちらも公式サイトから動きを確認することができます。jsファイルはGitHubからどうぞ。

How to Use

まずはお使いのサイトのヘッダーなどに、ダウンロードした2つのファイルを読み込ませて下さい。

Animate.css

‹link rel="stylesheet" href="animate.css"›

wow.js

‹script src="wow.js"›‹/script›

ここで、wow.jsを使うために以下の追記が必要です。

‹script› new WOW().init(); ‹/script›

読み込みが完了したら、ふわっとさせたい要素のclassにアニメーション名を入れてあげます。
全てのアニメーションはGitHubからご覧になれます。

Examples

アニメーションのオプション

右からふわっと

‹div class="wow fadeInRight" data-wow-delay=".5s"›
  ふわっとさせたい要素
‹/div›

こちらは右からふわっと要素が出てくるようにしています。

data-wow-delay=".5s"

で0.5秒遅延をつけています。


簡単で面白い！やりすぎ注意ですね…