Share Sử dụng thư viện Velocity để tạo hiệu ứng chuyển động

filiallion · 10/18/2021

Tôi giới thiệu với các bạn một thư viện tạo hiệu ứng chuyển động chuyên nghiệp khác đang được rất nhiều website lớn sử dụng đó là Velocity. Ngoài các hiệu ứng được thiết kế rất đẹp, thư viện Velocity còn cung cấp một bộ tài liệu hướng dẫn rất chi tiết cho các bạn lập trình viên tại địa chỉ https://github.com/julianshapiro/velocity/wiki.

Với việc hỗ trợ rất nhiều thuộc tính tuỳ chọn giúp cho các bạn thiết kế hiệu ứng có thể kết hợp các tuỳ chọn này để tạo ra các hiệu ứng chuyển động khác nhau tuỳ vào yêu cầu dự án. Thư viện Velocity cũng được thiết kế cho các dự án React, các bạn có thể sử dụng công cụ NPM để tải về tích hợp vào dự án của các bạn.

Ở bài viết này, tôi sẽ hướng dẫn các bạn sử dụng thư viện Velocity cho dự án website được thiết kế giao diện thông thường bằng HTML. Trước tiên, các bạn cần tải về thư viện Velocity tại địa chỉ https://github.com/julianshapiro/velocity và tích hợp vào website với dòng mã lệnh HTML như sau:

HTML:

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

Bây giờ, các bạn có thể tham khảo cài đặt thư viện Velocity sau đây:

JavaScript:

document.querySelector('.velocity').velocity(
    {
        width: '500px'
    },
    {
        easing: 'swing',
        duration: 300
    }
);

Trên đây là một ví dụ đơn giản sử dụng thư viện Velocity để tạo hiệu ứng chuyển động. Các bạn có thể tham khảo thêm về thư viện Velocity tại địa chỉ https://github.com/julianshapiro/velocity/wiki.

Share Sử dụng thư viện Velocity để tạo hiệu ứng chuyển động

filiallion

Administrator