MENU

Journal

みなさん、こんにちは、フロントエンドエンジニアのやまもとです。
今回は昨今、色々なサイトで見かける、
「スクロールして要素が画面の中に入った時にフェードインする」
という感じのエフェクトについて書いて見ようかと思います。

この処理は簡単な処理なのですが、
やり方しだいで色々と応用が効くので、覚えておくと便利かと思います。

今回の処理は3ステップ

  1. スクロールの量を取得する(「scrollTop()」を使用)
  2. 要素のドキュメント上の位置を取得する(「offset()」を使用)
  3. 1と2の値を比較して画面に入ったかどうかを判定する

1. スクロールの量を取得する(「scrollTop()」を使用)

こちらタイトルの通りの処理なのですが、jQueryで用意されている
便利なメソッドのscrollTop()を利用して、
今、どれくらいスクロールしたかを取得します。
また、スクロールごとに処理をさせるために、
同じくjQueryのon()メソッドを使って、
スクロールが行われるごとに発生するscrollイベントに
紐付けて処理を行わせます。

JS

      $(function(){
        // スクロールごとに処理をさせる
        $(window).on('scroll',function(){
          // スクロール毎の処理

          // スクロール量を取得
          var scroll_top = $(window).scrollTop();

        });
      });
    

2. 要素のドキュメント上の位置を取得する(「offset()」を使用)

次に目的の要素ののドキュメント上の位置を取得します。
目的の要素には任意のクラスには(今回は「effect」)を付与し、
jQueryのメソッドoffset()を利用して、
ドキュメント上の位置を取得します。

HTML

     <div class="effect">
     この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
     この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
     この文章はダミーです。文字の大きさ、
     </div>
     <div class="effect">
     この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
     この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
     この文章はダミーです。文字の大きさ、
     </div>
     <div class="effect">
     この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
     この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
     この文章はダミーです。文字の大きさ、
     </div>
     <div class="effect">
     この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
     この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
     この文章はダミーです。文字の大きさ、
     </div>
    

CSS

      div {
        width : 400px;
        height : 400px;
        margin-bottom: 50px;
      }
      div:nth-of-type(2n) {
        color: #FFFFFF;
        background-color:#2D579A;
      }
    

JS

      $(function(){
        // スクロールごとに処理をさせる
        $(window).on('scroll',function(){
          // スクロール毎の処理

          // スクロール量を取得
          var scroll_top = $(window).scrollTop();

          // eachを利用して「effect」クラスの要素それぞれに処理を行なう
          $('.effect').each(function(){
            // 要素のドキュメント上の位置を取得
            var offset_top = $(this).offset().top ;
          });
        });
      });
    

3. 1と2の値を比較して画面に入ったかどうかを判定する

最後に取得した2つの値を比較して、画面上に要素が入ったかどうかを判定します。
今回は画面上に登場した要素に対して「fadein」というクラスを付与し、
CSSのtransitionを使ってアニメーションを実装します。
また、画面上端ででアニメーションを開始するというパターンは少ないかと思いますので、
比較の際にスクロール量に対してのマージンを設けています。
最後の例はcodepenで、
※ HTMLは同じです。それぞれの要素にはアニメーションをわかりやすくするために色をつけています。

See the Pen スクロールしてフレームインした時にフェードインなどさせたい場合の処理(jQuery) by Shinji Yamamoto (@commono_yamamoto) on CodePen.

今回はCSSのクラスのつけはずしでアニメーションを行いましたが、
要素ごとに同じクラスで別の動きをさせたり、
jQueryでアニメーションさせたりすることもできますので、
ぜひトライしてみてくださいね!

Journal

CLOSE