Responsive parallax effect using HTML CSS and JavaScript

In this article we will show you how to create responsive parallax effect using HTML CSS and JavaScript. This is fully responsive web page parallax effect, which we create using HTML CSS and JavaScript.

Video tutorial of Responsive parallax effect using HTML CSS and JavaScript

This tutorial video can help you to create Responsive parallax effect using HTML CSS and JavaScript

Responsive parallax effect using HTML CSS and JavaScript[Source Codes]

This source code can help you to create Responsive parallax effect using HTML CSS and JavaScript.

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="banner" style="background-image: url(images/hero.jpg);">
	<div class="banner-overlay"></div>
</div>
<div class="section">
	<div class="container">
		<h1>Lorem ipsum dolor sit amet</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 22px;
	margin: 0;
	background: #fff;
	color: #000;
}

.banner{
	min-height: 100vh;
	position: relative;
	background-position: center center;
	background-repeat: no-repeat;

	background-size:auto 200%
}
.banner-overlay{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	pointer-events: none;
	background:#000;

	opacity: 0;
}
.section{
	padding: 60px 30px;
}
.section h1{
	font-size: 50px;
}
.container{
	max-width: 1200px;
	margin:auto;
}

JavaScript Code

Copy

var counter = 200;
var opacityCount = 0;
var lastScroll = 0;

window.addEventListener("scroll",function(event){
	var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
	if (currentScroll > 0 && lastScroll <= currentScroll){
		lastScroll = currentScroll;
		if( counter < 201   && counter > 100 ){
			counter -= 1;
			opacityCount += 0.015;
			if(opacityCount >1){ opacityCount = 1}
			console.log(counter)
			$(".banner").css({"background-size":"auto "+counter+"%"});
			$(".banner-overlay").css({"opacity":opacityCount});
		}
	}else{
		lastScroll = currentScroll;
		if( counter < 200 ){
			counter += 1;
			opacityCount -= 0.015;
			if(opacityCount < 0.01){ opacityCount = 0.01}
			console.log(counter)
			$(".banner").css({"background-size":"auto "+counter+"%"});
			$(".banner-overlay").css({"opacity":opacityCount});
			
		}
	}
});