6 hiệu ứng JS có thể thực hiện được với pure CSS
Đã có hàng trăm ví dụ về việc thực hiện pure CSS với các hiệu ứng JavaScript phổ biến. Hãy thử kết hợp chúng lại với nhau và điều mà chúng ta có thể nhận được đó là một số hình ảnh động khá tiên tiến và các sự tiện lợi khác. Trình duyệt sẽ tiếp tục ngày càng trở nên tốt hơn, nhanh hơn và mượt hơn.
Tuy nhiên, không phải lúc nào cũng có mặt tối ưu. JS nhiều lúc có thể phá vỡ, làm trang web trở nên xuống cấp, nội dung biến mất hoàn toàn.
Vì vậy, hãy xem một số tùy chọn pure CSS ở đây và xem thử điều gì có thể tốt cho trang web.
PARALAX
Parallax không được sử dụng nhiều một vài tháng trở lại đây, nhưng nó vẫn còn phổ biến. Gần như mọi lần thực hiện tôi đều thấy được nó thực hiện bằng JavaScript.
Để thực hiện thay thế và có nhiều ý tưởng hơn, bạn có thể tìm kiếm ví dụ này bởi Joshua Bemenderfer .
SLIDESHOWS
Slideshows và carousels có thể được thực hiện trong pure CSS. Nhiều người có lẽ quen với việc sử dụng jQuery hơn để làm điều này.
Dưới đây là một vài ví dụ nhanh chóng từ danh sách:
DROP-DOWNS
Trên thực tế, đây có thể là phần tử UI đã thực hiện triển khai JS miễn phí trước bất kỳ điều gì khác. Khi mọi blog về thiết kế đều có đầy đủ các ý tưởng làm thế nào để có được menu drop-down với CSS. Thật an tâm để nói rằng những kỹ thuật này được hỗ trợ khá tốt.
Ở đây là một ví dụ nhanh chóng và dễ dàng trên Codepen của Andor Nagy.
MODAL WINDOWS AND IMAGE GALLERIES
Bạn có một nội dung ẩn và muốn hiển thị nội dung đó khi nhấp chuột? Hóa ra CSS cũng có thể làm được điều này. Tất nhiên có thể tạo các modal window đơn giản, nhưng cũng có thể tạo đầy đủ trên các image gallery.
Đối với modal window, có sẵn mười ví dụ ở đây và vì vậy cần nhiều ví dụ đa dạng hơn. Một trong những ví dụ về image gallery tốt nhất đã tìm thấy được là người dùng GitHub chỉ được biết đến như mas-5. Đây là một liên kết đến repo chính , và đây là một bản demo nhanh .
BUTTON AND HOVER EFFECTS
Đây có lẽ là điều mà các nhà phát triển CSS bắt đầu ngay sau menu drop-down. Các chuyên gia CSS3 có kinh nghiệm đã có nhiều năm để đưa ra nhiều hiệu ứng thú vị để áp dụng cho các button, menu, và hầu như bất cứ thứ gì sử dụng :hover để tương tác trên một trang web. Các tính năng animation được nâng cấp gần đây của HTML5 và canvas, cộng thêm sự hỗ trợ gia tăng đột ngột của SVG đã cho các nhà thiết kế rất nhiều việc để làm.
Ví dụ, Free Frontend đã biên soạn một danh sách 17 hiệu ứng CSS Hover để bạn tham khảo. Đối với các button đặc biệt, có thể kiểm tra button pack by Christophe Guerrin. Cuối cùng, muốn làm nổi bật hiệu ứng thì tham khảo ripple effect by Pau Giner.
RANDOM TYPEWRITER EFFECT
Không có một category để giải thích cho điều này, vì vậy hãy tham khảo thêm ở đây. Đây là hiệu ứng typewriter mà người dùng sử dụng JS.
KẾT LUẬN
JavaScript nên được dành riêng cho việc làm những điều mà HTML và CSS không thể. Ngoài ra, CSS có thể làm được nhiều hơn những gì mọi người mong đợi.
Đã có hàng trăm ví dụ về việc thực hiện pure CSS với các hiệu ứng JavaScript phổ biến. Hãy thử kết hợp chúng lại với nhau và điều mà chúng ta có thể nhận được đó là một số hình ảnh động khá tiên tiến và các sự tiện lợi khác. Trình duyệt sẽ tiếp tục ngày càng trở nên tốt hơn, nhanh hơn và mượt hơn.
Tuy nhiên, không phải lúc nào cũng có mặt tối ưu. JS nhiều lúc có thể phá vỡ, làm trang web trở nên xuống cấp, nội dung biến mất hoàn toàn.
Vì vậy, hãy xem một số tùy chọn pure CSS ở đây và xem thử điều gì có thể tốt cho trang web.
PARALAX
Parallax không được sử dụng nhiều một vài tháng trở lại đây, nhưng nó vẫn còn phổ biến. Gần như mọi lần thực hiện tôi đều thấy được nó thực hiện bằng JavaScript.
Để thực hiện thay thế và có nhiều ý tưởng hơn, bạn có thể tìm kiếm ví dụ này bởi Joshua Bemenderfer .
SLIDESHOWS
Slideshows và carousels có thể được thực hiện trong pure CSS. Nhiều người có lẽ quen với việc sử dụng jQuery hơn để làm điều này.
Dưới đây là một vài ví dụ nhanh chóng từ danh sách:
DROP-DOWNS
Trên thực tế, đây có thể là phần tử UI đã thực hiện triển khai JS miễn phí trước bất kỳ điều gì khác. Khi mọi blog về thiết kế đều có đầy đủ các ý tưởng làm thế nào để có được menu drop-down với CSS. Thật an tâm để nói rằng những kỹ thuật này được hỗ trợ khá tốt.
Ở đây là một ví dụ nhanh chóng và dễ dàng trên Codepen của Andor Nagy.
MODAL WINDOWS AND IMAGE GALLERIES
Bạn có một nội dung ẩn và muốn hiển thị nội dung đó khi nhấp chuột? Hóa ra CSS cũng có thể làm được điều này. Tất nhiên có thể tạo các modal window đơn giản, nhưng cũng có thể tạo đầy đủ trên các image gallery.
Đối với modal window, có sẵn mười ví dụ ở đây và vì vậy cần nhiều ví dụ đa dạng hơn. Một trong những ví dụ về image gallery tốt nhất đã tìm thấy được là người dùng GitHub chỉ được biết đến như mas-5. Đây là một liên kết đến repo chính , và đây là một bản demo nhanh .
BUTTON AND HOVER EFFECTS
Đây có lẽ là điều mà các nhà phát triển CSS bắt đầu ngay sau menu drop-down. Các chuyên gia CSS3 có kinh nghiệm đã có nhiều năm để đưa ra nhiều hiệu ứng thú vị để áp dụng cho các button, menu, và hầu như bất cứ thứ gì sử dụng :hover để tương tác trên một trang web. Các tính năng animation được nâng cấp gần đây của HTML5 và canvas, cộng thêm sự hỗ trợ gia tăng đột ngột của SVG đã cho các nhà thiết kế rất nhiều việc để làm.
Ví dụ, Free Frontend đã biên soạn một danh sách 17 hiệu ứng CSS Hover để bạn tham khảo. Đối với các button đặc biệt, có thể kiểm tra button pack by Christophe Guerrin. Cuối cùng, muốn làm nổi bật hiệu ứng thì tham khảo ripple effect by Pau Giner.
RANDOM TYPEWRITER EFFECT
Không có một category để giải thích cho điều này, vì vậy hãy tham khảo thêm ở đây. Đây là hiệu ứng typewriter mà người dùng sử dụng JS.
KẾT LUẬN
JavaScript nên được dành riêng cho việc làm những điều mà HTML và CSS không thể. Ngoài ra, CSS có thể làm được nhiều hơn những gì mọi người mong đợi.
PVS - Theo Developerdrive
