Advanced Tilt Effect with Parallax Content in Vanilla JavaScript – tiltEffect

tiltEffect is a tiny JavaScript library that creates smooth, interactive parallax tilt effects using 3D perspective transformations and mouse interactions.

You can control tilt angles, transition speeds, scaling behaviors, and lighting effects through HTML data attributes or JavaScript configuration objects.

The library handles all coordinate calculations, perspective transforms, and CSS updates automatically while maintaining optimal performance through strategic use of will-change properties.

It’s ideal for building interactive UI components, portfolio projects, or learning fundamental web animation concepts.

Features:

• 3D Perspective Transforms: Applies rotateX and rotateY transforms based on cursor position within card boundaries.
• Dynamic Shine Overlay: Renders a radial gradient that tracks mouse movement, creating realistic lighting effects.
• Depth-Based Shadows: Calculates shadow offset and blur radius proportional to tilt angles for enhanced depth perception.
• Parallax Inner Content: Moves child elements along the z-axis with translateZ for layered depth effects.
• Responsive Updates: Recalculates element dimensions and positions on window resize events.

See it in action:

How to use it:

1. Download the library and include the script.js file in your HTML document.

<script src="script.js"></script>

2. Create the HTML for the tiltable element. The .tilt-card class marks the container element that receives transform styles. The .tilt-shine element renders the dynamic lighting overlay. The .tilt-card-inner wrapper contains your actual content and receives parallax transforms. The .tilt-shadow class enables dynamic shadow calculations based on tilt angles.

<div class="tilt-card tilt-shadow bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl p-8 cursor-pointer relative overflow-hidden" data-tilt data-max-tilt="15" data-speed="400">
  <div class="tilt-shine"></div>
  <div class="tilt-card-inner relative z-10">
    <div class="w-16 h-16 bg-white/20 rounded-xl flex items-center justify-center mb-4 backdrop-blur-sm">
      <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
      </svg>
    </div>
    <h3 class="text-2xl font-bold text-white mb-2">Lightning Fast</h3>
    <p class="text-blue-100">Experience blazing speed with our optimized performance engine.</p>
    <div class="mt-6 flex items-center justify-between">
      <span class="text-white/80 text-sm">Learn More →</span>
      <div class="w-12 h-12 bg-white/10 rounded-full backdrop-blur-sm"></div>
    </div>
  </div>
</div>

3. Add configuration directly to HTML elements using the following HTML data attributes.

• data-max-tilt: Sets the maximum tilt angle in degrees. The default is 15.
• data-speed: Defines the transition speed in milliseconds. The default is 300.
• data-scale: Specifies a scale factor on hover. The default is 1.
• data-glare: Set to true to enable the glare effect. The default is false.
• data-reverse: Set to true to reverse the tilt direction. The default is false.

<div class="tilt-card" 
  data-tilt
  data-max-tilt="20"
  data-speed="500"
  data-scale="1.05"
  data-glare="true"
  data-reverse="false">
</div>

4. You can also initialize tilt effects programmatically for dynamic elements or custom configuration needs.

const cardElement = document.querySelector('.my-card');
const tiltInstance = new TiltEffect(cardElement, {
  maxTilt: 20,
  speed: 400,
  scale: 1.05,
  glare: true,
  reverse: false
});

const cardElement = document.querySelector('.my-card');
const tiltInstance = new TiltEffect(cardElement, {
  maxTilt: 15,
  speed: 300,
  scale: 1,
  glare: false,
  reverse: false,
});

5. The library dispatches custom events that you can listen to for synchronized animations or state tracking.

const cardElement = document.querySelector('.my-card');
cardElement.addEventListener('tiltChange', (event) => {
  const { tiltX, tiltY, percentageX, percentageY, angle } = event.detail;
  console.log(`Tilt X: ${tiltX}, Tilt Y: ${tiltY}`);
});

6. API methods.

// Re-calc card position or dimensions. 
tiltInstance.updateElementPosition();
// Return the card to its neutral state programmatically. 
tiltInstance.reset();
// Destroy the instance to clean up event listeners and prevent memory leaks.
tiltInstance.destroy();

Related Resources:

• Tilt.js: A jQuery plugin for 3D tilt effects with extensive configuration options and parallax support.
• Atropos: A JavaScript library for stunning touch-friendly 3D parallax hover effects.
• Vanilla Tilt: A smooth 3D tilt library built with vanilla JavaScript and zero dependencies.
• CSS 3D Transforms Tutorial: Mozilla documentation covering perspective, rotateX, rotateY, and transform-style properties.

FAQs:

Q: Can I use tiltEffect without Tailwind CSS?
A: Yes. The library functions independently of any CSS framework. Tailwind classes appear only in demo examples. Replace them with your own CSS or inline styles.

Q: How do I prevent layout shifts during tilt animations?
A: Set explicit width and height on .tilt-card elements. The library calculates transforms based on these dimensions. Undefined dimensions can cause inconsistent behavior during mouse tracking.

Q: Does tiltEffect work on touch devices?
A: No. The library responds only to mouse events (mouseenter, mousemove, mouseleave).

Q: Can I animate multiple cards with different settings?
A: Yes. Each element with data-tilt receives its own TiltEffect instance with independent configuration. Set different data attributes on each card for varied behaviors.

Q: How do I reduce motion for accessibility?
A: Check for prefers-reduced-motion media query and conditionally disable tilt initialization or reduce maxTilt values for users who prefer minimal animations.