nikebetterworld视差平滑滚动效果
设计人员和开发人员的在线有用资源分享
jquery视差推荐：nikebetterworld视差平滑滚动效果
让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。这就是视差滚动技术，作为今年网页设计的热点趋势，越来越多的网站应用了这项技术。上次，我创建了一个 jQuery的垂直视差演示 ，操纵CSS在不同的速度，相对的移动滚动条移动多个背景。 著名的耐克公司 Nikebetterworld 就是采用这样技术实现的；今天采用jquery视差脚本，重新建立一个类似Nikebetterworld网页,效果演示
Demo
先来看看这样效果在网站当中的运用
Dennis Kleine
32. Maid Stone Driving Lessons
Benjamin Chirlin
Sockho
Farm House Fare
HTML代码
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="scripts/nbw-parallax.js"></script>
<script type="text/javascript" src="scripts/jquery.localscroll-1.2.7-min.js"></script>
<script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="scripts/jquery.inview.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#nav').localScroll();
})
</script>
要达到我们想要的效果，需要使用的脚本文件是:
jQuery 1.4.4 jQuery localscroll (文章之间顺差滚动插件) jQuery scrollTo (最主要的平滑滚动) jQuery Inview (判断一篇文章是否在浏览)页面包含6个部分，头部 ，尾部，然后分别定义4个DIV放置滚动的文章，在页面的右边创建一个无序的ul列表，他不会移动，通过它来控制文章的上下移动，效果图
右边UL代码如下
1 <ul id="nav"> 2 <li><a href="#intro" title="Next Section"><img src="images/dot.png" alt="Link" /></a></li> 3 <li><a href="#second" title="Next Section"><img src="images/dot.png" alt="Link" /></a></li> 4 <li><a href="#third" title="Next Section"><img src="images/dot.png" alt="Link" /></a></li> 5 <li><a href="#fourth" title="Next Section"><img src="images/dot.png" alt="Link" /></a></li> 6 <li><a href="#fifth" title="Next Section"><img src="images/dot.png" alt="Link" /></a></li> 7 </ul>
这些li元素创建了锚链接，当用户点击的时候链接到节点，这里并没有使用jquery，所以点击的时候速度会很快，给用户的体验不好，所以这里需要实现平滑滚动(稍候再说)，来展示我们的视觉效果；
<div id="intro">
<div class="story">
Article content here
</div> <!--.story-->
</div> <!--#intro-->
这段代码是正文部分，我们的内容就放在这里面，其他的只需要吧<div id="intro">换掉就可以
部分页面效果如下
Demo
The CSS
1 #intro{
2 background:url(images/firstBG.jpg) 50% 0 no-repeat fixed;
3 color: white;
4 height: 600px;
5 margin: 0;
6 padding: 160px 0 0 0;
7 }
定义第一个div css代码，以50%的固定背景图片，高度设置成600，这里宽度并没有定义，让他是100%，以适应不同的屏幕；
1 .story{
2 margin: 0 auto;
3 min- 980px;
4 980px;
5 }
正文内容是980的宽度；
多重背景的问题
有些文章有多个背景.，我们需要额外的定义html代码来实现多重背景；这里额外定义一个bg的class类；
<div id="second">
<div class="story">
<div class="bg"></div>
Article content here
</div> <!--.story-->
</div> <!--#second-->
定义bg的样式代码
#second .bg{
background: url(images/trainers.png) 50% 0 no-repeat fixed;
...
position: absolute;
...
z-index: 200;
}
注意：为了确保他的背景在最前面需要定义一个position: absolute的绝对定位和z-index:属性；来遮盖其他的背景，这就是多重背景的实现；
The jQuery
好了，为了实现平滑滚动，我需要写jquery代码突出视差效果
1 var $window = $(window);
2 var $firstBG = $('#intro');
3 var $secondBG = $('#second');
4 var $thirdBG = $('#third');
5 var $fourthBG = $('#fourth');
6 var trainers = $("#second .bg");
这里获取每个链接的对象；
我们需要浏览器窗口的高度，代码如下
var windowHeight = $window.height();
接下来，使用接下来inview'事件；
1 $('#intro, #second, #third, #fourth').bind('inview', function (event, visible) {
2 if (visible == true) {
3 $(this).addClass("inview");
4 }else{
5 $(this).removeClass("inview");
6 }
7 });
代码解释：点击其中的任何一个链接，获取当前的容器文章，如果是可见的，给他增加inview类；
1 function RepositionNav(){
2 var windowHeight = $window.height();
3 var navHeight = $('#nav').height() / 2;
4 var windowCenter = (windowHeight / 2);
5 var newtop = windowCenter - navHeight;
6 $('#nav').css({"top": newtop});
7 }
我希望li列表在浏览器窗口的中心始终保持垂直。上面的代码高度除以2，找到它的中心。然后中心窗口以同样的方式,最后把两个数一减掉就是新的中心固定位置；
1 function Move(){
2 var pos = $window.scrollTop();
3 ...
4 }
接下来是一个窗口resize事件：
$window.resize(function(){
Move();
RepositionNav();
});
当用户调整浏览器，调用Move()函数和RepositionNav()函数来确保平滑效果
$window.bind('scroll', function(){
Move();
});
最后是滚动事件，当用户滚动的时候通过他来移动滚动条的位置,最终效果， 如果想要源码，请留下你的邮箱
Demo
推荐阅读 强大的JavaScript表单验证插件 26个有用的创建视觉图片网站的jQuery插件 11对于Web开发人员和设计师非常有用的在线工具 你应该实现在网站上的30个jQuery插件
作者： 创想中国(羲闻)
出处： "http://www.cnblogs.com/web8cn/
欢迎任何形式的转载
分享到： 邮件 新浪微博 QQ空间 腾讯微博 更多 0
分类: 优秀jquery插件集
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于nikebetterworld视差平滑滚动效果的详细内容...