コードコピーサンプル
<!-- ここにコードをそのまま貼る --><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>パララックス骨格</title>
<style>
body {
margin: 0;
}
.parallax-section {
position: relative;
height: 100vh;
overflow: hidden;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.front-photo-wrapper {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
margin-bottom: 6px;
position: relative;
z-index: 1;
}
.front-photo {
display: inline-block;
max-width: 90vw;
width: 300px;
height: auto;
border: 5px solid white;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
transition: transform 0.3s ease;
}
@media screen and (min-width: 768px) {
.front-photo {
width: 400px;
}
}
.caption {
margin-top: 4px;
font-size: 1em;
color: #eee;
font-style: italic;
background-color: rgba(0, 0, 0, 0.4);
padding: 6px 12px;
border-radius: 6px;
opacity: 0;
transform: translateY(10px);
animation: fadeUp 1s ease-out forwards;
animation-delay: 0.5s;
}
@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body>
<!-- セクション1 -->
<div class="parallax-section" style="background-image: url(ここに背景画像アドレスを上書き);">
<a href="ここにフロントフォトのリンク先を上書き" target="_blank">
<img class="front-photo" src="ここにフロントフォトアドレスを上書きする" />
</a>
<div class="caption">ここにキャプションのテキスト</div>
</div>
<!-- セクション2 -->
<div class="parallax-section" style="background-image: url(ここに背景画像アドレスを上書き);">
<a href="ここにフロントフォトのリンク先を上書き" target="_blank">
<img class="front-photo" src="ここにフロントフォトアドレスを上書きする" />
</a>
<div class="caption">ここにキャプションのテキスト</div>
</div>
<!-- セクション3 -->
<div class="parallax-section" style="background-image: url(ここに背景画像アドレスを上書き);">
<a href="ここにフロントフォトのリンク先を上書き" target="_blank">
<img class="front-photo" src="ここにフロントフォトアドレスを上書きする" />
</a>
<div class="caption">ここにキャプションのテキスト</div>
</div>
<!-- セクション4 -->
<div class="parallax-section" style="background-image: url(ここに背景画像アドレスを上書き);">
<a href="ここにフロントフォトのリンク先を上書き" target="_blank">
<img class="front-photo" src="ここにフロントフォトアドレスを上書きする" />
</a>
<div class="caption">ここにキャプションのテキスト</div>
</div>
<!-- セクション5 -->
<div class="parallax-section" style="background-image: url(ここに背景画像のアドレスを上書きする);">
<a href="ここにフロントフォトのリンク先アドレスを上書きする" target="_blank">
<img class="front-photo" src="ここにフロントフォトのアドレスを上書きする" />
</a>
<div class="caption">ここにキャプションのテキスト</div>
</div>
<!-- セクション6 -->
<div class="parallax-section" style="background-image: url(ここに背景画像のアドレスを上書きする);">
<a href="ここにフロントフォトのリンク先アドレスを上書きする" target="_blank">
<img class="front-photo" src="ここにフロントフォトのアドレスを上書きする" />
</a>
<div class="caption">ここにキャプションのテキスト</div>
</div>
<!-- セクション7 -->
<div class="parallax-section" style="background-image: url(ここに背景画像のアドレスを上書きする);">
<a href="ここにフロントフォトのリンク先アドレスを上書きする" target="_blank">
<img class="front-photo" src="ここにフロントフォトのアドレスを上書きする" />
</a>
<div class="caption">ここにキャプションのテキスト</div>
</div>
<!-- セクション8 -->
<div class="parallax-section" style="background-image: url(ここに背景画像のアドレスを上書きする);">
<a href="ここにフロントフォトのリンク先アドレスを上書きする" target="_blank">
<img class="front-photo" src="ここにフロントフォトのアドレスを上書きする" />
</a>
<div class="caption">ここにキャプションのテキスト</div>
</div>
<!-- セクション9 -->
<div class="parallax-section" style="background-image: url(ここに背景画像のアドレスを上書きする);">
<a href="ここにフロントフォトのリンク先アドレスを上書きする" target="_blank">
<img class="front-photo" src="ここにフロントフォトのアドレスを上書きする" />
</a>
<div class="caption">ここにキャプションのテキスト</div>
</div>
<!-- セクション10 -->
<div class="parallax-section" style="background-image: url(ここに背景画像のアドレスを上書きする);">
<a href="ここにフロントフォトのリンク先アドレスを上書きする" target="_blank">
<img class="front-photo" src="ここにフロントフォトのアドレスを上書きする" />
</a>
<div class="caption">ここにキャプションのテキスト</div>
</div>
<script>
window.addEventListener("scroll", function () {
const scrollY = window.scrollY;
document.querySelectorAll(".parallax-section").forEach(section => {
const offset = scrollY - section.offsetTop;
section.style.backgroundPositionY = offset * 0.4 + "px";
});
});
</script>
</body>
</html>
<div>こんにちは！</div>
Format