《jquery视差滚动专题》使用jQuery创建的垂直视差背景

在近现代的网页设计最大的趋势之一是利用视差滚动效应。当把一个网站的滚动功能相结合时，视差滚动效果可以有一个强烈的视觉冲击，你可能已经看到现在不少网站上的视差效果。我也写过这方面的文章，jquery实现的视差滚动教程(视差大背景效果)从今天开始再奉献一篇这方面的文章来讲解这种效果的实现代码，根据维基百科：视差是一个明显的位移或在明显位置视线沿着两条不同的线路观看对象的差异性。视差效果于1980年首先运用到视频游戏方面，最近，它开始在Web界面流行，所以无论如何我们都要学会这样的效果.（最好在谷歌浏览器下面预览效果更棒），

 

 

Demo     

视差是什么和它如何工作？

 

根据维基百科：视差是一个明显的位移或在明显位置视线沿着两条不同的线路观看对象的差异性。

在我的演示，背景将开始与一个城市，和背后，丘陵，山地和天空。当用户向下滚动，我们的影响将会给他们的向上移动，因为四个背景会以不同的速度移动到创建这个“对象的明显位置差”的感觉。

我将使用CSS3的多重背景和jQuery独立移动为每个用户要么滚动或调整窗口的背景图片。

意象

 

所有的图像都具有透明背景的png格式，他们坐了彼此的顶部，给人的印象，它只是一个背景。

城市背景

山背景

山背景

天空背景

 

The HTML

 

这个效果主要是用css3和jquery打造的，所以用最小的html代码完成最大的工作

1 
2 
3 
4 

这是我们调用谷歌jQuery代码托管库的链接，。你会发现它里面有一个条件语句。该声明明确指出，如果浏览器是Internet Explorer。因为大家都知道，Internet Explorer是一个兼容性差的的浏览器。它不仅不支持CSS3的一些属性，所以需要为他设置以让他兼容

The CSS

 我们使用css2和css3的组合，对于不兼容css3的属性用css2代替

1 html{
2 background: url(images/bg.jpg) 0 0 fixed;
3 background: url(images/bg-city.png) 0 550px repeat-x,
4 url(images/bg-hills.png) 0 480px repeat-x,
5 url(images/bg-mountains.png) 0 350px repeat-x,
6 url(images/bg-sky.png) 0 0 repeat-x #336600;
7 }

我们将开始由HTML元素应用背景。首先，万一有的的浏览器不支持CSS3的多重背景，我们会使用一个固定的背景。，这第一行代码将覆盖4个背景图像将被用来弥补我们的视差背景。

每个背景从起先的位置，创造一个景观和希望的距离感。所有图像都只是重复水平的情况下，用户的屏幕分辨率比图像更宽。

我们还需要定义背景的宽度高度，颜色等等，代码如下

1 background-color: white;
2 background-color: rgba(255,255,255,0.3);
3 height: 2000px;
4 margin: 0 auto;
5 padding: 10px;
6 width: 960px;

 

没有JavaScript演示

到现在为止你可以尝试看看，在支持CSS3的浏览器当中的效果。我建议谷歌浏览器。如果你开始滚动预览，背景尚未表现为我们想要它，因为我们没使用jQuery。

The jQuery

 

我们将有三个事件，改变效果的行为;文件准备，滚动和缩放。如果用户负载或刷新页面，我们需要确保4背景图像是在正确的位置和滚动或调整时，我们需要动态地移动与移动滚动条或窗口中的每个图像。

Document Ready

 我们需要每一个背景图像的位置，文件准备，因为一个窗口可以是任何大小，我们需要的图像，在一定的位置，大小相对

windowHeight = $(window).height();
city = windowHeight * 0.675;
hills = windowHeight * 0.625;
mountains = windowHeight * 0.350;
sky = 0;

因此，当该文件已准备就绪，我们首先得到窗口的高度。然后我们就可以乘以一定的数值，定位每一个背景图像的位置。

现在我们可以用我们的下一行中的变量：

$('html').css({
"background" :
"url(images/bg-city.png) 0 " + city + "px repeat-x,
url(images/bg-hills.png) 0 " + hills + "px repeat-x,
url(images/bg-mountains.png) 0 " + mountains + "px repeat-x,
url(images/bg-sky.png) 0 -" + sky + "px repeat-x #336600"
});

此代码，改变HTML元素的CSS来调整每一个背景图像的位置。

滚动和调整

 

1 $(window).resize(function(){
2 Move();
3 });

4 
5 
$(window).bind('scroll', function(){
6 Move();
7 });

当窗口大小或用户滚动，触发move函数,下面是move函数代码

function Move(){
windowHeight = $(window).height();
pos = $(window).scrollTop();
city = windowHeight * 0.675 + pos * 1.1;
hills = windowHeight * 0.625 + pos * 0.7;
mountains = windowHeight * 0.350 + pos * 0.51;
sky = 0;


$('html').css({
"background" :
"url(images/bg-city.png) 0 " + city + "px repeat-x,
url(images/bg-hills.png) 0 " + hills + "px repeat-x,
url(images/bg-mountains.png) 0 " + mountains + "px repeat-x,
url(images/bg-sky.png) 0 " + sky + "px repeat-x #336600"
});
}

代码意思是获取每次滚动的新位置

windowHeight = $(window).height();
pos = $(window).scrollTop();

再一次得到窗口的高度

city = windowHeight * 0.675 + pos * 1.1;

然后是3个背景的相对变化代码

$('html').css({
"background" :
"url(images/bg-city.png) 0 " + city + "px repeat-x,
url(images/bg-hills.png) 0 " + hills + "px repeat-x,
url(images/bg-mountains.png) 0 " + mountains + "px repeat-x,
url(images/bg-sky.png) 0 " + sky + "px repeat-x #336600"
});

最终代码完成了，效果如下,要源码的话请留言说一声，我给你发邮箱去

Demo