How to use it
1. Add the script
<script src="tilt.js"></script>
2. Add one attribute to your card
<div class="card" data-tilt> Your content </div>
3. Add glare and floating layers
The glare is a soft light that follows the mouse. Children with data-tilt-depth lift off the card, which gives the real 3D feeling.
<div class="card" data-tilt data-tilt-glare data-tilt-max="14"> <h3 data-tilt-depth="60">Floats high</h3> <p data-tilt-depth="30">Floats a little</p> </div>
All options
| Attribute | Default | What it does |
|---|---|---|
data-tilt | Switches the effect on for this element. | |
data-tilt-max="14" | 12 | The strongest angle in degrees. Use 5 to 8 for a calm look. |
data-tilt-scale="1.05" | 1.03 | How much the card grows while hovered. Use 1 for no zoom. |
data-tilt-glare | off | Adds the moving light reflection. |
data-tilt-depth="40" | Goes on a child. Lifts it this many pixels above the card. |
Tips for a good result
- Give the card a background and rounded corners. The glare takes the same corner radius automatically.
- Keep the angle small on large cards. A wide card at 20 degrees looks wild. 6 to 10 is enough.
- Do not put it on everything. It works best on three or four cards per page.
What happens on phones
Touch screens have no hover, so the cards stay flat there. Scrolling is never blocked. Visitors who turned off animations in their system also get flat cards.
Common questions
The floating text is cut off. Why?
The card has overflow: hidden. Remove it from the card, or lower the depth value.
Can I use it on images?
Yes. Wrap the image in a div with data-tilt. The image tilts with it.
What is in the download
tilt.jsthe script, about 2 KBindex.htmlanddemo.cssthe demo page you see aboveREADME.txtandLICENSE.txtthe short guide and the MIT licence
Licence
MIT licence. Use it in personal and commercial projects, change it as you like. A link back is welcome and not required.