Scroll to image parallax effect using jQuery advanced label scrolling effect

Parallax Effects | December 13, 2021

In this article we will show you how to create image parallax effect using HTML CSS and jQuery. This is unique parallax effect, which we create HTML CSS and jQuery.

Video tutorial of Scroll to image parallax effect using jQuery

This tutorial video can help you to create Scroll to image parallax effect using jQuery advanced label scrolling effect.

You might like this

Create scroll to image parallax effect using jQuery[Source Codes]

This source code can help you to create Scroll to image parallax effect using jQuery
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="ico_top">
	
</div>
<div class="ico_bottom">
	
</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: #6b4f00;
	color: #000;
}
.ico_top{
	position: absolute;
	background-color: #fff;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 1;
	height: calc(50vh - 7px);
}
.ico_top:after{
	content: "";
	position: absolute;
	left: 0;
	top: 100%;
	width: 100%;
	padding-bottom: 16px;
	background:url('../images/ico-top.png') repeat-x;
	background-position: left bottom;
}

.ico_bottom{
	position: absolute;
	background-color: #fff;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 1;
	height: calc(50vh - 7px);
}
.ico_bottom:after{
	content: "";
	position: absolute;
	left: 0;
	bottom: 100%;
	width: 100%;
	padding-top: 16px;
	background:url('../images/ico-bottom.png') repeat-x;
	background-position: -16px top;
}
.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;
	background-color: rgba(0,0,0,0.4);
	background-blend-mode: multiply;
}

JavaScript Code

Copy

var counter =50;
$(document).bind("mousewheel",function(event){
	if(event.originalEvent.wheelDelta > 0){
		if( counter < 50 ){
			counter += 2;
			//console.log(counter)
			$(".ico_top").css({"height":"calc("+counter+"vh - 7px)"});
			$(".ico_bottom").css({"height":"calc("+counter+"vh - 7px)"})
		}
	}else{
		if( counter < 51 && counter > 2){
			counter -= 2;
			//console.log(counter)
			$(".ico_top").css({"height":"calc("+counter+"vh - 7px)"});
			$(".ico_bottom").css({"height":"calc("+counter+"vh - 7px)"});

		}
	}
})