Tạo dòng thời gian tương tác bằng CSS và JavaScript
Bài học chính
Một dòng thời gian hấp dẫn có thể được xây dựng dễ dàng bằng cách sử dụng CSS và JavaScript.
Bắt đầu bằng cách tổ chức diễn biến theo thời gian của các sự kiện thông qua việc tạo cấu trúc HTML, bao gồm nhiều thành phần khác nhau như tiêu đề, đoạn văn, hình ảnh và các nội dung đa phương tiện khác. Ngoài ra, hãy sử dụng Cascading Style Sheets (CSS) để truyền đạt các đặc tính thẩm mỹ cho các thành phần này, từ đó tạo ra giao diện trực quan hấp dẫn giúp nâng cao trải nghiệm người dùng trong khi điều hướng dòng thời gian.
javascript//Thiết lập trình quan sát giao lộ cho các phần tử dòng thời gianconst Observer=new IntersectionObserver(entries=> {entries.forEach(entry=> {//Nếu phần tử hiển thị, hãy làm mờ nó bằng CSS transitionif (entry.isIntersecting) {entry.target. classList.add(‘fade-in’);} else {entry.target.classList.remove(‘fade-in’);}});});//Thêm lớp’fade-in’vào tất cả các thành phần dòng thời gian ban đầuconst timelineItems=document.querySelectorAll(’.timeline__item’);timelineItems.forEach(item=> item.classList.add(‘fade-in’));//Quan sát từng dòng thời gian elementconst timeObserved
Các mốc thời gian đóng vai trò là công cụ hỗ trợ trực quan hiệu quả để điều hướng và hiểu các sự kiện theo trình tự thời gian. Khám phá cách xây dựng dòng thời gian tương tác thông qua việc sử dụng CSS và JavaScript, chúng tạo thành một sự kết hợp mạnh mẽ về mặt này.
Xây dựng cấu trúc dòng thời gian
Bạn có thể xem mã đầy đủ cho dự án này từ kho lưu trữ GitHub.
Để bắt đầu, cần thiết lập kiến trúc HTML trong tệp “index.html”. Điều này liên quan đến việc phân định các lần xuất hiện và cuộc hẹn dưới dạng các yếu tố riêng lẻ, từ đó cung cấp cơ sở cho dòng thời gian được kết nối với nhau tạo điều kiện thuận lợi cho sự tương tác của người dùng.
<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, sự xuất hiện của thành phần của bạn có thể được mô tả như sau:
Chọn bố cục cho dòng thời gian của bạn: Dọc và ngang
Khi tạo dòng thời gian tương tác, người ta có thể chọn hướng dọc hoặc hướng ngang. Cái trước thể hiện sự dễ sử dụng, đặc biệt là trên các thiết bị di động, do nó phù hợp với hành vi cuộn thông thường. Hơn nữa, nếu dòng thời gian chứa nhiều thông tin, thì có lý do rằng cấu hình như vậy sẽ mang lại sự thuận tiện tối đa.
Các mốc thời gian theo chiều ngang tỏ ra hấp dẫn về mặt thị giác khi được hiển thị trên các màn hình mở rộng, đặc biệt trong các trường hợp cần cuộn ngang ở mức tối thiểu. Những phong cách này phục vụ tốt cho các trang web sáng tạo có nội dung yêu cầu ít chi tiết phức tạp hơn. Ngược lại, các mốc thời gian dọc có thể phù hợp hơn với các nền tảng có cấu trúc hoặc thông tin dày đặc hơn, nơi cần phải duyệt rộng rãi. Sự lựa chọn giữa hai lựa chọn thay thế này cuối cùng phụ thuộc vào nhu cầu và sở thích cụ thể của cả nhà thiết kế và người dùng.
Tạo kiểu cho dòng thời gian bằng CSS
là các đoạn đường, biểu diễn nút và chỉ báo thời gian.
⭐ Dòng: Một đường thẳng đứng ở giữa, được tạo bằng cách sử dụng phần tử giả Timeline__content::after, đóng vai trò là xương sống của dòng thời gian. Nó được tạo kiểu với chiều rộng và màu sắc cụ thể, được định vị tuyệt đối để căn chỉnh với tâm của các mục dòng thời gian.
.Timeline__content::after {
background-color: var(--clr-purple);
content: "";
position: absolute;
left: calc(50%-2px);
width: 0.4rem;
height: 97%;
z-index: -5;
}
⭐ Nút: Vòng tròn, được tạo kiểu bằng lớp vòng tròn, hoạt động như các nút 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à khác biệt về mặt hình ảnh với màu nền, tạo thành các đ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;
}
⭐ Điểm đánh dấu ngày: Ngày, được tạo kiểu bằng lớp Timeline__date, hiển thị ở hai bên của dòng thời gian. Vị trí của chúng xen kẽ giữa trái và phải cho từng mục dòng thời gian, tạo ra một cái nhìn 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;}
Xem bộ kiểu đầy đủ từ GitHub repo trong style.css.
Sau khi áp dụng các kiểu cần thiết cho các thành phần HTML và CSS của trang web, kết quả cuối cùng sẽ giống với bố cục có cấu trúc tốt, hấp dẫn về mặt trực quan và dễ điều hướng. Thiết kế có thể kết hợp nhiều yếu tố khác nhau như hình ảnh, hộp văn bản, bảng, biểu mẫu và nút, tất cả đều được sắp xếp một cách có tổ chức để hỗ trợ người dùng tương tác với nội dung. Ngoài ra, việc sử dụng cách phối màu, kiểu chữ và khoảng trắng có thể góp phần tạo ra trải nghiệm hình ảnh hài hòa cho người dùng duyệt trang web.
Hoạt hình bằng JavaScript
Để làm sinh động phần tử này, hãy sử dụng API Intersection Observer để tạo hiệu ứng cho các mục dòng thời gian khi cuộn bằng cách kết hợp đoạn mã sau vào tệp script.js :
Thiết lập ban đầu
Ban đầu, chọn tất cả các thành phần có thuộc tính lớp “Dòng thời gian__item”.
const timelineItems = document.querySelectorAll(".Timeline__item");
Kiểu dáng ban đầu của các mục dòng thời gian
Để bắt đầu, hãy đặt giá trị alpha của mọi phần tử về 0, điều này sẽ khiến chúng trở nên vô hình. Sau đó, sử dụng chuyển đổi CSS để đạt được hiệu ứng mờ dần liền mạch như sau:
timelineItems.forEach((item) => {
item.style.opacity = 0;
item.style.transition = "opacity 0.6s ease-out";
}
Bằng cách kết hợp kiểu dáng cho dòng thời gian trong tệp JavaScript, thay vì trong biểu định kiểu, người ta có thể triển khai tính năng nâng cao lũy tiến một cách hiệu quả. Chiến lược này đảm bảo rằng ngay cả khi JavaScript không thực thi đúng cách, cấu trúc và bố cục cơ bản của dòng thời gian sẽ vẫn hiển thị, từ đó cung cấp cho người dùng một số cấp độ chức năng bất kể mọi vấn đề kỹ thuật có thể phát sinh.
Gọi lại người quan sát giao lộ
Tạo hàm fadeInOnScroll để sửa đổi độ mờ của các phần tử thành một, hiển thị chúng khi chúng tiếp xúc với màn hình của người xem.
const fadeInOnScroll = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
}
});
};
Tùy chọn người quan sát giao lộ
Định cấu hình trình quan sát bằng cách đặt các tham số của nó để bao gồm giá trị ngưỡng là 0,1, cho biết rằng hoạt ảnh sẽ được kích hoạt khi hiển thị 10% đối tượng.
const options = {
root: null,
rootMargin: "0px",
threshold: 0.1,
}
Tạo và sử dụng Trình quan sát giao lộ
Kết thúc bằng cách xây dựng một đối tượng IntersectionObserver kết hợp các tham số đã chỉ định và thêm nó vào mọi phiên bản của thành phần dòng thời gian.
const observer = new IntersectionObserver(fadeInOnScroll, options);
timelineItems.forEach((item) => {
observer.observe(item);
});
Kết quả cuối cùng sẽ trông như thế này:
Trình duyệt của bạn không hỗ trợ thẻ video.
Các phương pháp hay nhất về Thành phần dòng thời gian
Một số thực hành cần tuân thủ bao gồm:
Nâng cao khả năng thích ứng của bố cục bằng cách triển khai các nguyên tắc thiết kế đáp ứng, mang lại trải nghiệm người dùng nhất quán và không bị gián đoạn trên nhiều màn hình và thiết bị khác nhau thông qua việc xem xét cẩn thận tỷ lệ, tỷ lệ, lưới chất lỏng, hình ảnh, truy vấn phương tiện và phương pháp tiếp cận ưu tiên thiết bị di động.
Việc sử dụng các kỹ thuật lập trình hiệu quả là rất quan trọng để đảm bảo hiệu suất hoạt ảnh liền mạch.
Sử dụng các phần tử HTML phù hợp về mặt ngữ nghĩa, đảm bảo tỷ lệ tương phản tối ưu giữa văn bản và màu nền, đồng thời sử dụng thuộc tính ARIA để nâng cao khả năng truy cập tổng thể cho nội dung web của bạn.
Đưa dòng thời gian của bạn vào cuộc sống: Hành trình thiết kế web
Việc tạo ra một dòng thời gian tương tác không chỉ dừng lại ở việc trình bày dữ liệu; đúng hơn, nó liên quan đến việc tạo ra một cuộc gặp gỡ đầy mê hoặc và khai sáng cho người xem. Việc sử dụng kiến trúc HTML, nghệ thuật CSS và kỹ thuật hoạt hình JavaScript cho phép phát triển một dòng thời gian quyến rũ, không chỉ thu hút sự chú ý của khán giả mà còn truyền tải thông tin cần thiết một cách hấp dẫn.