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行目の
数値を弄ることで可能です。

おわりに

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

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