特效描述:jQuery html5 页面视差滚动 鼠标滚动 页面视差效果。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>