Quick Introduction

At first, we will learn about what parallax actually means?

And finally, we will create a cool little parallax project(parallax on hover effect) using Parallax.js

What is Parallax in general?

The effect through which the position or direction of an object appears to differ when viewed from different positions.

OR

A displacement or difference in the apparent position of an object viewed along two different lines of shit.

It simply means, whatever closer to your view appears to move faster as compared to far away objects.

An example could be: while driving on the highway when you look out the window, poles near the road seem to move faster, while trees in the distance appear to slowly drift by.

Video credit: Platanoz

Here’s what we are creating

parallaxonhover

Html for Parallax on hover Effect

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Parallex Effect</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
</head>
<body>
    
	<div id="container" class="container">
        <div class="text">
            <h1>CSS Parallex Effect</h1>
        </div>
		<div id="scene" class="scene">
			<div data-depth="1.00"><img src="astronaut.png"></div>
			<div data-depth="0.60"><img src="Neptune.png"></div>
			<div data-depth="0.40"><img src="Mars.png"></div>
			<div data-depth="0.80"><img src="rocket.png"></div>
        </div>
	</div>
    <script>

        var scene = document.getElementById('scene');
        var parallax = new Parallax(scene);
    
        </script>
</body>
</html>

CSS for Parallax on hover Effect

*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}

.container{
    background: url("background.jpg") no-repeat;
    width: 100%;
    overflow: hidden;
    
}
.text h1{
    font-family:  Verdana, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: wheat;
    border: 1px solid rgb(19, 18, 18);
    background: rgb(19, 18, 18);
}

Steps: For Creating Parallax On Hover Effect

Step1: Download/Create illustrations

The first step is to download/create illustrations as per your needs in SVG format. In my case, I have downloaded it from Flaticon.com

Step2: Framing the image

on hover parallex effect step1

The second step is to place the image where you want to see on the real website. For this, you could use any image editing software. I am using Figma.

Select the frame tool by clicking on the arrow icon on the upper left side. And then click on frame option on the right sidebar and select according to your own size. I am using a MacBook screen size.

Then import your downloaded SVG by clicking ” ctrl+shift+k“. And place it where you want on your website. And then create another frame for other SVG images and repeat the same process.

Step3: Removing the Background

on hover parallex effect step2

Before exporting the frame you need to make it transparent or remove the background.

For this click on the fill tool at right side and decrease it’s opacity to 0%.

Step4: Exporting the Image One by One

on hover parallex effect step3

The fourth step is to export the image in PNG format one by one.

Creating the Actual Animation

The actual animation creation is pretty easy. The harder part was SVG(image) stuff.

Installation

For creating animation you need to import the parallax.js library. You can do this by three ways:

Using the CDN

Add <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script> to your markup

Using Npm

npm i -s parallax-js

Giving Data-depth attribute

Then you need to give id=” scene” to your parent element. And add a Data-depth attribute to your child elements that you want to give effect.

The greater the number of Data-depth attribute, the more powerful will be the effect

<div id="scene">
  <div data-depth="0.2">My first Layer!</div>
  <div data-depth="0.6">My second Layer!</div>
</div>

Creating an Instance

The final step is to create an instance after your DOM is ready and loaded by writing these lines of code.

var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);

That’s it your Parallax on hover effect is ready.

If you liked this article on parallax on hover effect, do share with others and also check out posts on 3D Tilt-Shift Effect(Awesome): Using Tilt.js(Vanilla js) or Modern coming soon page

or 10+ Best C and C++ Compilers.

You can learn more about parallax.js at their official Github page: visit

Default image
JatinRaj
Hello, My name is Jatin Raj and I am a web developer from India. I love to code every single day and share my thoughts with you people. Hobbies include reading books, football, and sketching/Painting.