jQuery html5页面视差滚动鼠标滚动页面视差效果

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery1.11.1.min.js"></script>

2. HTML代码

<div class="div1 h" data-speed="4" data-type="background">
	<div class="logo" data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="-2"></div>
	<div class="title"><img src="img/title.png"></div>
</div>
<div class="div2 h" data-speed="8" data-type="background">
	<div class="box box2">
		<h1>Background Only</h1>
		<p>In this section we are sliding the background at a different speed to the rest of the page.</p>
		<p>As this text box is scrolling at the same speed as the page, and faster than the background, it creates this lovely parallax effect.</p>
		<p>You can find all the HTML, CSS and the all important JavaScript files over at GitHub - so why don't you drop by for some hardcore forking action?</p>
		<p>Backgrounds for this article were taken from the May/June 2011 Smashing Magazine Desktop backgrounds.</p>
	</div>
</div>
<div class="div3 h" data-speed="4" data-type="background"></div>
<div class="div4 h" data-speed="8" data-type="background"></div>
<div class="div5 h" data-speed="6" data-type="background">
	<div class="byebye" data-type="sprite" data-offsetY="-1600" data-Xposition="50%" data-speed="-2"></div>
</div>
<script type="text/javascript">
	$(function(){
		var win = $(window);
		// $('.h').height(win.height() + 300);
		// $('.logo').height(win.height() + 300);
		// $('.byebye').height(win.height() + 300);
		$('[data-type]').each(function(){
			$(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
			$(this).data('Xposition', $(this).attr('data-Xposition'));
			$(this).data('speed', $(this).attr('data-speed'));
		});
		$('div[data-type="background"]').each(function(){
			var self = $(this),
			offsetCoords = self.offset(),
			topOffset = offsetCoords.top; 
			win.scroll(function(){
				if ( (win.scrollTop() + win.height() ) > topOffset
					&& (topOffset+self.height()) > win.scrollTop()){
					var yPos = -(win.scrollTop() / self.data('speed'));
					if (self.data('offsetY')) {
						yPos += self.data('offsetY');
					}; 
					var coords = '50%' + yPos + 'px';
					self.css({ backgroundPosition: coords });
					$('[data-type="sprite"]',self).each(function(){
						var sprite = $(this);
						var yPos = -(win.scrollTop() / sprite.data('speed'));
						var coords = sprite.data('Xposition') + ' '+(yPos + sprite.data('offsetY'))+'px';
						sprite.css({backgroundPosition:coords});
					});
				}
			});
		});
	});
</script>