🎯この記事で学べること
✅ スクロールと連動して左側の画像が変わる２カラムレイアウトの作り方
✅ JavaScriptのIntersectionObserver API を使ったスクロール監視
✅ CSSのフェードインアニメーション を活用した滑らかな画像切り替え
✅ レスポンシブ対応 でスマホでも綺麗に表示する方法
こんな方におすすめ！
• フロントエンド初心者 で、簡単なアニメーションを実装したい
• JavaScriptで動きのあるWebページ を作りたい
📌 完成イメージ
• ページが 2カラムレイアウト
• スクロールすると、左側の画像がセクションごとに変わる
• フェードインで 滑らかに画像が切り替わる
• レスポンシブ対応 でスマホでも最適化
HTMLの基本構造
まずは、HTMLの基本構造を作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>スクロールで画像が切り替わる2カラムレイアウト</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<!-- 左側の画像エリア -->
<div class="left-column">
<img src="image1.jpg" class="left-image active" alt="画像1">
<img src="image2.jpg" class="left-image" alt="画像2">
<img src="image3.jpg" class="left-image" alt="画像3">
<img src="image4.jpg" class="left-image" alt="画像4">
</div>
<!-- 右側のコンテンツエリア -->
<div class="right-column">
<section class="content-section" id="section1">
<h2>セクション1</h2>
<p>ここにセクション1の説明が入ります。</p>
</section>
<section class="content-section" id="section2">
<h2>セクション2</h2>
<p>ここにセクション2の説明が入ります。</p>
</section>
<section class="content-section" id="section3">
<h2>セクション3</h2>
<p>ここにセクション3の説明が入ります。</p>
</section>
<section class="content-section" id="section4">
<h2>セクション4</h2>
<p>ここにセクション4の説明が入ります。</p>
</section>
</div>
</div>
<script src="script.js"></script>
</body>
</html>✅ ポイント
✔ .left-column に 画像を4枚重ねて配置
✔ .right-column に スクロールするコンテンツ を配置
✔ id を 各セクションに付与 してJavaScriptで識別しやすくする
CSSのスタイリング
次に、２カラムレイアウトのCSS を作成します。
/* 全体のレイアウト */
.container {
display: flex;
width: 100%;
height: 100vh;
}
/* 左側の画像エリア */
.left-column {
position: sticky;
top: 0;
width: 50%;
height: 100vh;
overflow: hidden;
}
.left-image {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.left-image.active {
opacity: 1;
}
/* 右側のコンテンツエリア */
.right-column {
width: 50%;
padding: 50px;
overflow-y: auto;
}
.content-section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #ccc;
}
/* モバイル対応 */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.left-column {
width: 100%;
height: 50vh;
position: relative;
}
.right-column {
width: 100%;
height: auto;
}
.content-section {
height: auto;
padding: 50px 20px;
}
}ポイント
✔ .left-column を position: sticky で固定
✔ .left-image.active に opacity: 1 でフェードイン
✔ レスポンシブ対応 で モバイル時は1カラム表示
JavaScriptでスクロール連動を実装
JavaScriptで、スクロール時に画像が切り替わる 処理を追加します。
document.addEventListener('DOMContentLoaded', function() {
const sections = document.querySelectorAll('.content-section');
const images = document.querySelectorAll('.left-image');
let activeIndex = 0;
const options = {
root: null,
threshold: 0.3
};
const observerCallback = (entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const index = Array.from(sections).indexOf(entry.target);
activeIndex = index;
updateImages(activeIndex);
}
});
};
const observer = new IntersectionObserver(observerCallback, options);
sections.forEach(section => observer.observe(section));
function updateImages(index) {
images.forEach((img, i) => {
img.classList.toggle('active', i === index);
});
}
});ポイント
✔ IntersectionObserver を使い スクロール監視
✔ updateImages() で 対応する画像の .active を更新
✔ toggle() を使用し、コードを簡潔化
まとめ
今回は、スクロールに応じて画像が変わる２カラムレイアウト を作成しました。
✅ JavaScriptのIntersectionObserver API を活用
✅ CSSのopacityとtransitionでフェードイン を実装
✅ スマホ対応も考慮 したレスポンシブデザイン