Quick Introduction on 3D Tilt-Shift Effect

Today when I was scrolling my twitter feed there I saw a javascript library named Tilt.js. So I thought let’s visit their site to check what really it does.

When I reached on their site they showcase some cool tilt effects examples using their library. So I thought let’s recreate tilt-shift effect by myself.

And the best part of this library is that is works without JQuery. Although they have JQuery version also.

Here’s what we are creating:

tilt-shift effect

HTML

<html>

<head>
    <meta charset="UTF-8">
    <title>3D Tilt</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="card" data-tilt data-tilt-max="10"
        data-tilt-scale="1.1">
            <img src="skull.svg" alt="skull">
        </div>
    </div>
    <!-- Scripts -->
    <script src="vanilla-tilt.min.js"></script>
</body>

</html>

CSS

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body{
	background-color: #2E3436FF;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card{
    background-color: #FCE94FFF;
    width: 300px;
    height: 350px;
    opacity: 0.9;
    border-radius: 20px;
    display: flex;
	justify-content: center;
	align-items: center;
	transform-style: preserve-3d ;
    
}
.card img{
	width: 200px;
	transform: translateZ(30px);
}
.container{
perspective: 1000px;
}

How to add Tilt-shift Effect

Installation

You can either download the library from their site and attach in your folder or you can install it through npm by running this command:

npm install vanilla-tilt

Ways of Using Tilt.js Library

If you visit their site they have shown two ways of adding the tilt-shift effect.

1.The first way is through adding the data-tilt attribute to your parent element(easy way).

                                   // EXAMPLE //

<body>
<div class="your-element" data-tilt></div>

<!-- at the end of the body -->
<script type="text/javascript" src="vanilla-tilt.js"></script>
</body>

2.The second way to use javascript to add this tilt-shift effect(Little harder way)

                                   // EXAMPLE //
<body>
<div class="your-element"></div>

<script type="text/javascript" src="vanilla-tilt.js"></script>
<script type="text/javascript">
	VanillaTilt.init(document.querySelector(".your-element"), {
		max: 25,
		speed: 400
	});
	
	//It also supports NodeList
	VanillaTilt.init(document.querySelectorAll(".your-element"));
</script>
</body>

Different Properties you can use

perspective:            1000,   // Transform perspective, the lower the more extreme the tilt gets.
    scale:                  1,      // 2 = 200%, 1.5 = 150%, etc..
    speed:                  300,    // Speed of the enter/exit transition
    transition:             true,   // Set a transition on enter/exit.
    axis:                   null,   // What axis should be disabled. Can be X or Y.
    reset:                  true    // If the tilt effect has to be reset on exit.
    easing:                 "cubic-bezier(.03,.98,.52,.99)",    // Easing on enter/exit.
    glare:                  false   // if it should have a "glare" effect
    "max-glare":            1,      // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)

For more properties: visit

Thanks for reading my article on 3D Tilt-Shift Effect. If you liked it share with others and also check out other articles on: Single Price Card Design: Using Flexbox or 4 Best Ways to Host website for Free or Modern coming soon page.