この記事では一部分を中心に解説しています。
全体像や関連知識もあわせて理解したい方は、以下の記事もぜひご覧ください。
概要
スクロールに応じて要素をふわっと表示させる方法をご紹介します。
近年の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(40px);
transition: opacity 1s ease, transform 1s ease;
}
.fade-in.show {
opacity: 1;
transform: translateY(0);
}
/* 画像対策 */
img.fade-in {
display: block;
}JavaScript
document.addEventListener('DOMContentLoaded', () => {
const elements = document.querySelectorAll('.fade-in');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 少し遅らせて「ふわっ」を確実にする
setTimeout(() => {
entry.target.classList.add('show');
}, 150);
} else {
// 画面から出たらリセット（←これが重要）
entry.target.classList.remove('show');
}
});
}, {
threshold: 0.2,
rootMargin: '0px 0px -50px 0px'
});
elements.forEach(el => observer.observe(el));
});解説
「IntersectionObserver」は、要素が画面内に入ったタイミングを検知できるAPIです。
今回のコードでは、以下の流れで処理しています。
・.fade-in が付いた要素を取得
・画面内に入ったら .show を付与
・CSSのアニメーションで表示
JavaScriptは「きっかけ」を作るだけにして、動きはCSSで制御する構成にしています。
この方法は管理しやすく、実務でも扱いやすいです。
まとめ
・スクロールに応じたアニメーションは簡単に実装できます
・「IntersectionObserver」を使うと軽量で効率的です
・CSSと組み合わせることで柔軟に表現できます
そのままコピペで動作しますので、必要に応じてクラス名や動きを調整してご利用ください。
補足（おすすめ）
アニメーションの距離や速度は以下で調整可能です。
カスタマイズ例
transform: translateY(50px);
transition: opacity 1s ease;表示速度改善のご相談・診断は無料です。
サイト表示速度は、SEO・ユーザー離脱率・CV率にも大きく影響します。
画像最適化・CSS/JS最適化・サーバー設定など、原因は多岐にわたります。
act styleでは、WordPressやEC-CUBEの表示速度改善にも対応しています。
「サイトが重い」と感じたら、まずはお気軽にご相談ください。
今回解説した内容に関連するテーマは、以下の記事でも詳しく解説しています。
理解を深めたい方は、あわせてご覧ください。
このテーマを正しく理解するための基礎知識
この記事の理解を深めるための補足情報です。
関連する重要なポイントや基礎知識を整理してまとめています。