Share Tạo hiệu ứng hoạt hình đẹp mắt với thư viện anime.js

filiallion · 04/28/2020

Hiệu ứng hoạt hình trên website hiện nay đang được sử dụng khá phổ biến bởi khả năng tạo chuyển động đẹp, dễ gây chú ý cho người sử dụng. Các bạn lập trình front-end có thể sử dụng CSS để tạo hiệu ứng hay sử dụng JavaScript để nâng cao các hiệu ứng. Bài viết này tôi cũng giới thiệu với các bạn một thư viện JavaScript dùng để tạo hiệu ứng hoạt hình rất đẹp mắt đó là anime.js.

Mặc dù anime.js là một thư viện JavaScript nhưng việc sử dụng nó lại rất đơn giản, cho dù các bạn là người mới bước chân vào lĩnh vực web cũng có thể dễ dàng sử dụng. Ngoài ra, anime.js còn hỗ trợ cho cả React với rất nhiều hiệu ứng nhưng lại rất nhẹ, chạy mượt, đây là một ưu điểm rất đáng quan tâm so với các thư viện tạo hiệu ứng hoạt hình khác được viết bằng JavaScript.

Để sử dụng thư viện anime.js, các bạn tải tại địa chỉ https://github.com/juliangarnier/anime hoặc sử dụng NPM với dòng lệnh:

Code:

npm install animejs --save

Các bạn tích hợp thư viện anime.js vào website với dòng mã lệnh HTML như sau:

HTML:

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

Bây giờ, các bạn thử tạo hiệu ứng như ví dụ sau:

JavaScript:

anime({
    targets: 'div',
    translateX: 250
});

Trên đây chỉ là một hiệu ứng đơn giản, các bạn có thể tìm hiểu tất cả về thư viện anime.js tại địa chỉ https://animejs.com/documentation.

Share Tạo hiệu ứng hoạt hình đẹp mắt với thư viện anime.js

filiallion

Administrator