Share Tạo hiệu ứng hover 3D với thư viện jQuery Hover3d

filiallion · 01/11/2021

Tôi tiếp tục giới thiệu với các bạn một thư viện tạo hiệu ứng hover khác đó là jQuery Hover3d. Với tên gọi jQuery Hover3d, các bạn có thể biết được đây là một thư viện JavaScript được phát triển trên nền tảng jQuery. Điểm khác biệt của thư viện jQuery Hover3d đó là tạo các hiệu ứng hover mang phong cách 3D, có chiều sâu. Hiện tại, thư viện jQuery Hover3d cung cấp khá ít các hiệu ứng hover nhưng với các tuỳ chọn cho hiệu ứng, các bạn cũng có thể tạo ra một số hiệu ứng hover khác nhau đủ đáp ứng cho thiết kế của các bạn.

Các bạn tải thư viện jQuery Hover3d tại địa chỉ https://github.com/ariona/hover3d và tích hợp vào website với nội dung mã lệnh HTML như sau:

HTML:

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

Sau khi tích hợp thư viện jQuery Hover3d vào website, các bạn đã có thể tạo hiệu ứng hover 3D cho website của mình như ví dụ tại địa chỉ https://ariona.github.io/hover3d/index.html. Các ví dụ này, các bạn lưu ý tới các thành phần HTML được thiết kế mẫu để áp dụng hiệu ứng vào website của các bạn một cách linh động. Riêng về cài đặt mã lệnh JavaScript, các bạn tham khảo khối mã lệnh sau:

JavaScript:

$(function() {
    $('.hover3d').hover3d({
        selector: '.hover3d-selector',
        shine: true,
        sensitivity: 20
    });
});

Các bạn có thể tìm hiểu thêm về thư viện jQuery Hover3d tại địa chỉ https://ariona.github.io/hover3d.

Share Tạo hiệu ứng hover 3D với thư viện jQuery Hover3d

filiallion

Administrator