3D Tilt-Shift Effect(Awesome): Using Tilt.js(Vanilla js)

Table of Contents

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.

Visit Library Site

Here’s what we are creating:

Live Demo

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;
}

DOWNLOAD SOURCE CODE

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.