Notifications
Cool Marketing
Lorem ipsum dolor sit amet
Awesome packages
Lorem ipsum dolor sit amet
what a packages
Lorem ipsum dolor sit amet
Cool Marketing
Lorem ipsum dolor sit amet
Awesome packages
Lorem ipsum dolor sit amet
what a packages
Lorem ipsum dolor sit amet
Parallax hover tilt effect
Basic usage:
<script src="vendors/vanilla-tilt.min.js"></script>
Add the js-tilt class to any element. A gentle tilt with no extras — clean baseline.
Perspective depth
Shallow perspective:
A lower perspective value creates a more dramatic 3D depth. Compare this card's movement to the basic one above.
VanillaTilt.init(element, {
perspective: 300
})
Glare effect
Light reflection:
Adds a light reflection that follows the cursor. Control intensity with data-tilt-max-glare (0 to 1).
VanillaTilt.init(element, {
glare: true, "max-glare": 0.5
})
Sticky tilt (no reset)
Stays tilted:
The element keeps its last tilt position when the cursor leaves. Move your mouse away to see it stay.
VanillaTilt.init(element, {
reset: false
})
Scale on hover
Zoom effect:
The element subtly grows when hovered. Combined with minimal tilt, it draws attention to the content.
VanillaTilt.init(element, {
scale: 1.06
})
Horizontal only (X-axis)
Lock to one axis:
Restricts tilt to horizontal movement only. The image rocks left and right but never up or down.
VanillaTilt.init(element, {
axis: "x"
})
Vertical only (Y-axis)
Lock to one axis:
Restricts tilt to vertical movement only. The image tips forward and back but never side to side.
VanillaTilt.init(element, {
axis: "y"
})
