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

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

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

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

使う言語

• HTML
• CSS
• jQuery

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

コード

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

.fadein {
  //　透明度を０に
  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　→スクロールの位置を検出して、要素を表示させる

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

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

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

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