Share Tạo hiệu ứng hoạt hình dễ dàng với thư viện Animatelo

[filiallion]

Language

Tiếng Việt

Trước đây tôi có giới thiệu với các bạn thư viện CSS Animate.css dùng để tạo các hiệu ứng hoạt hình đẹp mắt rất dễ sử dụng tại bài viết "Tạo hiệu ứng đẹp mắt với thư viện Animate.css". Bài viết này tôi giới thiệu với các bạn một thư viện tương tự gần như giống hoàn toàn các hiệu ứng của Animate.css nhưng được phát triển bằng JavaScript và hoàn toàn tương thích với tất cả các trình duyệt phiên bản cũ trước đây, thư viện tôi đang nói đến đó là Animatelo.

Các bạn có thể truy cập website của Animatelo để xem toàn bộ các hiệu ứng mà thư viện này cung cấp tại địa chỉ https://gibbok.github.io/animatelo.

Để sử dụng thư viện Animatelo, các bạn tải thư viện tại địa chỉ https://cdn.rawgit.com/gibbok/animatelo/1.0.1/dist/animatelo.min.js. Thư viện Animatelo đơn giản chỉ có một tập tin JavaScript như vậy. Các bạn tích hợp thư viện Animatelo vào website với dòng mã lệnh HTML như sau:

<script src="path/to/animatelo.min.js"></script>

Và tạo một hiệu ứng hoạt hình đẹp mắt như ví dụ sau:

<h1 id="animatelo">Welcome to Gextend</h1>

Tất nhiên để hiệu ứng hoạt động, các bạn cần phải cài đặt lệnh JavaScript để thư viện Animatelo thực thi hiệu ứng như sau:

window.animatelo.flip('#animatelo');

Các bạn có thể tìm hiểu thêm về thư viện Animatelo tại địa chỉ https://github.com/gibbok/animatelo.