【コピペOK】スクロールに合わせてフッと表示【jQuery】


どうも、こんにちは。
友太郎(@yutarou_sakai)です。

この記事では、画面のスクロールに合わせて要素をフッと表示を表現するコードを紹介します。

この表現を使えばサイトのクオリティがグッと上がりますので、ぜひ取り入れてください!

使う言語

  • HTML
  • CSS
  • jQuery

少しのHTML・CSSとjQueryで表現可能です。

コード

実際のコードがこちらです。


.fadein {
  // 透明度を0に
  opacity : 0;
  // 少し位置をずらす
  transform: translateY(20px);
  // 動く速度を指定
  transition: all 1s;
}

jQuery(function ($) {
  $(function () {
    $(window).scroll(function () {
      $('.fadein').each(function () {
        // 一番上からの位置を検出
        var targetElement = $(this).offset().top;
        // スクロール位置を取得
        var scroll = $(window).scrollTop();
        // 画面の高さを取得
        var windowHeight = $(window).height();
        // 要素の高さより200px高い位置に来たら
        if (scroll > targetElement - windowHeight + 200) {
          // 透明度を戻す
          $(this).css('opacity', '1');
          // 位置を戻す
          $(this).css('transform', 'translateY(0)');
        }
      });
    });
  });
});

あとは、フッと表示させたい要素にHTMLでclass=”fadein”を追加すればOK!

軽く解説

今回のコードで、各言語は以下の役割です。

  • CSS →要素をあらかじめ消しておく&ちょっと位置をずらす
  • jQuery →スクロールの位置を検出して、要素を表示させる

要素の表示は透明度を操作しています。
0が完全に透明で、1が完全に表示されている状態です。

要素を消す・位置をずらす(CSS) → スクロール位置を取得(jQuery) → 要素の近くまで来る(jQuery) → 要素を表示・位置を戻す(jQuery)

上記の順番で動いています。

コピペで簡単にクオリティを上げられるので、ぜひ取り入れてみてください!!