This article explains how to easily implement an eye-catching parallax effect in web design using the JavaScript library “vanilla-tilt.js”.
This library adds interactive effects where elements tilt in response to mouse movement, giving your website dynamic motion.
While many other parallax plugins react to vertical or horizontal scrolling, vanilla-tilt.js performs parallax effects based on mouse movements.
Introduction
Parallax effect is a technique that creates a sense of depth by moving the background and foreground at different speeds based on scroll, device tilt, or mouse movement. It is used on many websites, and here we focus on the type that moves elements according to mouse movements.
What is vanilla-tilt.js?
vanilla-tilt.js is a lightweight and easy-to-use JavaScript library that adds tilt effects to elements when the mouse approaches them. Unlike other parallax plugins that react to scrolling, this library works based on mouse movement.
CSS Description
Here is the CSS for 8 patterns of elements with parallax effect (.example .box).
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
font-size: 22px;
color: #333333;
}
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
main {
flex-grow: 2;
border-left: 1px solid #ededed;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
section {
padding: 5vw 10vw;
border-bottom: 1px solid #ededed;
text-align: center;
}
h1{
text-align: center;
font-size: 20px;
line-height: 1.8em;
padding: 15px 0;
}
.example {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: space-around;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.example .box {
height: 250px;
background-color: red;
width: 50%;
}
.example .info {
font-size: 18px;
width: 50%;
}
.example:nth-child(2) .box {
background-image: -webkit-linear-gradient(315deg, #ff008a 0%, #101c25 100%);
background-image: linear-gradient(135deg, #ff008a 0%, #101c25 100%);
}
.example:nth-child(3) .box {
background-image: -webkit-linear-gradient(315deg, #ff00ba 0%, #fae713 100%);
background-image: linear-gradient(135deg, #ff00ba 0%, #fae713 100%);
transform-style: preserve-3d;
transform: perspective(1000px);
}
.example:nth-child(4) .box {
background: #fc00ff; /* fallback for old browsers */
background: -webkit-linear-gradient(135deg, #fc00ff , #00dbde); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(135deg, #fc00ff , #00dbde); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.example:nth-child(5) .box {
background: #34e89e; /* fallback for old browsers */
background: -webkit-linear-gradient(135deg, #34e89e, #0f3443); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(135deg, #34e89e, #0f3443); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.example:nth-child(6) .box {
background: #4568DC; /* fallback for old browsers */
background: -webkit-linear-gradient(135deg, #4568DC, #B06AB3); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(135deg, #4568DC, #B06AB3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.example:nth-child(7) .box {
background: #DCE35B; /* fallback for old browsers */
background: -webkit-linear-gradient(135deg, #DCE35B, #45B649); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(135deg, #DCE35B, #45B649); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.example:nth-child(8) .box {
background: #00c3ff; /* fallback for old browsers */
background: -webkit-linear-gradient(135deg, #00c3ff, #ffff1c); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(135deg, #00c3ff, #ffff1c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.example:nth-child(9) .box {
background: #00bf8f; /* fallback for old browsers */
background: -webkit-linear-gradient(135deg, #00bf8f, #001510); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(135deg, #00bf8f, #001510); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
</style>
HTML Description
Here are 8 patterns of elements with parallax effects (class=”box”).
You can configure various parallax settings by adding attributes like data-tilt, data-tilt-glare, and data-tilt-max-glare="0.8" to each element (class=”box”).
(Reference: Vanilla-tilt.js)
<main>
<h1>Parallax (tilt effect) implemented on the following elements using vanilla-tilt.js.<br>
Each element (class="box") shows one of 8 subtle effects when hovered with a mouse.</h1>
<section class="example">
<div class="box" data-tilt></div>
<div class="info">
<h3>Basic usage</h3>
</div>
</section>
<section class="example">
<div class="box" data-tilt>
<div class="inner"></div>
</div>
<div class="info">
<h3>Creating parallax effect</h3>
</div>
</section>
<section class="example">
<div class="box" data-tilt data-tilt-glare data-tilt-max-glare="0.8"></div>
<div class="info">
<h3>Glare effect</h3>
</div>
</section>
<section class="example">
<div class="box" data-tilt data-tilt-reverse="true"></div>
<div class="info">
<h3>Reverse tilt</h3>
</div>
</section>
<section class="example">
<div class="box" data-tilt data-tilt-reset="false"></div>
<div class="info">
<h3>Floating</h3>
</div>
</section>
<section class="example">
<div class="box" data-tilt data-tilt-full-page-listening></div>
<div class="info">
<h3>Full-page listening</h3>
</div>
</section>
<section class="example">
<div class="box" data-tilt data-tilt-scale="1.1"></div>
<div class="info">
<h3>Zoom on hover</h3>
</div>
</section>
<section class="example">
<div class="box" data-tilt data-tilt-startX="-25" data-tilt-startY="-25" data-tilt-max="25"></div>
<div class="info">
<h3>Initial tilt position</h3>
</div>
</section>
</main>
JavaScript Description
* Load the vanilla-tilt.js file.
<script type="application/javascript" src="vanilla-tilt.js"></script>
Demo Page: Parallax Effect with vanilla-tilt.js
The implemented demo page is as follows:
Demo Page Using vanilla-tilt.js to Implement Parallax (Tilt Effect) on Elements
Source: Vanilla-tilt.js
* Please use at your own risk if reusing.
Do not reuse the Google Analytics tag in the head tag of the demo page.
