コードコピーサンプル
<!-- ここにコードをそのまま貼る --><!-- ここにコードをそのまま貼る --><!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 {
position: absolute;
top: 0;
left: 0;
width: 100%; /* 横幅に合わせる */
height: auto; /* 縦幅は比率で自動調整 */
z-index: 0;
will-change: transform;
}
.text-layer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 6vw;
font-weight: bold;
color: rgba(255, 255, 255, 0.8);
z-index: 1;
white-space: nowrap;
will-change: transform;
pointer-events: none;
}
.foreground {
position: absolute;
top: 50%;
left: 50%;
width: 85%; /* フォアグラウンドの写真の大きさを変える */
height: auto;
transform: translate(-50%, -50%) translateY(0);
z-index: 2;
will-change: transform;
border: 2px solid #fceacb;
border-radius: 8px;
padding: 4px;
box-sizing: border-box;
box-shadow: 0 6px 12px rgba(18, 245, 18, 0.4);
will-change: transform, box-shadow;
}
.foreground: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;
}
.caption {
position: absolute;
left: 50%;
top: calc(50% + 45%);
transform: translateX(-50%);
color: #f0e6d2;
font-size: 2.5vw;
background: rgba(0, 0, 0, 0.5);
padding: 6px 12px;
border-radius: 8px;
pointer-events: none;
z-index: 3;
white-space: nowrap;
user-select: none;
font-weight: 600;
font-family: sans-serif;
will-change: transform;
}
/* 例：スマホ画面向けの文字サイズ調整 */
@media (max-width: 768px) {
.caption {
font-size: 20px !important; /* !スマホのキャプションの文字の大きさ */
}
}
</style>
</head>
<body>
<!-- 🔁 セクション1 -->
<div class="parallax-container">
<img class="background" src="背景画像をここに上書き" alt="背景画像">
<div class="text-layer">文章を書く場所</div>
<a href="リンク先を上書き" target="_blank" rel="noopener noreferrer">
<img class="foreground" src="フォアグラウンドの写真をここに上書き" alt="前景画像">
</a>
<div class="caption">キャプションを入れる場所</div>
</div>
<!-- 🔁 セクション2 -->
<div class="parallax-container">
<img class="background" src="背景画像をここに上書き" alt="背景画像">
<div class="text-layer">文章を書く場所</div>
<a href="リンク先を上書き" target="_blank" rel="noopener noreferrer">
<img class="foreground" src="フォアグラウンドの写真をここに上書き" alt="前景画像">
</a>
<div class="caption">キャプションを入れる場所</div>
</div>
<!-- 🔁 セクション3 -->
<div class="parallax-container">
<img class="background" src="背景画像をここに上書き" alt="背景画像">
<div class="text-layer">文章を書く場所</div>
<a href="リンク先を上書き" target="_blank" rel="noopener noreferrer">
<img class="foreground" src="フォアグラウンドの写真をここに上書き" alt="前景画像">
</a>
<div class="caption">キャプションを入れる場所</div>
</div>
<!-- 🔁 セクション4 -->
<div class="parallax-container">
<img class="background" src="背景画像をここに上書き" alt="背景画像">
<div class="text-layer">文章を書く場所</div>
<a href="リンク先を上書き" target="_blank" rel="noopener noreferrer">
<img class="foreground" src="フォアグラウンドの写真をここに上書き" alt="前景画像">
</a>
<div class="caption">キャプションを入れる場所</div>
</div>
<!-- 🔁 セクション5 -->
<div class="parallax-container">
<img class="background" src="背景画像をここに上書き" alt="背景画像">
<div class="text-layer">文章を書く場所</div>
<a href="リンク先を上書き" target="_blank" rel="noopener noreferrer">
<img class="foreground" src="フォアグラウンドの写真をここに上書き" alt="前景画像">
</a>
<div class="caption">キャプションを入れる場所</div>
</div>
<!-- 🔁 セクション6 -->
<div class="parallax-container">
<img class="background" src="背景画像をここに上書き" alt="背景画像">
<div class="text-layer">文章を書く場所</div>
<a href="リンク先を上書き" target="_blank" rel="noopener noreferrer">
<img class="foreground" src="フォアグラウンドの写真をここに上書き" alt="前景画像">
</a>
<div class="caption">キャプションを入れる場所</div>
</div>
<!-- 🔁 セクション7 -->
<div class="parallax-container">
<img class="background" src="背景画像をここに上書き" alt="背景画像">
<div class="text-layer">文章を書く場所</div>
<a href="リンク先を上書き" target="_blank" rel="noopener noreferrer">
<img class="foreground" src="フォアグラウンドの写真をここに上書き" alt="前景画像">
</a>
<div class="caption">キャプションを入れる場所</div>
</div>
<!-- 🔁 セクション8 -->
<div class="parallax-container">
<img class="background" src="背景画像をここに上書き" alt="背景画像">
<div class="text-layer">文章を書く場所</div>
<a href="リンク先を上書き" target="_blank" rel="noopener noreferrer">
<img class="foreground" src="フォアグラウンドの写真をここに上書き" alt="前景画像">
</a>
<div class="caption">キャプションを入れる場所</div>
</div>
<!-- 🔁 セクション9 -->
<div class="parallax-container">
<img class="background" src="背景画像をここに上書き" alt="背景画像">
<div class="text-layer">文章を書く場所</div>
<a href="リンク先を上書き" target="_blank" rel="noopener noreferrer">
<img class="foreground" src="フォアグラウンドの写真をここに上書き" alt="前景画像">
</a>
<div class="caption">キャプションを入れる場所</div>
</div>
<!-- 🔁 セクション10 -->
<div class="parallax-container">
<img class="background" src="背景画像をここに上書き" alt="背景画像">
<div class="text-layer">文章を書く場所</div>
<a href="リンク先を上書き" target="_blank" rel="noopener noreferrer">
<img class="foreground" src="フォアグラウンドの写真をここに上書き" alt="前景画像">
</a>
<div class="caption">キャプションを入れる場所</div>
</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');
const fg = container.querySelector('.foreground');
const caption = container.querySelector('.caption');
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.3}px)`;
if (fg) fg.style.transform = `translate(-50%, -50%) translateY(${-relativeY * 0.5}px)`;
if (caption) caption.style.transform = `translateX(-50%) translateY(${-relativeY * 0.5}px)`;
}
});
}
</script>
</body>
</html>
<div>こんにちは！</div>
Format