Tạo hiệu ứng đẹp cho trang web với – Animate.css

447 Views 5 Likes Comment

Một trong những tính năng tuyệt vời nhất của CSS đó chính là tạo hiệu ứng với CSS3 Animation. Ở bài trước mình đã hướng dẫn các bạn về Animation để làm đẹp website (Xem tại đây). Bài này mình sẽ hướng dẫn thêm cho các bạn sử dụng một thư viện có sẵn đó là Animate.css trước tiên ta phải biết:

Animate.css là gì?

Animate.css là một thư viện CSS (CSS Libary) được viết bởi Daniel Eden – một Designer hiện đang làm việc tại Facebook. Thư viện này cung cấp khoảng 76 hiệu ứng khác nhau giúp các developer dễ dàng tạo hiệu ứng đẹp cho trang web mà không cần phải biết quá nhiều về CSS3 Animation. Các hiệu ứng này cũng tương tự như các hiệu ứng trong phần mềm nổi tiếng Microsoft Powerpoint nên các bạn sẽ cảm thấy quen thuộc ngay thôi. Giờ thì bắt đầu tìm hiểu cách ứng dụng nó vào dự án của mình thôi.

Hướng dẫn cài đặt Animate.css

Bước 1: Nhúng thư viện Animate.css vào trong tài liệu HTML

Chúng ta sẽ nhúng file css của thư viện vào bên trong cặp thẻ <head>

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css”>

Ở đây, các bạn có thể tải trực tiếp từ Github ở đây để sử dụng phiên bản mới nhất. Hoặc sử dụng thông qua CDN. Tại thời điểm của bài viết này phiên bản mới nhất là 3.5.2.

Bước 2: Thêm class animated và hiệu ứng mong muốn vào phần tử mong muốn

Ví dụ ta có muốn thêm hiệu ứng cho phần tử div#demo có mã nguồn như sau:

<div id=”demo >This is my Example with Animate.css</div>

Ta sẽ viết lại mã nguồn như sau:

<div id=”demo” class=”animated bounce”>This is my Example with Animate.css</div>

Kết quả sẽ tương tự như khi chúng ta truy cập vào trang chủ của Animate.css tại đây. Các bạn có thể lựa chọn hiệu ứng để kiểm tra trong danh sách bên phải. Sau đó click vào Animate it ở bên trái để kiểm nghiệm.

Mặc định, hiệu ứng được gắn cho phần tử chỉ kích hoạt và chạy một lần duy nhất. Nếu muốn hiệu ứng chạy vô tận, các bạn hãy thêm class infinite cho phần tử. Ví dụ với phần tử vừa rồi, ta sẽ sửa lại một chút như sau:

<div id=”demo” class=”animated inifinite bounce”>This is my Example with Animate.css</div>

Đó là những hướng dẫn cơ bản về Animate.css mà các bạn hoàn toàn có thể thực hiện được. Còn nếu các bạn đã từng làm việc với thư viện jQuery thì càng tốt. Các bạn có thể sử dụng kết hợp hai thứ này để thực hiện một số thứ tuyệt vời!!!

Kết hợp jQuery và Animate.css

1. Tự động thêm hiệu ứng với jQuery

Tức là thay vì thêm thủ công như ví dụ đầu tiên, các bạn sẽ sử dụng jQuery để thêm hiệu ứng thông qua phương thức addClass

jQuery(‘#demo’).addClass(‘animated bounce’);

2. Thực hiện một chức năng nào đó khi hiệu ứng kết thúc

Đây là một tính năng khá hay, các bạn hoàn toàn có thể bắt được sự kiện khi nào hiệu ứng của phần tử kết thúc. Sau đó, thực hiện một hành động nào đó thông qua cách cài đặt một đoạn mã tương tự như sau:

$(‘#demo’).one(‘webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend’, function() {
alert(‘Done’); //Display alert when animation finish
});

3. Thay đổi thời gian xảy ra hiệu ứng

Trong khi sử dụng Animate.css, các bạn có thể có nhu cầu thay đổi thời gian của hiệu ứng hoặc số lần hiệu ứng xảy ra. Về cơ bản thì thư viện này được xây dựng dựa trên CSS, vì thế chúng ta nên sử dụng CSS để thực hiện. Tuy nhiên, các bạn hoàn toàn có thể sử dụng jQuery để thực hiện nếu muốn.

Đầu tiên, mặc định thời gian các hiệu ứng này xảy ra vào trong khoảng từ 0.75~1s. Và có một điều đặc biệt là bên trong nó cũng cung cấp sẵn một class có tên là ‘hinge’ giúp tăng thời gian xảy ra hiệu ứng lên 2s. Để sử dụng, các bạn chỉ cần thêm class này vào phần tử tương ứng như các ví dụ vừa rồi:

<div id=”demo” class=”animated hinge bounce”>This is my Example with Animate.css</div>

Còn nếu muốn điều chỉnh thời gian của hiệu ứng theo ý muốn, các bạn sẽ thêm một ít CSS như sau:

#demo {
animation-duration: 3s;
}

Như ví dụ trên là phần tử #demo sẽ có thời gian xảy hiệu ứng là 3s. Tương tự nếu muốn thay đổi độ trễ (animation-delay) hoặc số lần  hiệu ứng lặp lại (animation-iteration-count):

#demo {
animation-duration: 3s;
animation-delay: .3s;
animation-iteration-count: 3;
}

Kết luận: Với thư viện này, các bạn có thể thỏa sức sáng tạo, tạo ra các hiệu ứng đẹp mắt cho website của mình.

Rating: 4.0/5. From 2 votes.
Please wait...

Bạn có thể thích

Hãy bình luận chém gió đi nào. HAHA Thank!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *