hello and welcome to red stapler channel in this episode we will talk about small
but super useful JavaScript library called tilt.js which lets you create a
3D tilt defect so easily with literally just one line of code also learn how to create
awesome effects such as parallax and glam reflection as well ready let's check it out
there are two 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 are
going to talk about vanilla version first you can download the code from github or project website
or use npm install command here is the example page that we are going to work on
you can find tutorial on how i create these three cards from pure css in the link below here is the
html code of the page there are three cards on the page so i'm going to collapse the code to make it
easier to understand now setting up tilt.js is very easy just include the library and that's
it no need to initialize anything 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 that's it let's see the result
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 tilt effect should be
or you can create the scale effect along with the tilt so let's try adding some scale effect
i'm going to add 10 percent scale to the first card
i will also add data to to other cards as well
there are lots of customizable options with two chairs but the coolest features that i
really like are parallax and glare friction let's see how we add them
for the glare effect we can add them pretty easy using data-tilt-glare attribute we can
control declare value using data-tilt-max-glare i will set it to 50 percent for this example
now the problem is you will see the glare sharp edge if the element has border-radius to fix
this we'll add the same border radius amount as your element to the js-tilt-glare element
next we'll work on the parallax first set the transform style of the card element to preserve 3d
then set the perspective value for this example we'll use 1000 pixels but you can change it as you
like 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
and that's it let's see result
now if you want to add tilt effects programmatically instead of using attribute
then you can use javascript first call vanilla tube.int
then use document query selector all to select all the elements you need
then provide the option object
for example i'm going to set the glare the reverse tilt option and the 50 percent max glare
so that's all for this episode if you love this tutorial don't forget to like
or subscribe to stay tuned with our channel thanks for watching see you next time bye