Share Thiết kế hiệu ứng hoạt hình chuyên nghiệp với thư viện Move.js

filiallion

Administrator
Staff member
Administrator
Messages
560
Points
10
Language
Tiếng Việt
Tiếp tục là một thư viện JavaScript dùng để thiết kế hiệu ứng hoạt hình chuyên nghiệp mà tôi sẽ giới thiệu với các bạn đó là thư viện Move.js. Có thể với nhiều bạn lập trình thiết kế giao diện website thì thư viện Move.js đã quen thuộc, nhưng bài viết này tôi muốn giới thiệu với các bạn mới làm quen với JavaScript hoặc chưa sử dụng qua thư viện Move.js để các bạn có thêm một lựa chọn cho việc thiết kế hiệu ứng hoạt hình.

Thư viện Move.js có thể được sử dụng cho nhiều loại dự án khác nhau như React hay website thông thường,... Các bạn có thể sử dụng các công cụ quản lý gói như Component, NPM hay tải trực tiếp tập tin thư viện về tích hợp vào website. Ở bài viết này, tôi sẽ hướng dẫn các bạn sử dụng thư viện Move.js tích hợp vào website thông thường bằng tập tin thư viện. Trước tiên, các bạn cần truy cập địa chỉ https://github.com/visionmedia/move.js để tải về thư viện Move.js và tích hợp vào website bằng dòng lệnh HTML như sau:
HTML:
<script src="path/to/move.min.js"></script>
Tiếp theo, các bạn tạo một đối tượng HTML mà các bạn muốn áp dụng hiệu ứng hoạt hình như ví dụ sau:
HTML:
<div class="move"></div>
Cuối cùng là mã lệnh JavaScript cài đặt thư viện Move.js:
JavaScript:
move('.move').to(500, 250)
             .rotate(180)
             .scale(0.5)
             .duration('3s')
             .then()
             .set('opacity', 0)
             .scale(0.1)
             .duration('0.3s')
             .end();
Các bạn có thể xem thêm về thư viện Move.js tại địa chỉ http://visionmedia.github.io/move.js.
 
Top