Image parallax effect on scroll using jQuery next label parallax effect

Parallax Effects | December 13, 2021

In this article we will show you how to create image parallax effect on scroll using HTML CSS and jQuery. This is unique parallax effect idea which we share in this article.

Video tutorial of Image parallax effect on scroll using jQuery

This tutorial video can help you to create image parallax effect on scroll using jQuery next label parallax effect.

You might like this

Image parallax effect on scroll using jQuery next label parallax effect[Source Codes]

This source code can help you to create image parallax effect on scroll using jQuery next label parallax effect.
jQuery library source

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="left_bottom-clip"></div>
<div class="top_right-clip"></div>

<div class="banner"></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: 16px;
	margin: 0;
	background: #fff;
	color: #000;
}
.left_bottom-clip,
.top_right-clip{
	clip-path: polygon(0% 0%, 40% 60%, 100% 100%, 0% 100%);
	background: #03c5ff;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}
.top_right-clip{
	clip-path: polygon(0% 0%, 60% 40%, 100% 100%, 100% 0%);
}

.banner{
	background:url('https://images.unsplash.com/photo-1497215842964-222b430dc094?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1500&q=80') ;
	background-size: cover;
	background-position: center;
	height: 100vh;
}

JavaScript Code

Copy

var counter =40;
var counter2 =60;
$(document).bind("mousewheel",function(event){
	if(event.originalEvent.wheelDelta > 0){
		if( counter < 50 ){
			counter += 1;
			counter2 -= 1;
			//console.log(counter)
			$(".left_bottom-clip").css({"clip-path":"polygon(0% 0%, "+counter+"% "+counter2+"%, 100% 100%, 0% 100%)"});
			$(".top_right-clip").css({"clip-path":"polygon(0% 0%, "+counter2+"% "+counter+"%, 100% 100%, 100% 0%"})
		}
	}else{
		if( counter < 51 && counter > 0){
			counter -= 1;
			counter2 += 1;
			//console.log(counter)
			$(".left_bottom-clip").css({"clip-path":"polygon(0% 0%, "+counter+"% "+counter2+"%, 100% 100%, 0% 100%)"});
			$(".top_right-clip").css({"clip-path":"polygon(0% 0%, "+counter2+"% "+counter+"%, 100% 100%, 100% 0%"})

		}
	}
})