Hoạt hình hàng đầu 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 cho CSS3 Animation. Trước đây, mỗi khi tạo hiệu ứng cho trang web, chúng ta phải nhờ đến sự trợ giúp của JavaScript. Thì giờ đây, công việc này đã có bất kỳ 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 đủ các kỹ thuật với các nhà phát triển web. 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 nhà phát triển web đơn giản hóa việc tạo hiệu ứng cho trang web

Nội dung chính Hiển thị

• sinh động. css là gì?
• Hướng dẫn cài đặt Animate. css
• Kết hợp jQuery và Animate. css
• 1. Auto add effect with jQuery
• 2. Thực hiện bất kỳ chức năng nào khi hiệu ứng kết thúc
• 3. Change time in effect
• Kết luận
• Video liên quan

sinh động. css là gì?

sinh động. css is an CSS library (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 76hiệu ứng khác nhau giúp các nhà phát triển 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 của 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 project 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 tệp css của thư viện vào bên trong cặp thẻ

Tại đây, các bạn có thể tải trực tiếp từ Github tại đây để sử dụng phiên bản mới nhất. Hoặc sử dụng thông tin 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 lớp hoạt hình và hiệu ứng mong muốn vào phần tử mong muốn

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

Đây là ví dụ của tôi với Animate. css

Ta will write back source code as after

Đây là ví dụ của tôi với Animate. css

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 đó nhấp vào Animate it ở bên trái để kiểm tra

Mặc dù vậy, 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 lớp vô tận 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

Đây là ví dụ của tôi với Animate. css

Đó 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 thứ hai này để thực hiện một số tuyệt vời

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

1. Auto add effect with 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 (tung hoạt hình);

2. Thực hiện bất kỳ chức năng nào khi hiệu ứng kết thúc

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

$(#demo). one(webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend, function() { alert(Done); //Hiển thị cảnh báo khi hoạt ảnh kết thúc });

3. Change time in effect

Trong khi sử dụng Animate. css, các bạn có thể yêu 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ủa các hiệu ứng này xảy ra trong khoảng từ 0. 75~1 giây. Và có một điều đặc biệt là bên trong nó cũng cung cấp sẵn một lớp có tên là bản lề 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 lớp này vào phần tử tương ứng như ví dụ vừa rồi

Đây là ví dụ của tôi với Animate. css

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 { thời lượng hoạt ảnh. 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 { thời lượng hoạt ảnh. 3s; . . 3s; . 3;
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ì nữa 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 không chắc sẽ làm hài lòng các nhà phát triển web 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 quá trình tạo hiệu ứng cho trang web của mình