Аккордеон изображения — это компонент пользовательского интерфейса, который плавно распределяет фоновое изображение, когда пользователь выбирает (или наводит на него курсор) каждую панель, создавая визуальное воздействие вместе с текстовой информацией.
Портфолио и галерея: идеально подходят для демонстрации изображений и эффективной работы в ограниченном пространстве.
Раздел «Ознакомление с функциями»: вы можете объяснить функции продуктов и услуг в пошаговом формате с впечатляющими изображениями.
Экономия места и высокая эффективность: в отличие от обычных слайдеров, вы можете отображать общий контекст (другие варианты выбора), одновременно расширяя детали в зависимости от действий пользователя.
##Ключевые моменты дизайна и UX (Design & UX)
Использование псевдокласса CSS :has(): интерактивное перемещение достигается с помощью чистого CSS без использования JavaScript.
Плавная анимация: замедление с помощью функции «cubic-bezier» делает расширение и сжатие панели, а также увеличение (масштабирование) изображения естественным и приятным.
– Обеспечение видимости: поверх фонового изображения накладывается градиент, чтобы улучшить читаемость белого текста.
— Добавьте/удалит HTML-элемент .ia-panel в зависимости от количества панелей.
– Пожалуйста, укажите URL-адрес вашего любимого изображения в background-image на каждой панели.
<div class="ia-container">
<!-- Panel 1 -->
<label class="ia-panel">
<input type="radio" name="image-accordion" class="ia-radio" checked="checked" />
<div class="ia-bg" style="background-image: url('/assets/bg-1.jpg');"></div>
<div class="ia-overlay"></div>
<div class="ia-content">
<div class="ia-icon">1</div>
<div class="ia-text">
<h3>Sunrise Mountains</h3>
<p>朝焼けに染まる美しい山々の風景。</p>
</div>
</div>
</label>
<!-- Panel 2 -->
<label class="ia-panel">
<input type="radio" name="image-accordion" class="ia-radio" />
<div class="ia-bg" style="background-image: url('/assets/bg-2.jpg');"></div>
<div class="ia-overlay"></div>
<div class="ia-content">
<div class="ia-icon">2</div>
<div class="ia-text">
<h3>Ocean Depths</h3>
<p>深い海の中の静寂と神秘的な光。</p>
</div>
</div>
</label>
<!-- Panel 3 -->
<label class="ia-panel">
<input type="radio" name="image-accordion" class="ia-radio" />
<div class="ia-bg" style="background-image: url('/assets/bg-3.jpg');"></div>
<div class="ia-overlay"></div>
<div class="ia-content">
<div class="ia-icon">3</div>
<div class="ia-text">
<h3>Forest Mist</h3>
<p>霧に包まれた深い森の朝。</p>
</div>
</div>
</label>
<!-- Panel 4 -->
<label class="ia-panel">
<input type="radio" name="image-accordion" class="ia-radio" />
<div class="ia-bg" style="background-image: url('/assets/bg-4.jpg');"></div>
<div class="ia-overlay"></div>
<div class="ia-content">
<div class="ia-icon">4</div>
<div class="ia-text">
<h3>Night Sky</h3>
<p>無数の星が瞬く夜空。</p>
</div>
</div>
</label>
</div>
<style>
.ia-container {
display: flex;
width: 100%;
height: 400px;
gap: 0.75rem;
border-radius: 1rem;
overflow: hidden;
font-family: sans-serif;
}
.ia-panel {
position: relative;
flex: 1;
border-radius: 1rem;
overflow: hidden;
cursor: pointer;
transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.ia-radio {
display: none;
}
.ia-panel:has(.ia-radio:checked) {
flex: 4;
}
.ia-panel:not(:has(.ia-radio:checked)):hover {
flex: 1.2;
}
.ia-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.ia-panel:has(.ia-radio:checked) .ia-bg {
transform: scale(1.05);
}
.ia-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.1) 100%);
opacity: 0.6;
transition: opacity 0.6s ease;
}
.ia-panel:has(.ia-radio:checked) .ia-overlay {
opacity: 0.8;
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
}
.ia-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1.5rem;
color: white;
display: flex;
align-items: flex-end;
gap: 1rem;
}
.ia-icon {
width: 3rem;
height: 3rem;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 1.25rem;
flex-shrink: 0;
}
.ia-text {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
white-space: nowrap;
overflow: hidden;
width: 0;
}
.ia-panel:has(.ia-radio:checked) .ia-text {
opacity: 1;
transform: translateY(0);
width: 100%;
transition-delay: 0.1s;
}
.ia-text h3 {
margin: 0 0 0.25rem 0;
font-size: 1.25rem;
font-weight: 700;
}
.ia-text p {
margin: 0;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.8);
}
</style>Этот компонент использует псевдокласс :has(), который полностью поддерживается современными браузерами (последние версии Chrome, Edge, Safari и Firefox). В старых браузерах может потребоваться замена класса с использованием JavaScript в качестве запасного варианта.