Marquee - The modern way

/ tatthien

Trước đây chúng ta biết tới element <marquee> dùng để tạo hiệu ứng di chuyển nội dung qua lại. Tuy nhiên, element này đã bị deprecated và được khuyên là không nên tiếp tục sử dụng. Các bạn có thể xem thêm trên MDN .

Vậy ngày nay, nếu chúng ta muốn làm hiệu ứng tương tự như cách <marquee thì làm thế nào? Bài viết hôm nay mình xin đi qua cách tiếp cận hiện đại với HTML và CSS.

Trước tiên cùng xem qua demo nhé

Cấu trúc HTML

<div class="marquee">
  <ul class="marquee__content">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <!-- Phần nhân đôi, tương tự phía trên -->
  <ul class="marquee__content" aria-hidden="true">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

Liên quan đến vấn đề accessibility, các bạn nhớ set aria-hidden="true" cho những phần nhân đôi lên, để ẩn nội dung đó khỏi screen reader.

CSS

Dưới đây là full CSS để làm hiệu ứng marquee.

* {
  margin: 0;
  padding: 0;
}

.marquee {
  --gap: 1rem;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
}

.marquee__content {
  list-style: none;
  display: flex;
  flex-shrink: 0;
  min-width: 100%;
  justify-content: space-around;
  animation: scroll 10s infinite linear;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

Mình quyết định không break out từng CSS rule ra để giải thích, thay vào đó các bạn có thể tương tác thông qua demo bên dưới để thấy mỗi rule sẽ ảnh hưởng thế nào đến hiệu ứng này.

Credit

Đọc thêm