6 hiệu ứng JS có thể thực hiện được với pure CSS

Thảo luận trong 'Web - Internet' bắt đầu bởi PVS, 14/04/2018.

  1. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    9,579
    Đã được thích:
    6,329
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    SV
    Nơi ở:
    Huế
    Web:
    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.

    Pure-CSS-Star-Rating-Component.png

    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 Hãy đăng nhập hoặc đăng ký để xem được links .

    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:
    • Hãy đăng nhập hoặc đăng ký để xem được links
    • Hãy đăng nhập hoặc đăng ký để xem được links
    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.

    Hãy đăng nhập hoặc đăng ký để xem được links

    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 Hãy đăng nhập hoặc đăng ký để xem được links 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 Hãy đăng nhập hoặc đăng ký để xem được links , và đây là một Hãy đăng nhập hoặc đăng ký để xem được links 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 Hãy đăng nhập hoặc đăng ký để xem được links để bạn tham khảo. Đối với các button đặc biệt, có thể kiểm tra Hãy đăng nhập hoặc đăng ký để xem được links. Cuối cùng, muốn làm nổi bật Hãy đăng nhập hoặc đăng ký để xem được linksiệu ứng thì tham khảo Hãy đăng nhập hoặc đăng ký để xem được links.

    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 Hãy đăng nhập hoặc đăng ký để xem được links. Đâ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
     

Chia sẻ trang này

Đang tải...