コードコピーサンプル
<!-- ここにコードをそのまま貼る --><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>パララックス複数セクション</title>
<style>
html, body {
margin: 0;
padding: 0;
background: #000;
font-family: sans-serif;
}
.parallax-container {
position: relative;
height: 100vh;
overflow: hidden;
}
.background-photo {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
z-index: 0;
will-change: transform;
}
.background-text {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2vw;
font-weight: bold;
color: #2c2c2c;
text-shadow:
-0.5px -0.5px 0 #f5f5dc,
0.5px -0.5px 0 #f5f5dc,
-0.5px 0.5px 0 #f5f5dc,
0.5px 0.5px 0 #f5f5dc;
background-color: rgba(0, 0, 0, 0.1);
padding: 0.5em 1em;
border-radius: 8px;
z-index: 1;
white-space: nowrap;
will-change: transform;
pointer-events: none;
}
.foreground-text {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.5vw;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 2px #000;
z-index: 3;
background-color: rgba(0, 0, 0, 0.4);
padding: 0.4em 0.8em;
border-radius: 6px;
white-space: nowrap;
will-change: transform;
pointer-events: none;
}
.foreground-photo {
position: absolute;
top: 50%;
left: 50%;
width: 90%;
height: auto;
transform: translate(-50%, -50%) translateY(0);
z-index: 2;
will-change: transform, box-shadow;
border: 2px solid #fceacb;
border-radius: 8px;
padding: 4px;
box-sizing: border-box;
box-shadow: 0 6px 12px rgba(18, 245, 18, 0.4);
}
.foreground-photo:hover {
transform: translate(-50%, -50%) scale(1.05);
box-shadow: 0 10px 20px rgba(255, 255, 255, 0.5);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (max-width: 600px) {
.background-text {
font-size: 5vw;
}
.foreground-text {
font-size: 4vw;
}
}
</style>
</head>
<body>
<!-- 🔁 セクション1 -->
<div class="parallax-container">
<img class="background-photo" src="背景画像1" alt="背景画像">
<div class="background-text">背景テキスト1</div>
<div class="foreground-text">前景テキスト1</div>
<a href="リンク先1" target="_blank" rel="noopener noreferrer">
<img class="foreground-photo" src="前景画像1" alt="前景画像">
</a>
</div>
<!-- 🔁 セクション2 -->
<div class="parallax-container">
<img class="background-photo" src="背景画像2" alt="背景画像">
<div class="background-text">背景テキスト2</div>
<div class="foreground-text">前景テキスト2</div>
<a href="リンク先2" target="_blank" rel="noopener noreferrer">
<img class="foreground-photo" src="前景画像2" alt="前景画像">
</a>
</div>
<!-- 🔁 セクション3 -->
<div class="parallax-container">
<img class="background-photo" src="背景画像3" alt="背景画像">
<div class="background-text">背景テキスト3</div>
<div class="foreground-text">前景テキスト3</div>
<a href="リンク先3" target="_blank" rel="noopener noreferrer">
<img class="foreground-photo" src="前景画像3" alt="前景画像">
</a>
</div>
<!-- 🔁 セクション4 -->
<div class="parallax-container">
<img class="background-photo" src="背景画像4" alt="背景画像">
<div class="background-text">背景テキスト4</div>
<div class="foreground-text">前景テキスト4</div>
<a href="リンク先4" target="_blank" rel="noopener noreferrer">
<img class="foreground-photo" src="前景画像4" alt="前景画像">
</a>
</div>
<!-- 🔁 セクション5 -->
<div class="parallax-container">
<img class="background-photo" src="背景画像5" alt="背景画像">
<div class="background-text">背景テキスト5</div>
<div class="foreground-text">前景テキスト5</div>
<a href="リンク先5" target="_blank" rel="noopener noreferrer">
<img class="foreground-photo" src="前景画像5" alt="前景画像">
</a>
</div>
<!-- 🔁 セクション6 -->
<div class="parallax-container">
<img class="background-photo" src="背景画像6" alt="背景画像">
<div class="background-text">背景テキスト6</div>
<div class="foreground-text">前景テキスト6</div>
<a href="リンク先6" target="_blank" rel="noopener noreferrer">
<img class="foreground-photo" src="前景画像6" alt="前景画像">
</a>
</div>
<!-- 🔁 セクション7 -->
<div class="parallax-container">
<img class="background-photo" src="背景画像7" alt="背景画像">
<div class="background-text">背景テキスト7</div>
<div class="foreground-text">前景テキスト7</div>
<a href="リンク先7" target="_blank" rel="noopener noreferrer">
<img class="foreground-photo" src="前景画像7" alt="前景画像">
</a>
</div>
<!-- 🔁 セクション8 -->
<div class="parallax-container">
<img class="background-photo" src="背景画像8" alt="背景画像">
<div class="background-text">背景テキスト8</div>
<div class="foreground-text">前景テキスト8</div>
<a href="リンク先8" target="_blank" rel="noopener noreferrer">
<img class="foreground-photo" src="前景画像8" alt="前景画像">
</a>
</div>
<!-- 🔁 セクション9 -->
<div class="parallax-container">
<img class="background-photo" src="背景画像9" alt="背景画像">
<div class="background-text">背景テキスト9</div>
<div class="foreground-text">前景テキスト9</div>
<a href="リンク先9" target="_blank" rel="noopener noreferrer">
<img class="foreground-photo" src="前景画像9" alt="前景画像">
</a>
</div>
<!-- 🔁 セクション10 -->
<div class="parallax-container">
<img class="background-photo" src="背景画像10" alt="背景画像">
<div class="background-text">背景テキスト10</div>
<div class="foreground-text">前景テキスト10</div>
<a href="リンク先10" target="_blank" rel="noopener noreferrer">
<img class="foreground-photo" src="前景画像10" alt="前景画像">
</a>
</div>
<script>
let ticking = false;
window.addEventListener('scroll', function () {
if (!ticking) {
window.requestAnimationFrame(function () {
handleParallax();
ticking = false;
});
ticking = true;
}
});
function handleParallax() {
const scrollY = window.scrollY;
document.querySelectorAll('.parallax-container').forEach(container => {
const bg = container.querySelector('.background-photo');
const fg = container.querySelector('.foreground-photo');
const backgroundText = container.querySelector('.background-text');
const foregroundText = container.querySelector('.foreground-text');
const containerTop = container.offsetTop;
const containerHeight = container.offsetHeight;
if (scrollY + window.innerHeight > containerTop && scrollY < containerTop + containerHeight) {
const relativeY = scrollY - containerTop;
if (bg) bg.style.transform = `translateY(${relativeY * 0.6}px)`;
if (fg) fg.style.transform = `translate(-50%, -50%) translateY(${-relativeY * 0.7}px)`;
if (backgroundText) backgroundText.style.transform = `translate(-50%, -50%) translateY(${-relativeY * 1.2}px)`;
if (foregroundText) foregroundText.style.transform = `translate(-50%, -50%) translateY(${-relativeY * 1.1}px)`;
}
});
}
</script>
</body>
</html>
<div>こんにちは！</div>
Format