Share Tạo hiệu ứng chuyển động dễ dàng với thư viện jQuery Transit

[filiallion]

Language

Tiếng Việt

Với sự hỗ trợ của JavaScript, các lập trình viên đã tạo ra nhiều thư viện hiệu ứng chuyển động rất đẹp mắt, một trong số đó phải kể đến thư viện jQuery Transit mà tôi sẽ giới thiệu với các bạn ở bài viết này. Với việc thiết kế các hiệu ứng chuyển động bằng JavaScript kết hợp với các tuỳ chọn bổ sung đã giúp cho thư viện jQuery Transit tạo ra nhiều hiệu ứng khác nhau, giúp làm phong phú thêm thư viện hiệu ứng của các bạn.

Để sử dụng thư viện jQuery Transit, các bạn cần tích hợp thư viện jQuery cũng như thư viện jQuery Transit được tải về từ địa chỉ https://github.com/rstacruz/jquery.transit với nội dung mã lệnh HTML như sau:

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

Các bạn thiết kế thành phần cần áp dụng hiệu ứng chuyển động như ví dụ sau:

<div id="transit"></div>

Bây giờ, các bạn cài đặt hiệu ứng chuyển động như ví dụ sau:

$(function() {
    $('#transit').css({
        translate: [30, 60]
    });
});

Với ví dụ trên, các bạn có thể nhận thấy là thư viện jQuery Transit chỉ hỗ trợ thêm cho các phương thức của jQuery, giúp cho việc sử dụng các phương thức này thêm dễ dàng, đơn giản hơn nhưng vẫn tạo ra được các hiệu ứng chuyển động đẹp mắt.

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