概要
スクロールに応じて要素をふわっと表示させる方法をご紹介します。
近年のWebサイトではよく使われる表現で、簡単な実装で見た目の印象を向上させることができます。
今回は「IntersectionObserver」を使用した方法です。
パフォーマンスにも優れており、実務でもよく使われます。
HTML
<section>
<h2 class="fade-in">タイトルが入ります</h2>
<p class="fade-in">
ここにテキストが入ります。ここにテキストが入ります。
</p>
<img src="image.jpg" alt="" class="fade-in">
</section>
CSS
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: opacity .6s ease, transform .6s ease;
}
.fade-in.show {
opacity: 1;
transform: translateY(0);
}
JavaScript
const elements = document.querySelectorAll('.fade-in');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('show');
}
});
});
elements.forEach(el => observer.observe(el));
解説
「IntersectionObserver」は、要素が画面内に入ったタイミングを検知できるAPIです。
今回のコードでは、以下の流れで処理しています。
・.fade-in が付いた要素を取得
・画面内に入ったら .show を付与
・CSSのアニメーションで表示
JavaScriptは「きっかけ」を作るだけにして、動きはCSSで制御する構成にしています。
この方法は管理しやすく、実務でも扱いやすいです。
まとめ
・スクロールに応じたアニメーションは簡単に実装できます
・「IntersectionObserver」を使うと軽量で効率的です
・CSSと組み合わせることで柔軟に表現できます
そのままコピペで動作しますので、必要に応じてクラス名や動きを調整してご利用ください。
補足（おすすめ）
アニメーションの距離や速度は以下で調整可能です。
ご相談・お見積もりは無料です。まずはご連絡ください！
初めての方でも安心して進められるよう、丁寧にサポートいたします。
「まだ具体的に決まっていない」
「相談だけでも大丈夫かな？」
という方もご安心ください。
ご相談・お見積もりは無料です。
初めての方にもわかりやすくご案内いたします。
