Parallax Tilt Effect On Hover – SimpleTilt.js

Category: Animation , Javascript | April 28, 2021
Views Total:1,155 views
Official Page:Go to website
Last Update:April 28, 2021


Parallax Tilt Effect On Hover – SimpleTilt.js


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>

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