Bild-Akkordeon

Ein Bildakkordeon ist eine UI-Komponente, die ein Hintergrundbild nahtlos ausbreitet, wenn der Benutzer jedes Panel auswählt (oder mit der Maus darüber fährt), und so zusammen mit Textinformationen eine visuelle Wirkung erzeugt.

Vorschau

Sunrise Mountains

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

Ocean Depths

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

Forest Mist

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

Night Sky

無数の星が瞬く夜空。

Anwendungsfälle und Funktionen

Portfolio und Galerie: Ideal zum Anzeigen von Bildern und zum effektiven Arbeiten auf begrenztem Raum.
Funktionseinführungsabschnitt: Sie können Produktfunktionen und Servicefunktionen Schritt für Schritt mit beeindruckenden Bildern erklären.
Platzsparend und wirkungsvoll: Im Gegensatz zu herkömmlichen Schiebereglern können Sie den Gesamtkontext (andere Auswahlmöglichkeiten) anzeigen und gleichzeitig die Details basierend auf Benutzeraktionen erweitern.

Kernpunkte von Design und UX (Design & UX)

Verwendung der CSS-Pseudoklasse „:has()“: Interaktive Bewegung wird mit reinem CSS ohne Verwendung von JavaScript erreicht.
Flüssige Animation: Durch die Vereinfachung mit „Cubic-Bezier“ wird das Ausdehnen und Zusammenziehen des Panels sowie die Vergrößerung (Vergrößerung) des Bildes natürlich und angenehm.
Sicherstellen der Sichtbarkeit: Eine Verlaufsüberlagerung wird über das Hintergrundbild gelegt, um die Lesbarkeit von weißem Text zu verbessern.

So passen Sie es an (Anpassungsanleitung)

Sie können die Gesamthöhe des Akkordeons anpassen, indem Sie „Höhe“ ändern.
Fügen Sie das HTML-Element „.ia-panel“ entsprechend der Anzahl der Panels hinzu bzw. löschen Sie es.
Bitte legen Sie die URL Ihres Lieblingsbilds unter „Hintergrundbild“ jedes Panels fest.

Implementierungscode (Implementierung)

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

Browser-Unterstützung

Diese Komponente nutzt die Pseudoklasse „:has()“, die von modernen Browsern (neueste Versionen von Chrome, Edge, Safari und Firefox) vollständig unterstützt wird. Ältere Browser erfordern möglicherweise eine Klassenersetzung mithilfe von JavaScript als Fallback.