SnippetUI
← Back to snippets

Görsel Akordiyon

Paneli açtığınızda yalnızca metni değil aynı zamanda güzel bir arka plan resmini de görüntüleyen bir akordeon.

HTMLCSS

Görüntü akordeonu, kullanıcı her bir paneli seçtiğinde (veya üzerine geldiğinde) arka plan görüntüsünü sorunsuz bir şekilde yayan ve metinsel bilgilerin yanı sıra görsel etki yaratan bir kullanıcı arayüzü bileşenidir.

Önizleme

Kullanım Durumları ve Özellikler

  • Portföy ve Galeri: Görüntüleri görüntülemek ve sınırlı alanda etkili bir şekilde çalışmak için idealdir.

  • Özellik tanıtım bölümü: Ürün özelliklerini ve hizmet özelliklerini etkileyici görsellerle adım adım anlatabilirsiniz.

  • Yerden tasarruf sağlar ve yüksek etki: Normal kaydırıcılardan farklı olarak, kullanıcı eylemlerine göre ayrıntıları genişletirken genel bağlamı (diğer seçenekler) gösterebilirsiniz.

Tasarım ve UX’in önemli noktaları (Tasarım ve UX)

  • CSS :has() sözde sınıfının kullanımı: Etkileşimli hareket, herhangi bir JavaScript kullanılmadan saf CSS kullanılarak gerçekleştirilir.

  • Pürüzsüz animasyon: ‘Küp-bezier’ kullanarak kolaylık sağlamak, panelin genişlemesini ve daralmasını ve görüntünün büyütülmesini (ölçeklenmesini) doğal ve hoş hale getirir.

  • Görünürlüğün sağlanması: Beyaz metnin okunabilirliğini artırmak için arka plan görüntüsünün üzerine degrade bir katman yerleştirilir.

Nasıl kişiselleştirilir (Özelleştirme Kılavuzu)

  • ‘Yüksekliği’ değiştirerek akordeonun genel yüksekliğini ayarlayabilirsiniz.

  • Panel sayısına göre HTML .ia-panel öğesini ekleyin/silin.

  • Lütfen her panelin “arka plan resmi”nde favori görsel URL’nizi ayarlayın.

Uygulama kodu (Uygulama)

<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>

Tarayıcı Desteği

Bu bileşen, modern tarayıcılar (Chrome, Edge, Safari ve Firefox’un en son sürümleri) tarafından tam olarak desteklenen :has() sözde sınıfını kullanır. Daha eski tarayıcılar, geri dönüş olarak JavaScript kullanarak sınıf değişimi gerektirebilir.