Tạo ảnh động so le

Tính năng web: sibling-count() và sibling-index()

Ảnh động so le mang lại hiệu ứng thú vị, trong đó nhiều phần tử được sắp xếp theo thứ tự sẽ tạo ảnh động tuần tự với độ trễ nhỏ giữa mỗi phần tử, thay vì tất cả đều tạo ảnh động cùng một lúc. Kỹ thuật này thường được dùng trong danh sách, thư viện hoặc trình đơn điều hướng để thu hút sự chú ý của người dùng và tạo cảm giác mượt mà, nhịp nhàng cho các hoạt động tương tác.

Tạo ảnh động so le bằng sibling-index()

Sử dụng thuộc tính sibling-index() trên thuộc tính animation-delay để ảnh động trên mỗi phần tử được bù trừ theo một số tỷ lệ với vị trí của chúng trong phần tử mẹ. Hàm sibling-index() trả về một số nguyên, vì vậy, bạn phải nhân hàm này với một đơn vị thời gian để chuyển đổi thành thời gian.

#stagger-list > .item {
  --stagger-time: 0.1s;
  /* Define the animation first */
  animation: fade-in 0.4s;
  /* Set the `animation-delay` to a time multiplied by the `sibling-index()` */
  animation-delay: calc(sibling-index() * var(--stagger-time))
}

BẮT BUỘC: Tôn trọng lựa chọn ưu tiên của người dùng bằng cách tắt ảnh động cho những người dùng muốn giảm chuyển động. 

@media (prefers-reduced-motion: reduce){
  /* Disable animation for users who prefer reduced motion. */
  #stagger-list > .item {
    animation: none;
  }
}

Chiến lược dự phòng

Kiểm tra khả năng hỗ trợ cho sibling-index() bằng cách sử dụng CSS với @supports (animation-delay: calc(sibling-index() * 0.1s)){} hoặc JavaScript với !CSS.supports('animation-delay: calc(sibling-index() * 0.1s)').

Để hỗ trợ ảnh động so le trong các trình duyệt cũ, hãy sử dụng JavaScript để thêm thuộc tính tuỳ chỉnh --sibling-index vào từng phần tử đồng cấp. BẮT BUỘC: gói mã này trong một thử nghiệm CSS.supports('animation-delay: calc(sibling-index() * 0.1s)') để tránh chạy JavaScript không cần thiết.

if(!CSS.supports('animation-delay: calc(sibling-index() * 0.1s)')){
  const staggerList = document.getElementById('stagger-list');
  [...staggerList.children].forEach((el, index)=>el.style.setProperty('--sibling-index', index + 1));
}

Thêm một nội dung khai báo animation-delay sử dụng thuộc tính tuỳ chỉnh --sibling-index. Hàm này phải nằm trước phần khai báo animation-delay sử dụng hàm sibling-index(). Bạn không cần phải gói thuộc tính này trong @supports – các trình duyệt cũ sẽ không phân tích cú pháp phần khai báo thứ hai và sẽ sử dụng phần khai báo đầu tiên.

#stagger-list > .item {
  animation-delay: calc(var(--sibling-index) * var(--stagger-time));
  animation-delay: calc(sibling-index() * var(--stagger-time));
}