I - Giới thiệu:
Tác giả :
Daniel T. Eden
Đang làm việc cho DropBox ở mảng thiết kế... các bạn có thể đọc thêm về anh ấy tại website :
http://daneden.me/
- Animate.css đúng như tên gọi cũng chỉ là file css bình thường chứa sẵn animation bên trong .
Theo tác giả :
animate.css is a bunch of cool, fun, and cross-browser
animations for you to use in your projects. Great for emphasis, home
pages, sliders, and general just-add-water-awesomeness.
Hiệu ứng chuyển động mượt mà, nhiều hiệu ứng để chọn lựa, hỗ trợ Cross-browser tốt..
Mình đã test trên chrome, safari, firefox...iPad, iPhone, Android đều hiển thị chuyển động rất bắt mắt..
II - Cách sử dụng :
Thật ra thì sử dụng cũng rất đơn giản..
Trong project của mình là game
[What was the last fruit ?] mình dùng để tạo hiệu ứng cho ảnh... và theo như docs trên
github thì mình chỉ dùng jQuery và addClass vào thì animate sẽ được kích hoạt ngay lập tức...
Đầu tiên là bạn tải về file animate.css trước... Đặt link trong thẻ
<head>
Tải tại đây : animate.css
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
Với jQuery tác giả có ví dụ như thế này :
$('#yourElement').addClass('animated bounceOutLeft');
animated là bắt buộc tiếp theo là tên của hiệu ứng các bạn có thể tham khảo bên dưới...
...addClass('animated')
Danh sách hiệu ứng trong animate.css khá nhiều mình không liệt kê ra hết bên dưới :
- Bounce - hiệu ứng nảy, tưng tưng tưng :3
- Flash - chớp
- Pulse - @@
- Rubberband - Kéo dãn như dây cao su
- Shake - rung, lắc
- Swing - đung đưa
- ..... còn nhiều nữa
Các bạn có thể xem và lấy tên của hiệu ứng tại trang
http://daneden.github.io/animate.css/
Ngoài ra animate.css còn hỗ trợ hiệu ứng [Entrances] tạm dịch là vào và [Exits] ra...
Ví dụ :
bounceOutRight - nảy ra ngoài bên trái.. khi hết animated thì nó "mất" tiêu luôn ngược lại thì
bounceInRight từ bên phải nảy vào trong :D
Để dễ hình dung hơn về cách sử dùng mình có tạo 1 Pen trên Codepen.io và các bạn có thể thử thoải mái tại đây :
http://codepen.io/bmtriet/pen/LluEv
** Lưu ý: ký tự đầu không viết hoa nhé
--The End -- See ya !!!
Chi tiết
