Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Timeline Là Gì Và 8 Ví Dụ Timeline Trong Website

Timeline Là Gì Và 8 Ví Dụ Timeline Trong Website


Ngày 13 Tháng 4 Năm 2020

Xin chào các bạn quay lại blog của mình. Hôm nay chúng ta sẽ đi tìm hiểu các timeline bằng cách kết hợp HTML, CSS, Javascript và Bootstrap 4 . Nào hãy cũng mình tìm hiểu nhé!

Timeline Là Gì?

Sau đây mình xin giới thiệu qua timeline một tí. Nó là một danh sách các sự kiện theo thứ tự thời gian, thông thường bạn sẽ thấy nó là một thanh hiển thị theo chiều dọc hay chiều ngang với từng mốc thời gian cố định và nội dung về sự kiện đó. Mình thấy nó hay được sử dụng trong việc kể về lịch sử hình thành của một công ty, tổ chức, hay bạn có thể dùng trong việc thiết lập những danh sách cần làm trong ngày... Nó giúp cho người dùng có cái nhìn trực quan, dễ hiểu và thích thú khi xem chúng hơn.

Cách Tạo Timeline Bootstrap:

Cách Tạo Timeline Bootstrap

Mình có tổng hợp một số Timeline được xây dựng bằng Bootstrap 4 kết hợp với CSS và Fontawesome bao gồm cả theo chiều dọc và chiều ngang. Tuy không có hiệu ứng nào nhưng theo mình thấy khả nằng phối màu, sắp xếp bố cục rất đẹp và rõ ràng. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

See the Pen Timeline Bootstrap (source from bootsnipp) by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Thiết Kế Timeline HTML CSS:

Thiết Kế Timeline HTML CSS

Timeline này theo hướng hiện đại với việc sử dụng màu nền đen tạo nên độ tương phản cao cho các sự kiện và nó chia các sự kiện theo trục thời gian với thông tin chi tiết giúp người dùng có cái nhìn trực quan và dễ dàng so sánh khoảng thời gian giũa các sự kiện. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

See the Pen Timeline by Clint Brown (@clintabrown) on CodePen.

Nguồn

Cách Tạo Timeline CSS:

Timeline này sử dụng hình ảnh làm điểm thu hút người dùng cùng với thời gian sự kiện. Để tạo nên trải nghiệm thú vị thì nó sử dụng hiệu ứng khi người dùng hover vào ảnh thì nó sẽ hiện ra thông tin chi tiết về sự kiện đó và làm mờ ảnh nền của những sự kiện khác. Để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

See the Pen 4 Panel Timeline CSS by Jeff Glenn (@jeffglenn) on CodePen.

Nguồn

Cách Tạo Jquery Horizontal Timeline:

Cách Tạo Jquery Horizontal Timeline

Timeline này tập trung vào việc thiết kế, hiển thị nội dung cho từng sự kiện và thanh điều hướng cho mỗi mốc thời gian. Thiết kế timeline này giúp cho người dùng sự kích thích muốn xem nội dung chi tiết của những sự kiện khác bằng cách click(nhấp) vào từng mốc thời gian . Để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

See the Pen horizontal timeline by Ritesh Kumar (@ritz078) on CodePen.

Nguồn

Cách Tạo Jquery Vertical Timeline:

Cách Tạo Jquery Vertical Timeline

Timeline này sử dụng component card Bootstrap để kết hợp hình ảnh và nội dung sự kiện lại với nhau. Thiết kế của nó cũng không quá cầu kì, chủ yếu chú trọng vào yếu tố đơn giản. Ở đây mình có lưu ý nhỏ là về hiệu ứng của nó được xây dựng bằng plugin Scrollrevealjs giúp tạo hiệu ứng chuyển động và mốc sự kiện chỉ xuất hiện khi người dùng sroll tới sự kiện đó trong trang web. Để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

See the Pen Vertical Timeline by Sava Lazic (@savalazic) on CodePen.

Nguồn

Thiết Kế HTML CSS Responsive Timeline:

Thiết Kế HTML CSS Responsive Timeline

Timeline này thiết kế theo phong cách đơn giản, không có hiệu ứng nào nhưng do việc chọn font, màu sắc hài hòa và hiển thị được nhiều trên nhiều màn hình thiết bị nên bạn có thể áp dụng cho nhiều loại bố cục của trang web. Để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

See the Pen Simple Responsive Timeline by Brady Wright (@brady_wright) on CodePen.

Nguồn

Cách Tạo Bootstrap Timeline HTML5:

Cách Tạo Bootstrap Timeline HTML5

Điểm đặc biệt của timline này là bạn có thể sử dụng với chức năng liệt kệ sự kiện theo thời gian hoặc thanh điều hướng (navigation) trong trang web. Sự thú vị trong hiệu ứng của nó là tạo sự tương tác giữa phần nội dung với đường dẫn liên kết tới nó giúp người dùng xác định chủ đề của nội dung đó trong timline. Để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

See the Pen Timeline Style Navigation by Naila Ahmad (@nailaahmad) on CodePen.

Nguồn

Cách Tạo Horizontal Timeline Responsive HTML CSS:

Cách Tạo Horizontal Timeline Responsive HTML CSS

Nãy giờ chúng ta thiết kế theo mốc thời gian, bây giờ mình sẽ giới thiệu một timline khác được thiết kế để miêu tả từng bước hành động cụ thể để đạt một điều gì đó. Theo mình thấy thì ở đây quan trọng vào hình ảnh minh họa giúp người dùng có cái nhìn trực quan và dễ hình dung công việc cụ thể . Để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

See the Pen Horizontal Timeline Responsive by Nicko Afan (@nickoafan) on CodePen.

Nguồn

Thiết Kế Timeline CSS:

Thiết Kế Timeline CSS

Timeline này được thiết kế đơn giản với HTML và CSS nhưng vô cùng đẹp mắt và responsive trên nhiều màn hình thiết bị khác nhau nên bạn có thể áp dụng rộng rãi cho các bố cục trang web . Để hiểu rõ hơn bạn xem đoạn code sau đây nhé:

See the Pen responsive timeline v4: pure CSS by Clay Larson (@cjl750) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ giúp bạn rút ngắn thời gian trong việc thiết kế giao diện Testimonials trong Bootstrap 4 và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!