Cách tạo timeline tương tác bằng CSS và JavaScript

Chí Vỹ

Sử dụng các khái niệm cơ bản của HTML, CSS và JS, bạn sẽ có timeline tương tác và chạy nhanh chóng.

Tạo timeline trong CSS và JavaScript

Timeline là công cụ trực quan mạnh mẽ, giúp người dùng điều hướng và hiểu các sự kiện theo dòng thời gian. Hãy cùng Quantrimang.com khám phá cách tạo timeline tương tác bằng CSS và JavaScript.

Xây dựng cấu trúc timeline

Để bắt đầu, hãy phác thảo cấu trúc HTML trong index.html. Tạo các sự kiện và ngày tháng dưới dạng những thành phần riêng biệt, đặt nền tảng cho timeline tương tác.

<body>
  <section class="timeline-section">
    <div class="container">
      <div class="Timeline__header">
        <h2>Timeline</h2>

        <p class="heading--title">
          Here is the breakdown of the time we anticipate <br />
          using for the upcoming event.
        </p>
      </div>

      <div class="Timeline__content">
        <div class="Timeline__item">
          <div class="Timeline__text">
            <h3>Occasion 1</h3>

            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Corporis, explicabo.
            </p>

            <span class="circle">1</span>
          </div>

          <h3 class="Timeline__date">12 Dec. 2023</h3>
        </div>

        <div class="Timeline__item">
          <div class="Timeline__text">
            <h3>Occasion 2</h3>

            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Corporis, explicabo.
            </p>

            <span class="circle">2</span>
          </div>

          <h3 class="Timeline__date">12 Dec. 2023</h3>
        </div>
        <!-- More Items -->
      </div>
    </div>
  </section>
</body>

Hiện tại, thành phần trông sẽ như thế này:

Timeline cho web

Chọn bố cục timeline theo chiều dọc hoặc ngang

Khi thiết kế timeline tương tác, bạn có thể chọn kiểu dọc hoặc ngang. Timeline theo chiều dọc rất dễ sử dụng, đặc biệt trên điện thoại, vì đây là hướng cuộn trang web điển hình. Nếu timeline có nhiều nội dung, đây có thể là bố cục thuận tiện nhất.

Tuy nhiên, timeline theo chiều ngang bắt mắt hơn trên màn hình rộng và là lựa chọn tuyệt vời cho các trang sáng tạo với ít chi tiết hơn mà có thể thu nhỏ cuộn lần lượt. Mỗi kiểu có đặc tính riêng, phù hợp với từng kiểu web và trải nghiệm người dùng khác nhau.

Tạo kiểu timeline với CSS

Bạn có 3 kiểu thành phần trực quan để tạo kiểu cho timeline: line, node và đánh dấu ngày tháng.

Lines: Một đường thẳng đứng ở giữa, được tạo bằng Timeline__content::after pseudo-element, đóng vai trò như “cột sống” của timeline. Nó được tạo kiểu bằng chiều rộng và màu sắc cụ thể, được cố định vị trí để căn chỉnh ở giữa các mục timeline.

.Timeline__content::after {
  background-color: var(--clr-purple);
  content: "";
  position: absolute;
  left: calc(50% - 2px);
  width: 0.4rem;
  height: 97%;
  z-index: -5;
}

Nodes: Là các hình tròn, được tạo kiểu bằng class hình tròn, hoạt động như node trên timeline. Chúng được định vị tuyệt đối ở giữa của từng mục timeline và hoạt động như các nút giao trên dòng thời gian. Chúng được đặt ở vị trí tuyệt đối ở trung tâm của từng mục dòng thời gian và có sự khác biệt về mặt hình ảnh với màu nền, tạo thành những điểm chính dọc theo dòng thời gian.

.circle {
  position: absolute;
  background: var(--clr-purple);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 6.8rem;
  width: 100%;
  aspect-ratio: 1/ 1;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
  font-size: 1.6rem;
}

Date markers: Ngày tháng, được tạo kiểu bằng class Timeline__date, hiện ở hai bên của timeline. Vị trí của chúng luân phiên thay đổi giữa bên trái và phải cho từng mục timeline, tạo ra hình ảnh cân bằng, so le dọc theo dòng thời gian.

.Timeline__text,
.Timeline__date { width: 50%; }
.Timeline__item:nth-child(even) { flex-direction: row-reverse;}

.Timeline_item:nth-child(even) .Timeline_date {
  text-align: right;
  padding-right: 8.3rem;
}

.Timeline_item:nth-child(even) .Timeline_text { padding-left: 8.3rem;}

.Timeline_item:nth-child(odd) .Timeline_text {
  text-align: right;
  align-items: flex-end;
  padding-right: 8.3rem;
}

.Timeline_item:nth-child(odd) .Timeline_date { padding-left: 8.3rem;}

Sau khi tạo kiểu, thành phần của bạn trông sẽ như thế này:

Timeline được tạo bằng CSS

Tạo hiệu ứng động với JavaScript

Để tạo hiệu ứng động cho thành phần này, dùng Intersection Observer API để tạo hiệu ứng động cho các mục timeline khi cuộn. Thêm code sau vào script.js.

1. Thiết lập ban đầu

Đầu tiên, chọn toàn bộ thành phần bằng class Timeline_item.

const timelineItems = document.querySelectorAll(".Timeline__item");

2. Kiểu dáng ban đầu của các mục timeline

Đặt độ mờ ban đầu của từng mục thành 0 (ẩn) và áp dụng chuyển đổi CSS để tạo hiệu ứng làm mờ mượt mà.

timelineItems.forEach((item) => {
    item.style.opacity = 0;
    item.style.transition = "opacity 0.6s ease-out";
}

3. Callback Intersection Observer

Xác định hàm fadeInOnScroll để thay đổi độ mờ của các mục sang 1 (hiển thị) khi chúng giao với cổng xem.

const fadeInOnScroll = (entries, observer) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            entry.target.style.opacity = 1;
        }
    });
};

4. Các tùy chọn Intersection Observer

Đặt các lựa chọn cho observer, với ngưỡng 0.1 cho biết hoạt ảnh sẽ kích hoạt khi hiển thị 10% mục.

const options = {
    root: null,
    rootMargin: "0px",
    threshold: 0.1,
}

5. Tạo và dùng Intersection Observer

Hoàn thiện bằng cách tạo một IntersectionObserver với những tùy chọn này và áp dụng nó cho từng mục timeline.

const observer = new IntersectionObserver(fadeInOnScroll, options);

timelineItems.forEach((item) => {
    observer.observe(item);
});

Xây dựng một timeline tương tác không chỉ trình bày thông tin mà còn tạo trải nghiệm hấp dẫn hơn cho web. Bằng cách kết hợp cấu trúc HTML, tạo kiểu CSS và hiệu ứng động cho JavaScript, bạn có thể làm việc đó vô cùng dễ dàng. Chúc các bạn thành công!

Thứ Bảy, 18/11/2023 13:54

5 ★ 1 👨 288