jquery视差推荐:nikebetterworld视差平滑滚动效果

让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。这就是视差滚动技术,作为今年网页设计的热点趋势,越来越多的网站应用了这项技术。上次,我创建了一个jQuery的垂直视差演示,操纵CSS在不同的速度,相对的移动滚动条移动多个背景。 著名的耐克公司Nikebetterworld就是采用这样技术实现的;今天采用jquery视差脚本,重新建立一个类似Nikebetterworld网页,效果演示

 

Demo    

先来看看这样效果在网站当中的运用

 Dennis Kleine

HSWI31

32. Maid Stone Driving Lessons

HSWI32

 Benjamin Chirlin

HSWI33

Sockho

HSWI34

 Farm House Fare

HSWI35

 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>

要达到我们想要的效果,需要使用的脚本文件是:

 

页面包含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-width: 980px;
4     width: 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    

posted @ 2012-08-14 15:48 创想中国(羲闻) 阅读(...) 评论(...) 编辑 收藏