Parallax Animation Effect Using Custom jQuery

This is parallax tutorial blog. This blog to learn how to implement background parallax effect using custom jQuery without jQuery plugin.

Parallax Animation Effect Using jQuery | Custom Parallax Effect with jQuery

This is parallax tutorial video. This video to learn how to implement background parallax effect using custom jQuery without jQuery plugin.

Parallax Animation Effect Using Custom jQuery [Source Code]

This source code use to you can create Parallax Animation Effect Using jQuery

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html>
<head>
<title>PARALLAX</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="section1">
	<h1>jQuery Background Parallax Without Plugin</h1>	
</div>
<div class="section2 parallax_row">
	<div class="parallax_img_wrap">
		<img class="parallax_img" src="images/banne1.png">
	</div>
	<h1>jQuery Custom Parallax Effect</h1>
</div>
<div class="section3">
	
</div>
<div class="section4 parallax_row">
	<div class="parallax_img_wrap">
		<img class="parallax_img" src="images/banne2.png">
	</div>
	<h1>jQuery Parallax Background Effect</h1>
</div>
<div class="section5">
	
</div>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
</body>
</html>

CSS Code

Copy

body,
html{
	padding: 0;
	margin: 0;
}
.section1{
	height: 50vh;
	background: #ff4b4b;
}
.section2{
	height: 100vh;
}
.section3{
	height: 25vh;
	background: #00f6ff;
}
.section4{
	height: 100vh;
}
.section5{
	height: 50vh;
	background: #2f2f2f;
}
.section1,
.section2,
.section3,
.section4,
.section5{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.section1 h1,
.section2 h1,
.section4 h1{
	color: #fff;
	text-align: center;
	font-size: 60px;
	margin:0;
	font-weight: 400;
}
.section2 h1,
.section4 h1{
	color: red;
}


.parallax_img_wrap{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: -10;
}
.parallax_img{
	position: relative;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	min-width: 140%;
	min-height: 140%;
}

JavaScript Code

Copy

$(window).bind('load resize scroll', function() {
	$('.parallax_row').each(function() {
		var thisOffsetTop = $(this).offset().top;
		var winHeight = 	$(window).height();
		var mainOffset =    thisOffsetTop - winHeight;
		var winScrollTop =  $(window).scrollTop();
		var topPosition = 	winScrollTop - mainOffset;
		if(winScrollTop > mainOffset){
			$(this).children('.parallax_img_wrap').children('.parallax_img').css('top',parseInt(-topPosition/4.5)+'px');
		}
		
	});
});

Parallax Animation Effect Using Custom jQuery

Parallax Animation Effect Using jQuery | Custom Parallax Effect with jQuery

Parallax Animation Effect Using Custom jQuery [Source Code]

Build a Stop-Watch Web App Using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery

Create Responsive Mobile Menu using Only HTML CSS | Responsive Navigation Slide Using CSS