スクロール中にふわっと要素を出現させるには「Waypoints」が手軽でいいよ。

2016年08月21日
follow us in feedly

desktop

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

こんな感じ

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デザインの幅を簡単に広げることができて楽しいですね。

follow us in feedly

関連記事

福岡でホームページ制作を依頼するなら【ハブワークス】

ホームページ制作・リニューアル・スマートフォンサイト制作・ECサイト制作は福岡のハブワークスまでお気軽にどうぞ。WEBサイト制作後の修正・更新・SEO対策もお任せください。リーズナブルな料金設定でサービスをご提供いたします。

webサイト制作・修正に関するお問合せ・ご相談・お見積りはお気軽にどうぞ