页面滚动背景图片不动的原理及实现-视差滚动（Parallax Scrolling）

作为一种优雅酷炫的页面展示的方式，视差滚动（Parallax Scrolling）正受到越来越多前端设计师的宠爱，优设的2014年网页设计趋势中依然能够看到它的影子，所以我们不得不来好好研究下视差滚动的原理和实现方式。

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事件，当页面滚动某个地方时()，我们给元素添加动画。
html和css也要进行一些修

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');
    }
}

4.3 背景运动
刚刚两个情况只是背景保持fixed的状态，我们可以给包括背景在内的多层次元素添加运动，从而实现视差滚动。多背景时，需要确保上面的背景是透明的。看看nettuts上的一个效果，研究研究，看看实现过程。
html文件里面使用了data-speed和data-type向js里传递参数。

/*统一设置背景的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;
}

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佳使滚动技术更上层楼的网站》
完工！
感谢阅读，希望可以为您带来些许帮助！

Tags：视差滚动, 背景滚动

阿Q正传

阿Q正传

最新文章

最近回复

链接