2026/06/04
2026/5/16【プロンプト有】AIがCSSとJSで作るメインが浮き上がる奥行き演出のスライダー
<div class="background-spotlight"></div>
<div class="carousel-container" id="carousel">
<div class="card-stack" id="cardStack">
</div>
<div class="nav-dots" id="navDots">
</div>
</div>:root {
--card-width: 320px;
--card-height: 450px;
--active-scale: 1.1;
--inactive-scale: 0.85;
--spacing: 160px;
--rotation: 25deg;
--transition-speed: 0.6s;
--bg-color: #050505;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--bg-color);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
color: #fff;
}
.background-spotlight {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 40%, rgba(60, 60, 80, 0.4) 0%, rgba(5, 5, 5, 1) 70%);
z-index: -1;
filter: blur(40px);
}
.carousel-container {
position: relative;
width: 100%;
height: 600px;
perspective: 1500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
user-select: none;
}
.card-stack {
position: relative;
width: var(--card-width);
height: var(--card-height);
transform-style: preserve-3d;
cursor: grab;
}
.card-stack:active {
cursor: grabbing;
}
.card {
position: absolute;
width: 100%;
height: 100%;
border-radius: 20px;
overflow: hidden;
transition: transform var(--transition-speed) cubic-bezier(0.25, 1, 0.5, 1),
opacity var(--transition-speed),
filter var(--transition-speed);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
background: #1a1a1a;
pointer-events: none;
}
.card.active {
pointer-events: auto;
}
.card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.card-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
padding: 24px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.card-title {
font-size: 1.25rem;
font-weight: bold;
margin-bottom: 8px;
line-height: 1.2;
}
.card-description {
font-size: 0.9rem;
opacity: 0.8;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.4;
}
.external-link-icon {
position: absolute;
top: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
padding: 8px;
border-radius: 50%;
opacity: 0;
transition: opacity 0.3s;
text-decoration: none;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.card.active .external-link-icon {
opacity: 1;
}
.nav-dots {
margin-top: 50px;
display: flex;
gap: 12px;
z-index: 10;
}
.dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: all 0.3s ease;
}
.dot.active {
background: #fff;
transform: scale(1.5);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
@media (max-width: 768px) {
:root {
--card-width: 260px;
--card-height: 380px;
--spacing: 100px;
}
}const cardData = [{
id: 1,
title: '静寂のラグジュアリー',
description: '心地よい時間を生み出す上質な空間体験',
imageSrc: 'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&q=80&w=800',
href: '#'
}, {
id: 2,
title: '洗練されたライフスタイル',
description: '日常をより美しく彩るデザイン思想',
imageSrc: 'https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&q=80&w=800',
href: '#'
}, {
id: 3,
title: 'ダイナミックな躍動感',
description: '感性を刺激する力強い存在感',
imageSrc: 'https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&fit=crop&q=80&w=800',
href: '#'
}, {
id: 4,
title: '細部へのこだわり',
description: '丁寧に仕上げられた高品質なディテール',
imageSrc: 'https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&q=80&w=800',
href: '#'
}, {
id: 5,
title: '新しい価値の創造',
description: '未来志向のアイデアが生む革新的体験',
imageSrc: 'https://images.unsplash.com/photo-1485827404703-89b55fcc595e?auto=format&fit=crop&q=80&w=800',
href: '#'
}];
let currentIndex = 0;
let isDragging = false;
let startX = 0;
let autoPlayTimer = null;
const cardStack = document.getElementById('cardStack');
const navDots = document.getElementById('navDots');
function createUI() {
cardData.forEach((data, index) => {
// Card
const card = document.createElement('div');
card.className = 'card';
card.innerHTML = `
<img src="${data.imageSrc}" alt="${data.title}">
${data.href ? `
<a href="${data.href}" class="external-link-icon" target="_blank">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
</a>` : ''}
<div class="card-overlay">
<div class="card-title">${data.title}</div>
<div class="card-description">${data.description}</div>
</div>
`;
cardStack.appendChild(card);
// Dot
const dot = document.createElement('div');
dot.className = 'dot';
dot.addEventListener('click', () => goToIndex(index));
navDots.appendChild(dot);
});
updateCarousel();
startAutoPlay();
}
function updateCarousel() {
const cards = document.querySelectorAll('.card');
const dots = document.querySelectorAll('.dot');
const total = cards.length;
cards.forEach((card, i) => {
// 循環インデックス計算（最も近い経路で表示）
let diff = i - currentIndex;
// ループ処理
if (diff > total / 2) diff -= total;
if (diff < -total / 2) diff += total;
const absDiff = Math.abs(diff);
const x = diff * 180; // 水平間隔
const z = absDiff * -150; // 奥行き
const rotateY = diff * -25; // 回転
const scale = i === currentIndex ? 1.1 : 0.85;
const translateY = i === currentIndex ? -30 : 0; // 中央を少し上げる
const opacity = 1 - (absDiff * 0.3);
card.style.transform = `translateX(${x}px) translateZ(${z}px) translateY(${translateY}px) rotateY(${rotateY}deg) scale(${scale})`;
card.style.opacity = opacity;
card.style.zIndex = 100 - absDiff;
card.style.filter = absDiff > 0 ? 'brightness(0.5)' : 'brightness(1)';
card.classList.toggle('active', i === currentIndex);
});
dots.forEach((dot, i) => {
dot.classList.toggle('active', i === currentIndex);
});
}
function goToIndex(index) {
const total = cardData.length;
currentIndex = (index + total) % total;
updateCarousel();
}
function next() {
goToIndex(currentIndex + 1);
}
function prev() {
goToIndex(currentIndex - 1);
}
// ドラッグ・スワイプ処理
cardStack.addEventListener('mousedown', dragStart);
cardStack.addEventListener('touchstart', (e) => dragStart(e.touches[0]));
window.addEventListener('mousemove', dragMove);
window.addEventListener('touchmove', (e) => dragMove(e.touches[0]));
window.addEventListener('mouseup', dragEnd);
window.addEventListener('touchend', dragEnd);
function dragStart(e) {
isDragging = true;
startX = e.clientX;
stopAutoPlay();
}
function dragMove(e) {
if (!isDragging) return;
}
function dragEnd(e) {
if (!isDragging) return;
const endX = e.changedTouches ? e.changedTouches[0].clientX : e.clientX;
const diff = startX - endX;
if (Math.abs(diff) > 50) {
if (diff > 0) next();
else prev();
}
isDragging = false;
startAutoPlay();
}
// キーボード操作
window.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') next();
if (e.key === 'ArrowLeft') prev();
});
// 自動再生
function startAutoPlay() {
stopAutoPlay();
autoPlayTimer = setInterval(next, 5000);
}
function stopAutoPlay() {
if (autoPlayTimer) clearInterval(autoPlayTimer);
}
const container = document.getElementById('carousel');
container.addEventListener('mouseenter', stopAutoPlay);
container.addEventListener('mouseleave', startAutoPlay);
createUI();
CSSとJavaScriptのみで構築された、奥行きのある3D表現が特徴のスライダーUIです。
カードが前後関係を持ちながらスムーズに切り替わることで、一般的なスライダーよりも視覚的なインパクトを演出できます。
AI生成プロンプトも掲載しているため、同様のUIを再現・カスタマイズしやすく、ポートフォリオやサービス紹介セクションにも活用できる実装例です。
カードが前後関係を持ちながらスムーズに切り替わることで、一般的なスライダーよりも視覚的なインパクトを演出できます。
AI生成プロンプトも掲載しているため、同様のUIを再現・カスタマイズしやすく、ポートフォリオやサービス紹介セクションにも活用できる実装例です。
