Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > HTML/CSS > [Share code] hướng dẫn dùng thư viện animate.css tạo hiệu ứng đẹp
[Share code] hướng dẫn dùng thư viện animate.css tạo hiệu ứng đẹp
Nguyễn Trung Hiếu
Share Code Web Company 2018

[Share code] hướng dẫn dùng thư viện animate.css tạo hiệu ứng đẹp

Thư viện Animate.css là bộ thư viện bằng CSS giúp cho các bạn thiết kế web đơn giản và đẹp hơn. Hỗ trợ nhiều trình duyệt, tạo nhanh các hiệu ứng đẹp. Đặc biệt không sử dụng javascript nặng nề.

Giới thiệu Animate.css

Animate.css – Là một bộ thư viện về các hiệu ứng bằng CSS của tác giả Dane Den. Bộ thư viện này sẽ hỗ trợ anh em trong việc thiết kế web cực kỳ mạnh mẽ. Giúp giảm thiểu công thiết kế CSS chỉ bằng cách sử dụng các class được làm sẵn. Cái này hơi giống với Bootstrap – hỗ trợ lên khung, bố cục. Còn Animate.css hỗ trợ tạo ra các hiệu ứng cực kỳ đẹp mà không cần sử dụng Javascript – yếu tố gây ra load web chậm.

Cài đặt Animate.css

Thông qua Bower:
$ bower install animate.css --save
Thông qua npm:
$ npm install animate.css --save
Hoặc trực tiếp code tại Github

Animate.css cơ bản

Chỉ cần 3 bước đơn giản để sử dụng thư viện này:

Bước 1. Thêm thư viện stylesheet vào phần tiêu đề.

Cụ thể là trong thẻ <head> bằng một trong các cách sau đây:
– Sử dụng trực tiếp:

– Sử dụng phiên bản remote taị host CDNJS:

– Hoặc có thể tự tạo mã băm SRI để đảm bảo tính toàn vẹn của tập tin.
Bạn có thể tham khảo mã băm SRI tại đây, hoặc đợi mình viết một bài về mã băm SRI này sau nhé.

Bước 2. Thêm class khi thiết kế

Để sử dụng bạn chỉ cần thêm class animated vào bất cứ phần tử, thẻ tag HTML nào bạn muốn có hiệu ứng.
Hoặc bạn có thể sử dụng jQuery để thêm hiệu ứng từ Animate.css

hoặc phát hiện khi nào kết thúc hiệu ứng để chuyển sang hiệu ứng tiếp theo bằng jQuery:

Xem video hướng dẫn sử dụng Animate.css với jQuery

Bước 3. Sử dụng hiệu ứng đúng

Cuối cùng là thêm các class để gọi hiệu ứng mong muốn. Dưới đây là bảng tên class (hiệu ứng) bạn có thể sử dụng:

Class Name
bounce flash pulse rubberBand
shake headShake swing tada
wobble jello bounceIn bounceInDown
bounceInLeft bounceInRight bounceInUp bounceOut
bounceOutDown bounceOutLeft bounceOutRight bounceOutUp
fadeIn fadeInDown fadeInDownBig fadeInLeft
fadeInLeftBig fadeInRight fadeInRightBig fadeInUp
fadeInUpBig fadeOut fadeOutDown fadeOutDownBig
fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig
fadeOutUp fadeOutUpBig flipInX flipInY
flipOutX flipOutY lightSpeedIn lightSpeedOut
rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft
rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight
rotateOutUpLeft rotateOutUpRight hinge jackInTheBox
rollIn rollOut zoomIn zoomInDown
zoomInLeft zoomInRight zoomInUp zoomOut
zoomOutDown zoomOutLeft zoomOutRight zoomOutUp
slideInDown slideInLeft slideInRight slideInUp
slideOutDown slideOutLeft slideOutRight slideOutUp
heartBeat

Ví dụ:

Một số hiệu ứng Animate đẹp và ứng dụng

Tạo slider có hiệu ứng đẹp sử dụng Owl Carousel và thư viện Animate.css

See the Pen Owl carousel and Animate.css by Dimbilalaina RAMANGALAHY (@radimby) on CodePen.

Một CSS Slides with Animate.css khác (bấm nút Go to Slide 2 để thấy hiệu ứng) :

See the Pen CSS Slides with Animate.css by Tim Robert-Fitzgerald (@terf) on CodePen.

Tạo Fade in Sticky Navigation sử dụng animate.css (cuộn chuột xuống sẽ thấy hiệu ứng):

See the Pen Fade in Sticky Navigation using animate.css by Patrick Little (@patricklittle) on CodePen.

Bootstrap Carousel và Animate.css

See the Pen Bootstrap Carousel and Animate.css by Maria Antonietta Perna (@antonietta) on CodePen.

Và một vài cách sử dụng khác (cuộn chuột xuống sẽ thấy hiệu ứng):

See the Pen Animate.css (Part 4) by Hudson Taylor (@Hudson_Taylor11) on CodePen.

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Leave a comment

Bạn phải Đăng nhập để tham gia bình luận.

https://sharecodeweb.net/?s={search_term_string}

Blog Stats

  • 5.714 hits
%d bloggers like this: