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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
Nếu bạn muốn tham khảo các timeline khác dành cho website thì truy cập đường dẫn bên dưới nha.
Timeline CSS Javascript
Nếu bạn muốn tham khảo cách tạo vertical timeline dành cho website thì truy cập đường dẫn bên dưới nha.
Cách Tạo Vertical Timeline Bằng HTML CSS
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ẻ!
