スクロール時にコンテンツがふわっと出てくる感じきれいに見えますよね。
今回はスクロールに合わせてコンテンツを表示させる方法をまとめます。
先日実装する機会がありましたので、備忘録的にまとめておきます。
完成形
こんな感じになります。
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 の部分でどのぐらいスクロールされたら表示するかを決めます。
今回はウインドウの高さの半分スクロールされたら表示されるようにしました。