コードコピーサンプル
<!-- ここにコードをそのまま貼る --><!-- ここにコードをそのまま貼る --><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>スライドギャラリー + キャプションアニメーション</title>
<style>
body {
margin: 0;
font-family: sans-serif;
background: #faf8f5;
}
.gallery-container {
position: relative;
width: 95%;
max-width: 900px;
margin: 20px auto;
padding: 10px;
background: #faf8f5;
border: 3px solid #96514D;
border-radius: 16px;
box-shadow:
0 8px 16px rgba(0, 0, 0, 0.1),
inset 0 0 10px rgba(255, 255, 255, 0.4);
}
.scroll-wrapper {
position: relative;
background: linear-gradient(to right, #f8e8e0, #fff);
}
.scroll-gallery {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scroll-padding-left: 10px;
scroll-padding-right: 10px;
}
.scroll-gallery-item {
flex: 0 0 100%;
scroll-snap-align: start;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 20px;
overflow: hidden;
padding: 0 10px;
}
.scroll-gallery-item img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
border-radius: 10px;
border: 2px solid #ccc;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
will-change: transform;
margin: 1px 0;
}
.scroll-gallery-item img:hover {
transform: scale(1.02);
border-color: #999;
}
.caption {
font-size: 22px;
font-weight: bold;
font-family: 'Playfair Display', 'Georgia', serif;
text-align: center;
margin-bottom: 12px;
background: linear-gradient(90deg, #8c5c3e, #cfa98c);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 1.5px;
user-select: none;
opacity: 0;
transform: translateX(100px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.scroll-gallery-item.active .caption {
opacity: 1;
transform: translateX(0);
}
@media (max-width: 600px) {
.caption {
font-size: 14px !important;
}
}
</style>
</head>
<body>
<div class="gallery-container">
<div class="scroll-wrapper">
<div class="scroll-gallery" id="gallery">
<!-- 写真1 -->
<div class="scroll-gallery-item">
<div class="caption">キャプションはここに上書き</div>
<a href="" target="_blank" rel="noopener noreferrer">
<img src="" alt="画像1" />
</a>
<a href="" target="_blank" rel="noopener noreferrer">
<img src="" alt="画像1" />
</a>
<!-- 工事中のリンク 不要なら削除 -->
<a href="https://ourtreasurechest.net/wp-content/uploads/2025/04/Screenshot-2025-04-20-170824.jpg" target="_blank" rel="noopener noreferrer">
<img src="" alt="画像1" />
</a>
<!-- back to top の画像とリンク -->
<a href="#1">
<img src="https://ourtreasurechest.net/wp-content/uploads/2025/05/Screenshot-2025-05-19-201913.jpg" alt="画像1" />
</a>
</div>
</div>
</div>
</div>
<script>
const gallery = document.getElementById('gallery');
const items = gallery.querySelectorAll('.scroll-gallery-item');
// アクティブスライドを判定・更新する関数
function updateActiveItem() {
const scrollLeft = gallery.scrollLeft;
const itemWidth = gallery.clientWidth;
items.forEach((item, index) => {
const itemStart = index * itemWidth;
const isActive =
scrollLeft >= itemStart - itemWidth / 2 &&
scrollLeft < itemStart + itemWidth / 2;
item.classList.toggle('active', isActive);
});
}
// 初期表示でアクティブ状態を反映
updateActiveItem();
// スクロールが停止したときにアクティブスライドを更新
let scrollTimer = null;
gallery.addEventListener('scroll', () => {
clearTimeout(scrollTimer);
scrollTimer = setTimeout(() => {
updateActiveItem();
}, 100);
});
// キーボード操作（左右矢印キー）に対応
document.addEventListener('keydown', (e) => {
const width = gallery.clientWidth;
if (e.key === 'ArrowRight') {
gallery.scrollBy({ left: width, behavior: 'smooth' });
} else if (e.key === 'ArrowLeft') {
gallery.scrollBy({ left: -width, behavior: 'smooth' });
}
});
</script>
</body>
</html>
<div>こんにちは！</div>
Format