Parallax Scrolling 2

One of the common trends in Web Design is having content that is below a banner like image, slide up on top of the banner image, so it gives a 3d like effect. After seeing this quite a few times, I wondered how can you make that happen. I knew it would probably involve using parallax. Their is many ways to make something word in Web Design. I realized that if I took some of the code from a previous experiment that I did, I think I could make this sliding effect work.

 

In order to make this experiment work, I had to do a few things. I realized that one of the way to making it work is by making the image a fixed position, so it doesn’t move. Then, give it a z-index of 1, so everything on the page can be on top of the image, to give that 3d like look. Next, I just needed to get the position of where the user is on the page, so I can change the image, when needed. The code below gives you the position the user is on the page.

 

Javascript

$(window).scroll(function (event) {
			//retrieved from http://stackoverflow.com/questions/17441065/how-to-detect-scroll-position-of-page-using-jquery 

	
                var myScrollPos = $(window).scrollTop();
    	
		if(myScrollPos > 580){
			$('.fixedBG').removeClass('bgImageOne');
			$('.fixedBG').addClass('bgImageTwo');
		}
		
		
		if(myScrollPos < 500){
			$('.fixedBG').removeClass('bgImageTwo');
			$('.fixedBG').addClass('bgImageOne');
		}
	});

 

CSS

.fixedBG{
	float:left;
	display:block;
	width:1440px;
	height:445px;
	background-repeat:no-repeat;
    top: 50px;
	z-index:1;
	position:fixed;
	
}

#content{
	float:left;
	display:block;
	width:1440px;
	z-index:9999;
	position:relative;
	top:445px;
	
}

 

Credit:
http://stackoverflow.com/questions/17441065/how-to-detect-scroll-position-of-page-using-jquery

 

After a few roadblocks, I was able to make this happen. You can test the result here.