工具猫
学无止境

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


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

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

1.视差滚动

视差滚动(Parallax Scrolling)指网页滚动过程中,多层次的元素进行不同程度的移动,视觉上形成立体运动效果的网页展示技术。国内外的设计师们实现了很多酷炫的效果,大家请移步欣赏,《14个超棒的带有故事趣味性视差滚动网站》、《17 Inspiring Examples of Parallax Scrolling Sites》、《18 Beautiful Examples of Parallax Scrolling in Web Design》。

2.特性

视差滚动效果酷炫,适合于个性展示的场合。
视差滚动徐徐展开,适合于娓娓道来,讲故事的场合。
视差滚动容易迷航,需要具备较强的导航功能。

3.原理

传统的网页的文字、图片、背景都是一起按照相同方向相同速度滚动的,而视差滚动则是在滚动的时候,内容和多层次的背景实现或不同速度,或不同方向的运动。
有的时候也可以加上一些透明度、大小的动画来优化显示。

4.实现

4.1简单实现

利用background-attachment属性实现。
background-attachment: fixed || scroll || local
默认情况下,此属性取值scroll,页面滚动时,内容和背景一起运动,如果取值fixed,背景相对浏览器固定。借用Alloy Team的博文《视差滚动的爱情故事》的图片和背景,来看看效果
<div class="article section1"> 
 每当我加班凌晨,独自一人走在黑暗的回家路上 
</div> 
<div class="article section2"> 
 我会想起那天夕阳下的奔跑 
</div> 
<div class="article section3"> 
 那是我逝去的,青春 
</div>

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里传递参数。
<!-- Section #1 --> 
<section id="home" data-speed="10" data-type="background"> 
 <article>I am Absolute Positioned</article> 
</section>
<!-- Section #2 --> 
<section id="about" data-speed="4" data-type="background"> 
 <article>Simple Parallax Scroll</article> 
</section>

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.教程、插件、欣赏

视差滚动效果

请大家参阅一下资源
懒人素材的《如何构建一个视差滚动网站HTML5
Alloy Team的《视差滚动的爱情故事
RIA Coder的《Edge Animate十分钟零代码实现HTML5视差滚动效果
codrops的《PARALLAX SLIDER WITH JQUERY
16个最棒的jQuery视差滚动效果教程
优设《让网页舞动起来!25个免费的视差滚动插件
W3Cplus《10个优秀视差滚动插件
设计达人《30+漂亮的视差滚动网页设计欣赏
W3Cfun《带给你完美体验的23个视差滚动插件
本博客的另一篇文章《18佳使滚动技术更上层楼的网站
完工!
感谢阅读,希望可以为您带来些许帮助!

转载请保留出处:工具猫 » 页面滚动背景图片不动的原理及实现

分享到:更多 ()