tilt.js tutorial
HTML Javascript

Create 3D Parallax Effect in 5 Minutes – Tilt.js Tutorial

In this post we’ll talk about a small but super useful JavaScript library call tilt.js which let you create a 3D tilt effect easily with literally just 1 line of code. Also learn how to create awesome effect such as parallax and reflection as well. Ready? Let’s check it out!

Tilt.js vs Vanilla-Tilt.js

There are 2 versions of tilt.js. The first and original version is tilt.js which is jQuery dependent and other one is vanilla tilt.js which has no dependencies. In this tutorial, we’re going to use vanilla version. You can download the code from the official project website or github or use npm install command.

Here is the example page that we’re going to work on. (See tutorial on how I create these 3 cards from pure CSS)

Here is the html code of the page. There are 3 cards on the page so I’m going to collapse the code to make it easier to understand.

<div class="card"> ... </div>
<div class="card"> ... </div>
<div class="card"> ... </div>

Setting up tilt.js is very easy. Just include the library and that’s it. No need to initialize anything.

<script src="vanilla-tilt.min.js"></script>

And to add the tilt effect, just add data-tilt attribute to the element you want. In this case, we’ll add it to the card div.

<div class="card" data-tilt> ... </div> 
<div class="card" data-tilt> ... </div> 
<div class="card" data-tilt> ... </div>

That’s it let’s see the result

Customizing Tilt.js

Now you can customize the tilt effect by adding more attribute next to the data-tilt. For example, you can set the perspective to control how much the the tilt effect should be or you can create the scale effect along with tilt.

So Let’s try adding some scale effect. I’m going to add 10 percent scale to the first card.

<div class="card" data-tilt data-tilt-scale="1.1" > ... </div>

For the glare effect, we can add them pretty easily using data-tilt-glare attribute. We can control the glare value using data-tilt-max-glare. I’ll set it to 50 percent for this example.

<div class="card" data-tilt data-tilt-glare data-tilt-max-glare="0.5">

tilt.js glare border radius tutorial

Now the problem is with adding glare effect is you’ll see the glare sharp edge if the element has border-radius.

tilt.js glare edge

To fix this, we’ll add the same border-radius amount as your element to the js-tilt-glare element.

.js-tilt-glare {
  border-radius: 18px;
}

You can find full list of option from the project page.

tilt.js option tutorial

Creating Parallax

There are lots of customizable options with tilt.js but the coolest feature that I really like is parallax. Let’s see how we add them

First, set the transform-style of the card element to preseved-3d. Then set the perspective value, for this tutorial we’ll use 1000px but you change it as you like.

.card {
  transform-style: preserve-3d;
  transform: perspective(1000px);
}

Then add some small translateZ to the child element that you want to create a parallax effect. for this tutorial, I’m going to add the effect to the text on the card.

.card-text {
  transform: translateZ(30px);
}

Here is the result.

tilt.js scale

Tilt Programmatically

Now if you want to add tilt effect programmatically instead of using attribute then you can use the JavaScript.

After the element was loaded, call VanilllaTilt.init then use document.querySelectorAll to select all the elements you need. Then provide the option object if needed.

<script>
  VanillaTilt.init(document.querySelectorAll(".card"),{
    glare: true,
    reverse: true,
    "max-glare": 0.5
  });
</script>

You download the source code of this project here.

Hope you guys enjoy. If you love this and want to see more dev tips and tutorials, don’t forget to sub our YouTube Channel to stay tuned!

Written By

Leave a Reply

Your email address will not be published. Required fields are marked *

error: