Parallax Tilt Effect On Hover – SimpleTilt.js

Preview:

Description:

SimpleTilt.js is a tiny element movement JavaScript that applies a subtle 3D parallax tilt effect to any element using CSS3 transforms and perspective.

See Also:

• Interactive Parallax Tilt Effect In Vanilla JavaScript – vanilla-tilt.js
• Parallax Hover Tilt Effect In Vanilla JavaScript – universal-tilt.js
• Mobile-friendly Parallax tilt Effect In jQuery – parallaxtilt
• Interactive Parallax tilt Effect Using jQuery – tilt.js

How To Use It:

1. Insert the SimpleTilt.js JavaScript library into the HTML document.

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

2. Add tilt elements to the document.

<div class="tilter">
  <h2 class="fx3d">CSSScript</h2>
</div>

3. Initialize the SimpleTilt.js on the element and done.

window.addEventListener('load', () => {
  tilter('.tilter', {
    fx3d: true, // enables fx3d class
    fxDistance: 70, // distance in px
  });
});

4. Config the tilt effect perspective. Default: 400.

tilter('.tilter', {
  perspective: 600,
});

5. Determine the tilt size. Default: 4.

tilter('.tilter', {
  maxTilt: 5,
});

6. Determine whether to maintain the tilt after mouse leave. Default: false.

tilter('.tilter', {
  mantain: true,
});