Parallax Tilt Effect On Hover – SimpleTilt.js

Category: Animation , Javascript | April 28, 2021
Author: luankohl
Views Total: 107 views
Official Page: Go to website
Last Update: April 28, 2021
License: MIT

Preview:

Parallax Tilt Effect On Hover – SimpleTilt.js

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:

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,
});

You Might Be Interested In:


Leave a Reply