php页面 背景不动,页面滚动背景图片不动的原理及实现

以前看到一种页面滚动条在滚动，而背景图片却不动的效果，页面缓缓的下拉，背景也缓缓的切换，就像放电影一样，后来才知道这叫(Parallax Scrolling)，作为一种优雅酷炫的页面展示的方式，视差滚动(Parallax Scrolling)正受到越来越多前端设计师的宠爱，优设的2014年网页设计趋势中依然能够看到它的影子，所以我们不得不来好好研究下视差滚动的原理和实现方式。

原文出处：http://blog.csdn.net/chenlycly/article/details/25046969

1.视差滚动

2.特性

视差滚动效果酷炫，适合于个性展示的场合。

视差滚动徐徐展开，适合于娓娓道来，讲故事的场合。

视差滚动容易迷航，需要具备较强的导航功能。

3.原理

传统的网页的文字、图片、背景都是一起按照相同方向相同速度滚动的，而视差滚动则是在滚动的时候，内容和多层次的背景实现或不同速度，或不同方向的运动。

有的时候也可以加上一些透明度、大小的动画来优化显示。

4.实现

4.1简单实现

利用background-attachment属性实现。

background-attachment: fixed || scroll || local

默认情况下，此属性取值scroll，页面滚动时，内容和背景一起运动，如果取值fixed，背景相对浏览器固定。借用Alloy Team的博文《视差滚动的爱情故事》的图片和背景，来看看效果。

每当我加班凌晨，独自一人走在黑暗的回家路上

我会想起那天夕阳下的奔跑

那是我逝去的，青春

css非常简单，

/*统一设置背景的background-attchment属性*/

.article{

width: 960px;

margin: 0 auto;

height: 800px;

padding: 40px;

font: 24px/1.5 'Microsoft YaHei';

background-repeat: no-repeat;

background-attachment: fixed;

background-position: center center;

background-size: cover;

line-height:400px;

}

/*分别给每个部分设置不同的背景和颜色*/

.section1{

color: white;

background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section01.jpg);

}

.section2{

color: #FF8500;

background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section02.jpg);

}

.section3{

color: #747474;

background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section03.jpg);

}

4.2 加上动画

上面的效果略显呆板，我们在页面滚动的时候，给文字加点动画，看效果。我们来侦听一下scroll事件，当页面滚动某个地方时()，我们给元素添加动画。

var articleHeight =800;

var section1 = document.getElementById('section1'),

section2 = document.getElementById('section2'),

section3 = document.getElementById('section3');

window.addEventListener('scroll',scrollHandler);

function scrollHandler(e){

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

if(scrollTop > 0 && scrollTop < articleHeight){

section1.classList.add('anim');

}else if(scrollTop >= articleHeight && scrollTop < articleHeight*2){

section2.classList.add('anim');

}else if(scrollTop >= articleHeight*2 && scrollTop < articleHeight*3){

section3.classList.add('anim');

}

}

html和css也要进行一些修改

/*统一设置背景的background-attchment属性*/

.article{

width: 960px;

margin: 0 auto;

height: 800px;

padding: 40px;

background-repeat: no-repeat;

background-attachment: fixed;

background-position: center center;

background-size: cover;

font: 24px/1.5 'Microsoft YaHei';

line-height:400px;

text-indent:-25em;

}

/*分别给每个部分设置不同的背景和颜色*/

.section1{

color: white;

background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section01.jpg);

}

.section2{

color: #FF8500;

background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section02.jpg);

}

.section3{

color: #747474;

background-image: url( http://www.alloyteam.com/wp-content/uploads/2014/01/section03.jpg);

}

.anim{

-webkit-transition : all 1s ease-in;

-moz-transition : all 1s ease-in;

-ms-transition : all 1s ease-in;

transition : all 1s ease-in;

text-indent:3em;

}

4.3 背景运动

刚刚两个情况只是背景保持fixed的状态，我们可以给包括背景在内的多层次元素添加运动，从而实现视差滚动。多背景时，需要确保上面的背景是透明的。看看nettuts上的一个效果，研究研究，看看实现过程。

html文件里面使用了data-speed和data-type向js里传递参数。

I am Absolute Positioned

Simple Parallax Scroll

CSS文件，

#home {

background: url(http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/images/home.jpg) 50% 0 no-repeat fixed;

height: 1000px;

margin: 0 auto;

width: 100%;

max-width: 1920px;

position: relative;

box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);

}

#about {

background: url(http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/images/about.jpg) 50% 0 no-repeat fixed;

height: 1000px;

margin: 0 auto;

width: 100%;

max-width: 1920px;

position: relative;

box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);

}

/* Introduction */

#home article {

background: url("http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/images/intro.png") no-repeat scroll center top transparent;

height: 458px;

position: absolute;

text-indent: -9999px;

top: 291px;

width: 100%;

}

#about article {

background: url("http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/images/parallax.png") no-repeat scroll center top transparent;

height: 458px;

position: absolute;

text-indent: -9999px;

top: 291px;

width: 100%;

}

javascript，这里用到了jquery

$(document).ready(function () {

// Cache the Window object

$window = $(window);

$('section[data-type="background"]').each(function () {

var $bgobj = $(this); // assigning the object

$(window).scroll(function () {

// Scroll the background at var speed

// the yPos is a negative value because we're scrolling it UP!

var yPos = -($window.scrollTop() / $bgobj.data('speed'));

// Put together our final background position

var coords = '50% ' + yPos + 'px';

// Move the background

$bgobj.css({

backgroundPosition: coords;

});

}); // window scroll Ends

});

});

5.教程、插件、欣赏

视差滚动效果

请大家参阅一下资源

Alloy Team的《视差滚动的爱情故事》

完工！

感谢阅读，希望可以为您带来些许帮助！