ウェブサイトを閲覧していて、「スクロールすると要素がふわっと表示される」エフェクトを見たことはありませんか？
このアニメーションを適用することで、サイトが動的でスタイリッシュな印象になり、ユーザーの目を引きやすくなります。
本記事では CSSとJavaScript（Intersection Observer API）を使って、シンプルかつ効果的なフェードインアニメーション を実装する方法を詳しく解説します。
フェードインアニメーションのメリット
フェードインアニメーションを適用することで、以下のようなメリットが得られます。
1. 視覚的な魅力が向上：サイトがダイナミックに見え、プロフェッショナルな印象を与える
2. ユーザーの関心を引く：特定のコンテンツを強調し、ユーザーの注目を集める
3. UX（ユーザーエクスペリエンス）の向上：スムーズな動きがあると、ユーザーの離脱率を低減できる
4. パフォーマンスの最適化：Intersection Observer API を活用することで、スクロールイベントの負荷を抑えつつ高パフォーマンスなアニメーション
目標
以下のような動作を実現します。
✅ ページ内の特定の要素が スクロールして画面内に入るとフェードイン する
✅ アニメーションは 下から上にふわっと表示 される
✅ 各要素は 順番にフェードイン し、より自然な動きを演出
完成コード
以下が今回実装するフェードインアニメーションのコードです。
1. HTML（表示する要素）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フェードインアニメーション</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>スクロールで要素がフェードインするデモ</h1>
<div class="container">
<div class="fadein">コンテンツ 1</div>
<div class="fadein">コンテンツ 2</div>
<div class="fadein">コンテンツ 3</div>
<div class="fadein">コンテンツ 4</div>
</div>
<script src="script.js"></script>
</body>
</html>2. CSS（フェードインアニメーションの定義）
/* フェードイン前の初期状態 */
.fadein {
opacity: 0;
transform: translateY(50px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
/* フェードイン後の状態 */
.fadein.show {
opacity: 1;
transform: translateY(0);
}
/* スタイリングの調整 */
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
.container {
max-width: 600px;
margin: 0 auto;
}
.fadein {
background: #3498db;
color: white;
padding: 20px;
margin: 20px 0;
border-radius: 8px;
}3. JavaScript（スクロールを検知してフェードインさせる）
document.addEventListener("DOMContentLoaded", function() {
const fadeinElements = document.querySelectorAll(".fadein");
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry, index) => {
if (entry.isIntersecting) {
setTimeout(() => {
entry.target.classList.add("show");
}, index * 200); // 各要素に200msずつ遅延をつける
}
});
}, { threshold: 0.3 });
fadeinElements.forEach(element => observer.observe(element));
});コードの詳細解説
① CSSでフェードインアニメーションを定義
• .fadein クラスには 透明度(opacity: 0) と Y軸方向の移動(translateY(50px)) を設定し、最初は非表示にする
• .show クラスを追加すると、不透明になり 元の位置に戻るアニメーション が発生する
② JavaScriptでスクロールイベントを監視
• IntersectionObserver を使用し、要素が 画面の30%以上表示されたら .show クラスを追加
• setTimeout を用いて 要素ごとに200msの遅延 を設定し、自然なアニメーション効果を作る
応用：アニメーションのカスタマイズ
1. スライドの方向を変更（例：左からフェードイン）
.fadein {
opacity: 0;
transform: translateX(-50px); /* 左から */
}2. アニメーション速度を変更
transition: opacity 1s ease-out, transform 1s ease-out;3. アニメーションのトリガーを手動制御（ボタンで発火）
document.querySelector("#startAnimation").addEventListener("click", function() {
document.querySelectorAll(".fadein").forEach(el => el.classList.add("show"));
});まとめ
• CSSのトランジション と JavaScriptのIntersection Observer API を組み合わせることで、スクロール時のフェードインアニメーションを実装
• 順番にアニメーションを実行 することで、より自然な演出が可能
• パフォーマンスに優れたアニメーション を簡単に実装できる
このアニメーションは ブログ、ポートフォリオ、企業サイト など、あらゆるWebサイトで活用できます！ぜひ、あなたのサイトにも取り入れてみてください。