KumaTechLab
/

【jQuery】スクロールに合わせて表示する

【jQuery】スクロールに合わせて表示する

スクロール時にコンテンツがふわっと出てくる感じきれいに見えますよね。

今回はスクロールに合わせてコンテンツを表示させる方法をまとめます。

先日実装する機会がありましたので、備忘録的にまとめておきます。

完成形

こんな感じになります。

HTML,CSS部

<div class="container" style="background-color:#ccc"></div>
<div class="container">
   <div class="box" id="box1">box1</div>
   <div class="box" id="box2">box2</div>
   <div class="box" id="box3">box3</div>
   <div class="box" id="box4">box4</div>
</div>

今回はボックス4つを順番に表示させますので箱4つ用意してます。

それぞれの箱をあらかじめ下に用意しておいて表示したときに、上に登ってくるようにしておきます。

.active {
        opacity: 1;
        transform: translateY(0vh);
 }

「active」クラスはJavaScriptの付与するためのものです。

可視化して下に用意していたものをもとの高さまで戻しています。

JavaScript部

	window.addEventListener("scroll", function() {

    var box1 = document.getElementById("box1");
    var box2 = document.getElementById("box2");
    var box3 = document.getElementById("box3");
    var box4 = document.getElementById("box4");

    window.onscroll = function() {

      var screenHeight = window.innerHeight;
      var scrollTop = document.documentElement.scrollTop;

      if (screenHeight / 2 < scrollTop) {
        box1.classList.add("active");
        box2.classList.add("active");
        box3.classList.add("active");
        box4.classList.add("active");
      }
    };
  });

screenHeight / 2 < scrollTop の部分でどのぐらいスクロールされたら表示するかを決めます。

今回はウインドウの高さの半分スクロールされたら表示されるようにしました。