Animate.css – Tạo hiệu ứng đẹp mắt cho trang web với CSS
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. Trước đây, mỗi khi tạo hiệu ứng cho trang web, chúng ta phải nhờ đến sự giúp sức của JavaScript. Thì giờ đây, công việc này đã phần nào được đơn giản hóa bởi CSS. Mặc dù đây là một tính năng tuy thú vị ...
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. Trước đây, mỗi khi tạo hiệu ứng cho trang web, chúng ta phải nhờ đến sự giúp sức của JavaScript. Thì giờ đây, công việc này đã phần nào được đơn giản hóa bởi CSS. Mặc dù đây là một tính năng tuy thú vị nhưng cũng đầy thách thức với các web developer. Dường như hiểu được điều đó, Daniel Eden đã cho ra đời một thư viện mang tên Animate.css – một thư viện giúp các web developer đơn giản hóa việc tạo hiệu ứng cho trang web.
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 sẽ không còn gặp khó khăn gì nhiều khi muốn thêm hiệu ứng cho trang web của mình. Đương nhiên, với khoảng 76 hiệu ứng này có thể sẽ không phải là nhiều và cũng chưa chắc làm hài lòng các web developer khó tính. Nhưng về cơ bản, nó cũng đáp ứng khá nhiều yêu cầu cho một hiệu ứng bắt mắt mà cách sử dụng lại đơn giản. Hy vọng thư viện Animate.css này sẽ hữu ích cho các bạn trong việc tạo hiệu ứng cho trang web của mình.
