Аккордеон изображений

Аккордеон изображения — это компонент пользовательского интерфейса, который плавно распределяет фоновое изображение, когда пользователь выбирает (или наводит на него курсор) каждую панель, создавая визуальное воздействие вместе с текстовой информацией.

Предварительный просмотр

Sunrise Mountains

朝焼けに染まる美しい山々の風景。

Ocean Depths

深い海の中の静寂と神秘的な光。

Forest Mist

霧に包まれた深い森の朝。

Night Sky

無数の星が瞬く夜空。

Варианты использования и возможности

Портфолио и галерея: идеально подходят для демонстрации изображений и эффективной работы в ограниченном пространстве.
Раздел «Ознакомление с функциями»: вы можете объяснить функции продуктов и услуг в пошаговом формате с впечатляющими изображениями.
Экономия места и высокая эффективность: в отличие от обычных слайдеров, вы можете отображать общий контекст (другие варианты выбора), одновременно расширяя детали в зависимости от действий пользователя.

##Ключевые моменты дизайна и 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 в качестве запасного варианта.