Share Tạo hiệu ứng parallax khi hover với thư viện Tilt.js

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Thư viện Tilt.js sẽ giúp các bạn tạo hiệu ứng parallax đẹp khi hover lên đối tượng chỉ với khai báo rất đơn giản. Ngoài thư viện Tilt.js mà tôi giới thiệu với các bạn ở bài viết này thì các bạn còn có nhiều lựa chọn khác như thành phần parallax trong thư viện UIkit chẳng hạn.

Thư viện Tilt.js được viết bằng jQuery nên các bạn phải tích hợp thư viện jQuery vào website trước khi sử dụng thư viện Tilt.js. Các bạn có thể tải thư viện jQuery tại địa chỉ https://jquery.com/download và tải thư viện Tilt.js tại địa chỉ https://github.com/gijsroge/tilt.js. Ngoài ra, các bạn có thể xem ví dụ tại địa chỉ https://gijsroge.github.io/tilt.js.

Các bạn tích hợp thư viện Tilt.js vào website với dòng mã lệnh như sau:
HTML:
<script src="path/to/tilt.jquery.js"></script>
Và sử dụng hiệu ứng parallax khi hover lên đối tượng như ví dụ sau:
HTML:
<div data-tilt>Gextend</div>
Các bạn có thể tìm hiểu thêm về thư viện Tilt.js tại địa chỉ https://github.com/gijsroge/tilt.js.
 
Back
Top