THEMETRIAL

Parallax Tilt Effect On Hover – SimpleTilt.js

Author:luankohl
Views Total:0 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="https://www.cssscript.com/./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,
});


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.