视差滚动原理及实现

古城微笑少年丶 2022-08-25 11:49 179阅读 0赞

作为一种优雅酷炫的页面展示的方式，视差滚动（Parallax Scrolling）正受到越来越多前端设计师的宠爱，优设的[2014年网页设计趋势][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的博文《 视差滚动的爱情故事》的图片和背景，来看看 [效果][Link 1]。

<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 加上动画 ###

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

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上的一个 [效果][Link 3]，研究研究，看看实现过程。

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

<section id="home" data-speed="10" data-type="background">
      <article>I am Absolute Positioned</article>
    </section>
    
    <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][HTML5]》

Alloy Team的《 [视差滚动的爱情故事][Link 4]》

RIA Coder的《 [Edge Animate十分钟零代码实现HTML5视差滚动效果][Edge Animate_HTML5]》

codrops的《 [PARALLAX SLIDER WITH JQUERY][]》

《 [16个最棒的jQuery视差滚动效果教程][16_jQuery]》

优设《 [让网页舞动起来！25个免费的视差滚动插件][25]》

W3Cplus《 [10个优秀视差滚动插件][10]》

设计达人《 [30+漂亮的视差滚动网页设计欣赏][30]》

W3Cfun《 [带给你完美体验的23个视差滚动插件][23]》

本博客的另一篇文章《 [18佳使滚动技术更上层楼的网站][18]》

完工！

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

\---------------------------------------------------------------

[前端开发whqet][whqet]，关注web前端开发技术，分享网页相关资源。  
\---------------------------------------------------------------

[2014]: http://www.uisdc.com/in-2014-webpage-design-trends
[17 Inspiring Examples of Parallax Scrolling Sites]: http://webdesignledger.com/inspiration/17-inspiring-examples-of-parallax-scrolling-sites
[18 Beautiful Examples of Parallax Scrolling in Web Design]: http://webdesignledger.com/inspiration/18-beautiful-examples-of-parallax-scrolling-in-web-design
[Link 1]: http://codepen.io/whqet/pen/Dhgei
[Link 2]: http://codepen.io/whqet/pen/qkduB
[Link 3]: http://nettuts.s3.amazonaws.com/2138_SimpleParallax/Demo/index.html
[HTML5]: http://www.lanrensc.com/Web-Lessons/xHTML-CSS/294.shtml
[Link 4]: http://www.alloyteam.com/2014/01/parallax-scrolling-love-story/
[Edge Animate_HTML5]: http://www.donglongfei.com/2013/03/edge-animate-parallax-scrolling/
[PARALLAX SLIDER WITH JQUERY]: http://tympanus.net/codrops/2011/01/03/parallax-slider/
[16_jQuery]: http://blog.csdn.net/goodfav/article/details/12505459
[25]: http://www.uisdc.com/scrolling-plugins-for-awesome-experiences
[10]: http://www.w3cplus.com/source/10-best-Parallax-Scrolling-plugin.html
[30]: http://www.shejidaren.com/30-parallax-scroller-web-design.html
[23]: http://www.w3cfuns.com/thread-5599249-1-1.html
[18]: http://blog.csdn.net/whqet/article/details/8950901
[whqet]: http://blog.csdn.net/whqet