Parallax scrolling effect using rellax js

Parallax scrolling is a method that gives the illusion of being farther away from the subject matter. Parallax scrolling is a cool graphics technique that allows you to add a 3D feel to your web design. We will learn how to create a parallax scrolling animation with the help of rellax js and HTML CSS. Before getting the source code, I would encourage you to watch the video tutorial below. This is a video that will help you understand the code. On our YouTube channel, we have many videos related to front-end development. Subscribe to our channel if you find them useful.

I hope you have watched the tutorial. Parallax is derived from an optical illusion. This gives an impression of a 3D web layout or makes it feel more like a 3D website than a flat one. we often see this trend in some. When adding parallax effects to your site, be mindful of how much movement is involved. Some users could be disrupted by excessive use of it. In today's post, we are going to show you a simple parallax scrolling project where there will be an animation between some images and text. We used rellax js javascript parallax library to make this snippet. You can add a parallax effect to your website in no time with this library.

You May Also like:

Parallax scrolling effect using rellax js [ Source Code ]:

First, create an HTML file and then a CSS file. Download the rellax js parallax library plugin as shown in the video tutorial above and add the necessary files to your project. Copy the code from the code box below and paste them into your project. open the project in your browser and see if it is working. If not then download the parallax animation or parallax effect code from the download button below.

ADD HTML:

<!doctype html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <title>Parallax scrolling effect using HTML CSS JS</title>
    <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    
</head>
<body>
    <div class="object1"></div>
    <div class="object2"></div>
    <div class="object3"></div>
    <div class="object4"></div>
    <div class="object5"></div>
    
        
	<div class="thing1 rellax" data-rellax-speed="2">A<span>dorable</span></div>
	<div class="thing2 rellax" data-rellax-speed="8">B<span>old</span></div>
	<div class="thing3 rellax" data-rellax-speed="12">C<span>ute</span></div>
	<div class="thing4 rellax" data-rellax-speed="5">D<span>azzle</span></div>
	<div class="thing5 rellax" data-rellax-speed="12">E<span>legant</span></div>
	<div class="thing6 rellax" data-rellax-speed="14">F<span>alulous</span></div>
	<div class="thing7 rellax" data-rellax-speed="9">G<span>orgeous</span></div>
	<div class="thing8 rellax" data-rellax-speed="18">H<span>armonious</span></div>

    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/rellax.min.js"></script>
    <script>
        var rellax = new Rellax('.rellax');
    </script>
</body>
</html>

ADD CSS:

html {
	margin: 0;
	padding: 0;
	width: 100%;
	overflow-x: hidden;
}
body {
	margin: 0;
	padding: 0;
	background: #000;
	font-family: Oswald;
	color: #fff;
	font-size: 400px;
	overflow-x: hidden;
}
body span {
	font-size: 30px;
}
.thing1 {
	position: absolute;
	top: 0%;
	left: 5%;
}
.thing2 {
	position: absolute;
	top: 40%;
	left: 62%;
	color: yellow;
}
.thing3 {
	position: absolute;
	top: 70%;
	left: 23%;
	color: deepskyblue;
}
.thing4 {
	position: absolute;
	top: 80%;
	left: 80%;
	color: cornsilk;
}
.thing5 {
	position: absolute;
	top: 225%;
	left: 65%;
}
.thing6 {
	position: absolute;
	top: 130%;
	left: 51%;
	color: chartreuse;
}
.thing7 {
	position: absolute;
	top: 220%;
	left: 3%;
	color: skyblue;
}
.thing8 {
	position: absolute;
	top: 192%;
	left: 17%;
	color: turquoise;
}
.object1 {
	background: url(img/1.jpg);
	height: 300px;
	width: 300px;
	position: absolute;
	top: 5%;
	left: 24%;
	border-radius: 50%;
	background-size: cover;
	background-position: center center;
}
.object2 {
	background: url(img/2.jpg);
	height: 200px;
	width: 200px;
	position: absolute;
	top: 106%;
	left: 66%;
	border-radius: 50%;
	background-size: cover;
	background-position: center center;
}
.object3 {
	background: url(img/3.jpg);
	height: 500px;
	width: 500px;
	position: absolute;
	top: 136%;
	left: 28%;
	border-radius: 50%;
	background-size: cover;
	background-position: center center;
}
.object4 {
	background: url(img/4.jpg);
	height: 350px;
	width: 350px;
	position: absolute;
	top: 30%;
	left: 45%;
	border-radius: 50%;
	background-size: cover;
	background-position: center center;
}
.object5 {
	background: url(img/5.jpg);
	height: 200px;
	width: 200px;
	position: absolute;
	top: 182%;
	left: 80%;
	border-radius: 50%;
	background-size: cover;
	background-position: center center;
}

We hope the code is working for you. The website has more snippets like this. Clicking on the load more button below the homepage will take you to those. Please don't forget to share our content, We are happy to have you here.

DOWNLOAD CODE

Parallax scrolling effect using rellax js [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Parallax scrolling effect using rellax js

Parallax scrolling effect using rellax js [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form