ページをスクロールすると要素がふわっと出現するサイトが増えてますね。

こんな感じで

Waypoints

「Waypoints」はこのようなスクロールイベントを簡単に実装できるjQueryプラグインです。

使い方

まずは下記公式サイトからダウンロードします。

 Waypoints

ダウンロードされたzipファイルを圧縮してlibフォルダにある「jquery.waypoints.min」をヘッダーに読み込んでおきます。

<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>

これでWaypointというグローバルクラスへのアクセス権が与えられます。

公式サイトのGetting Startedではこのクラスをインスタンス化してWaypointを作成して複雑な処理もできるように書かれていますが、ここでは単純にCSS3アニメーションを使用します。

CSS3のアニメーションはIE9では未実装ですが、スクロールイベントが効かなくても問題は無いので割りきっていきます。Microsoftも旧バージョンのIEサポートを終了していることですしね。

まずは、次のように「Waypoints」を使用するためのスクリプトを記述します。

$(function(){
    $('#contents').waypoint(function(){
        $('.box').addClass('animated');
    },{
        offset : '90%'
    });
});

#contentsがブラウザの上端にきたら、.boxに「animated」というクラスが追加されます。指定するセレクタはそれぞれ書きかえてください。

ちなみにoffsetはブラウザの上端にセレクタで指定した要素がきたらというトリガーのデフォルト値を切り替えることができます。詳しくはoffset optionで確認を。

後は追加されたanimatedクラスに自由にCSS3アニメーションを指定すればOKです。

例えばこんな感じで

.animated {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

CSS3アニメーションはWebデザインの幅を簡単に広げることができて楽しいですね。