今回は、「スクロールした時にアクションする方法」についてです。
スクロールした時のアクションには様々な動きがありますが、今回はコンテンツがフワッと表示される効果を実現する方法について説明します。
JavaScriptとCSSの組み合わせを使用し詳しく説明します。
１.HTML部分
.boxクラスの要素をいくつか用意します。
これらの要素がスクロールによって表示される要素になります。
各要素にはhiddenクラスを付けて、初期状態では非表示になるようにしましょう。
<body>
<div class=”box hidden” id=”box1″></div>
<div class=”box hidden” id=”box2″></div>
<div class=”box hidden” id=”box3″></div>
</body>
２.CSS部分
.hiddenクラスで、初期状態を設定します。
要素はopacityが０で、Y軸方向に２０px移動しています。
.showクラスで、要素が表示される際の最終状態を設定します。opacityが１で、Y軸方向の移動が元に戻ります。
transitionプロパティを使用して、opacityとtransformの変更が１秒間でスムーズに行われるようにします。
body {
margin: 0;
padding: 0;
height: 200vh;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.hidden {
opacity: 0;
transform: translateY(20px);
transition: opacity 1s ease-out, transform 1s ease-out;
}
.show {
opacity: 1;
transform: translateY(0);
}
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 50px 0;
}
３.JavaScript部分
ページが読み込まれた後、IntersectionObserverを使用してスクロールイベントを確認します。
observer.observeメソッドを使用して、各.box要素がスクロールによって表示されるかどうかを確認しましょう。
要素が表示範囲に入ると、.showクラスを追加し、アニメーションが開始されます。
document.addEventListener
(“DOMContentLoaded”, function() {
const boxes = document.querySelectorAll(‘.box’);
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add(‘show’);
observer.unobserve(entry.target);
}
});
});
boxes.forEach(box => {
observer.observe(box);
});
});
この方法を使用すると、スクロールに応じて要素がフワッと表示されるエフェクトを簡単に実現できます。
カスタマイズしたい場合は、CSSのアニメーションプロパティを調整したり、JavaScriptのロジックを変更したりすることで、さまざまな効果を追加できますのでぜひ試してみてください。
ご拝読いただき、ありがとうございました。
