jQueryでスクロール量に応じて要素が出現する処理【コピペOK!】

はじめに

こんにちは、北陸のwebコーダーdaimaです。

本日は、画面のスクロールに応じて 要素に処理を施す jQueryの処理をご紹介します。

コード

HTMLコード

<div class="go_scroll">SCROLL↓</div>

<div class="section">
  <div class="message js_scrlTarget"><!--この「.js_scrlTarget」が処理の目印になります-->
    <div class="message-image">
      <img src="https://spreadsheep.net/wp-content/uploads/2018/03/img05.jpg">
    </div>
    <div class="message-text">これは犬です。</div>
  </div>
</div>

<div class="section">
  <div class="message js_scrlTarget">
    <div class="message-image">
      <img src="https://spreadsheep.net/wp-content/uploads/2018/03/img05.jpg">
    </div>
    <div class="message-text">これも犬です。</div>
  </div>
</div>

<div class="section">
  <div class="message js_scrlTarget">
    <div class="message-image">
      <img src="https://spreadsheep.net/wp-content/uploads/2018/03/img05.jpg">
    </div>
    <div class="message-text">またもや犬です。</div>
  </div>
</div>

<div class="section">
  <div class="message js_scrlTarget">
    <div class="message-image">
      <img src="https://spreadsheep.net/wp-content/uploads/2018/03/img04.jpg">
    </div>
    <div class="message-text">犬・・・ではなく猫です。</div>
  </div>
</div>

ポイントは各ブロックに付与された 「js_scrlTarget」クラス。

処理を与えたい要素に それぞれこのクラスを付与しておきます。

CSSコード

img{
  max-width: 100%;
}

.section{
  height: auto;
  margin-bottom: 40px;
}

.message{
  width: 90%;
  margin: 0 auto;
  border: 1px dashed #333;
  padding: 2em;
  box-sizing: border-box;
  margin-top: 60px;
  display: flex;
}

.go_scroll{
padding: 10px 0;
background-color: #666;
color: #fff;
text-align: center;
letter-spacing: 0.2em;
}

.message-image,message-text{
  width: 50%;
}

.message-text{
  pbox-sizing: border-box;
  padding-left: 40px;
}

.js_scrlTarget{
  position: relative;
  bottom: -20px;
  transition: all 200ms ease-out;
  opacity: 0;
}

.js_scrlTarget.js_scrlTargetFire{
  opacity: 1;
  bottom: 0;
}

CSS。 この中で処理直接に関係するのは .js_scrlTargetと .js_scrlTarget.js_scrlTargetFireのみ。

CSSの記述をカスタマイズすれば 今回デモで行った処理以外にも、 画面外から要素が突き出るような見せ方や 要素が拡大して出現するような見せ方も可能です。

javascriptコード

//スクロール発火処理
function scrollEffect(){
    $(".js_scrlTarget").each(function(){
      var scroll = $(window).scrollTop();//現在のyスクロール量を取得
      var windowHeight = $(window).height();//ウィンドウの高さを取得
      var tgtPos = $(this).offset().top//ターゲットのy位置を取得
      var subjectHeight = $(this).innerHeight();//ターゲットの高さを取得
      var threshould;//閾値
      var w = $(window).width();
      threshould = tgtPos - windowHeight + 200;//発火位置調整
      //
      if (scroll > threshould) {//クラスを付与する処理
        $(this).addClass("js_scrlTargetFire");
      }
    });
}

$(window).scroll(function(){
  scrollEffect();
});

今回の肝となるスクリプト記述。

発火タイミングの微調整は10行目の 数値を弄ることで可能です。

おわりに

上手く取り入れることで サイトに一気に今風な雰囲気が出せる このスクロール発火処理。

ぜひとも活用してみてください!

コメント

  1. 寺田朋郎 より:

    一旦表示させた要素をページのトップに戻ったら削除して
    またスクロールしたら表示するようにしたいのですが
    ご教授いただければ幸いです。

    • daima より:

      ご訪問ありがとうございます!

      ご要望に添えるかは分かりませんが
      例えば記事内スクリプトのクラス付与の個所を


      if (scroll > threshould) {
      $(this).addClass("js_scrlTargetFire");
      } else {
      $(this).removeClass("js_scrlTargetFire");
      }

      このように書き換えていただければ
      スクロール量が各要素のy位置未満の時にクラスが解除されるようになるので
      再度スクロールアクションを発火できるようになりますよ。