Parallax Tilt Card

Card tilts 3D and layers shift by depth with the cursor.

NEDDEVstudio

How to use it

Paste the HTML where the components should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- Parallax Tilt Card · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="ptc-stage"><div class="ptc-card"><span class="ptc-l" data-z="20">NEDDEV</span><span class="ptc-l ptc-sub" data-z="40">studio</span><span class="ptc-glow"></span></div></div>
</div>

/* Parallax Tilt Card · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.ptc-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:800px;background:#0c0c14}
.ptc-card{position:relative;width:62%;aspect-ratio:4/3;border-radius:18px;background:linear-gradient(145deg,#1a1f33,#0a0d18);transform-style:preserve-3d;transition:transform .2s ease-out;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #232a44}
.ptc-l{font-family:'Boldonse','Switzer',sans-serif;color:#fff;font-size:30px;letter-spacing:-.02em;transform:translateZ(20px)}
.ptc-sub{font-size:13px;color:#F5480F;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.2em;margin-top:6px}
.ptc-glow{position:absolute;inset:0;border-radius:18px;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(245,72,15,.25),transparent 50%);pointer-events:none}

// Parallax Tilt Card · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.ptc-stage')||root;var card=root.querySelector('.ptc-card'),glow=root.querySelector('.ptc-glow');var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;if(reduce)return;root.addEventListener('mousemove',function(e){var r=card.getBoundingClientRect();var px=(e.clientX-r.left)/r.width-.5,py=(e.clientY-r.top)/r.height-.5;card.style.transform='rotateY('+(px*16)+'deg) rotateX('+(-py*16)+'deg)';glow.style.setProperty('--gx',(px+.5)*100+'%');glow.style.setProperty('--gy',(py+.5)*100+'%');});root.addEventListener('mouseleave',function(){card.style.transform='rotateY(0) rotateX(0)';});
}
init(document.querySelector('.jouw-container'));

More components

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →