Accordion Hình Ảnh

Accordion hình ảnh là một thành phần giao diện người dùng có khả năng trải liền mạch hình nền khi người dùng chọn (hoặc di chuột qua) từng bảng, tạo ra tác động trực quan cùng với thông tin văn bản.

Xem trước

Sunrise Mountains

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

Ocean Depths

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

Forest Mist

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

Night Sky

無数の星が瞬く夜空。

Trường hợp sử dụng & Tính năng

Danh mục đầu tư và Thư viện: Lý tưởng để hiển thị hình ảnh và hoạt động hiệu quả trong không gian hạn chế.
Phần giới thiệu tính năng: Bạn có thể giải thích tính năng sản phẩm, tính năng dịch vụ theo từng bước bằng hình ảnh ấn tượng.
Tiết kiệm không gian và tác động cao: Không giống như thanh trượt thông thường, bạn có thể hiển thị bối cảnh tổng thể (các lựa chọn khác) đồng thời mở rộng chi tiết dựa trên hành động của người dùng.

Những điểm chính của thiết kế và UX (Design & UX)

Sử dụng CSS :has() pseudo-class: Chuyển động tương tác đạt được bằng cách sử dụng CSS thuần túy mà không sử dụng bất kỳ JavaScript nào.
Hoạt hình mượt mà: Việc sử dụng cubic-bezier dễ dàng làm cho việc mở rộng và thu gọn bảng điều khiển cũng như việc phóng to (thu nhỏ) hình ảnh một cách tự nhiên và dễ chịu.
Đảm bảo khả năng hiển thị: Lớp phủ chuyển màu được xếp chồng lên trên hình nền để cải thiện khả năng đọc của văn bản màu trắng.

Cách tùy chỉnh (Hướng dẫn tùy chỉnh)

Bạn có thể điều chỉnh chiều cao tổng thể của đàn bằng cách thay đổi height.
Thêm/xóa phần tử .ia-panel HTML theo số lượng bảng.
Vui lòng đặt URL hình ảnh yêu thích của bạn trong background-image của mỗi bảng.

Mã triển khai (Implementation)

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

Hỗ trợ trình duyệt

Thành phần này sử dụng lớp giả :has(), được hỗ trợ đầy đủ bởi các trình duyệt hiện đại (phiên bản mới nhất của Chrome, Edge, Safari và Firefox). Các trình duyệt cũ hơn có thể yêu cầu thay thế lớp bằng cách sử dụng JavaScript làm phương án dự phòng.