コードコピーサンプル
<!-- ここにコードをそのまま貼る -->
<!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; /* 上下に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);
}
/* スクロールボタンのスタイル（共通） */
.scroll-button {
position: absolute;
top: 0px;
z-index: 10;
background-color: rgba(255, 255, 255, 0.2); /* 半透明 */
backdrop-filter: blur(8px); /* 背景ぼかし */
-webkit-backdrop-filter: blur(8px); /* Safari対応 */
border: 1px solid rgba(255, 255, 255, 0.4); /* 少し透明な白い枠 */
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
user-select: none;
}
.scroll-button:hover {
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transform: scale(1.1);
}
/* 左右ボタン位置 */
.scroll-left {
left: 10px;
}
.scroll-right {
right: 10px;
}
/* スマホなど画面が狭いときのフォントサイズ調整 */
@media (max-width: 600px) {
.caption {
font-size: 14px !important;
}
}
</style>
</head>
<body>
<div class="gallery-container">
<div class="scroll-wrapper">
<!-- 左右ボタン -->
<button class="scroll-button scroll-left" aria-label="左にスクロール" onclick="scrollGallery(-1)">←</button>
<button class="scroll-button scroll-right" aria-label="右にスクロール" onclick="scrollGallery(1)">→</button>
<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>
</div>
<!-- 写真2 -->
<div class="scroll-gallery-item">
<div class="caption">ここにキャプションを上書きする</div>
<a href="" target="_blank" rel="noopener noreferrer">
<img src="" alt="画像2" />
</a>
<a href="" target="_blank" rel="noopener noreferrer">
<img src="" alt="画像2" />
</a>
</div>
</div>
</div>
</div>
<script>
const gallery = document.getElementById('gallery');
const items = gallery.querySelectorAll('.scroll-gallery-item');
// ギャラリーを左右にスクロールさせる関数（direction: -1 = 左, 1 = 右）
function scrollGallery(direction) {
const width = gallery.clientWidth;
gallery.scrollBy({
left: width * direction,
behavior: 'smooth'
});
}
// キーボード操作（左右矢印キー）に対応
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') scrollGallery(1);
else if (e.key === 'ArrowLeft') scrollGallery(-1);
});
// アクティブスライドを判定・更新する関数
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); // スクロール停止後100msで実行
});
</script>
</body>
</html>
<div>こんにちは！</div>
