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

tranh treo tuong dung dua theo gio bang css

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
bounceflashpulserubberBand
shakeheadShakeswingtada
wobblejellobounceInbounceInDown
bounceInLeftbounceInRightbounceInUpbounceOut
bounceOutDownbounceOutLeftbounceOutRightbounceOutUp
fadeInfadeInDownfadeInDownBigfadeInLeft
fadeInLeftBigfadeInRightfadeInRightBigfadeInUp
fadeInUpBigfadeOutfadeOutDownfadeOutDownBig
fadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBig
fadeOutUpfadeOutUpBigflipInXflipInY
flipOutXflipOutYlightSpeedInlightSpeedOut
rotateInrotateInDownLeftrotateInDownRightrotateInUpLeft
rotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRight
rotateOutUpLeftrotateOutUpRighthingejackInTheBox
rollInrollOutzoomInzoomInDown
zoomInLeftzoomInRightzoomInUpzoomOut
zoomOutDownzoomOutLeftzoomOutRightzoomOutUp
slideInDownslideInLeftslideInRightslideInUp
slideOutDownslideOutLeftslideOutRightslideOutUp
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.

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