概要
スクロールに応じて要素をふわっと表示させる方法をご紹介します。
近年の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;この記事を読んだ方はこちら
ご相談・お見積もりは無料です。まずはお気軽にご連絡ください。
act styleでは、デザイン性はもちろん、表示速度やSEO対策にも配慮したレスポンシブWebデザインを標準仕様として採用していますので、パソコン・スマートフォン・タブレットなど、さまざまな端末から快適に閲覧できるホームページを制作いたします。
「ホームページの新規制作」「ホームページのリニューアル」どちらのご要望にも対応可能です。ホームページ制作に関するご相談やご質問なども、お気軽にお問い合わせください。
「まだ制作するか決まっていない」「まずは話だけ聞いてみたい」という場合でも大丈夫です。しつこい営業は一切ありません。どうぞお気軽にご相談ください。
