Hiệu ứng Parallax khi Hover với Tilt.js

Bài viết này hướng dẫn cách tạo hiệu ứng Parallax khi Hover sử dụng thư viện jQuery Tilt.js. Bạn có thể áp dụng ở Landing Page hoặc Portfolio để tăng độ chuyên nghiệp.

Xem demo

Sử dụng

Bạn cần jQuery và Tilt.js vào trước </body>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dest/tilt.jquery.min.js"></script>

Để sử dụng, bạn gọi data-tilt vào thẻ cần hiệu ứng, ví dụ.

<div class="tilt-demo" data-tilt></div>

Thêm transform-style: preserve-3d; và transform: perspective(300px); vào CSS.

.tilt-demo {
    width: 300px;
    height: 400px;
    display: block;
    background-color: #9e21ff;
    background-image: linear-gradient(135deg, #ff008a 0, #101c25 100%);
    box-shadow: 0 3px 47px rgba(0, 0, 0, 0.2);
    transform-style: preserve-3d;
    transform: perspective(300px);
    margin: 50px auto;
}

Tham khảo thêm: