2种实现网页视差滚动效果的方法以及其扩展效果

网页视差滚动效果

目录

1. 利用CSS的background-attachment属性实现视差滚动（纯CSS方法）
2. 在1的基础上加上CSS3过度特效
3. 利用层次滚动速度的差异实现视差滚动（js方法）
4. 在3的基础上实现上下视差滚动

1. 利用CSS的background-attachment属性实现视差滚动

• 我们来重新再来熟悉一下background属性（纯css方法）

  
  background-position: 设置背景图像的起始位置
  background-repeat: 设置是否及如何重复背景图像
  background-size: 规定背景图像的尺寸
  background-attachment: 设置背景图像是否固定或者随着页面的其余部分滚动

  具体看这里

• 重点来关注一下background-attachment属性

  
  background-attachment有3个参数：
  scroll：默认值。背景图像会随着页面其余部分的滚动而移动。
  fixed:当页面的其余部分滚动时，背景图像不会移动。
  inherit:规定应该从父元素继承 background-attachment 属性的设置。

  我们就是要利用background-attachment: fixed；来实现视差滚动效果。大致步骤是：

  1. 创建3个div，并分别给这3个div添加背景图（background-image）

  2. 设置把3个背景图的background-attachment设置成fixed
     代码：

     .section1,
     .section2,
     .section3 {
     height: 800px;
     width: 1000px;
     margin: 0 auto;
     font: 18px "Microsoft YaHei";
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;  /* 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。*/
     background-attachment: fixed;  /** 这步是关键！！！ */
     }
     .section1 {
     background-image: url("20.jpg");
     }
     .section2 {
     background-image: url("30.jpg");
     }
     .section3 {
     background-image: url("43.jpg");
     } 
     

     具体看： 这里

2. 在1的基础上加上CSS3过度特效

• 简单来说，就是在scroll事件上添加一些动画事件： 滚动到页面某个值后会触发一个CSS3动画，这也是众多视差滚动中常见的一种。

• 首先来熟悉一下CSS3的过渡特效(transition属性)

  
  看这里

• 具体结果和代码

  
  看这里

3. 利用层次滚动速度的差异实现视差滚动（js方法）

• 来普及一波原理：

  
  让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。

  举个栗子：
  在超级马里奥这个游戏中，当玩家操控马里奥移动时，
  砖块和水管跟马里奥在同一层次（我们暂且称为“前景层”或“近景层”），这一层移动速度最块。
  天上的白云为另一层次（称为“中间层”），移动速度中等。
  背后的小山丘是最后一层（称为“背景层”），速度最慢。
  三个层次按照不同的速度移动，就会产生一种立体的视差效果。

• 核心代码：

  
  在页面滚动过程中，我们获取页面的scrollTop的值，根据不同参数值去设置各自scene的top值，这样滚动页面的时候，不同的速度就出来了

        function onScroll() {
          var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
          //  背景层、中间层、前景层按照不同的速度移动，从而产生视差效果
          sceneBack.style.top = old_top1 + scrollTop*0.9 + "px"; //  背景层（速度最慢）
          sceneCenter.style.top = old_top2 + scrollTop*0.5 + "px"; //中间层（速度中等）
          sceneFront.style.top = old_top3 + scrollTop*0.3 + "px"; // 前景层（速度最快）
        }
    

• 具体结果和代码

  
  看介里

4. 在3的基础上实现上下视差滚动

实现这个效果的原理和3中介绍的是一样的，只不过不是所有的元素都是往上升，而是一些元素上升，一些元素下沉。在计算top值的时候，不是“加上”，变成“减去”scrollTop就会有相应的效果。所以就有以下计算公式：

newTop1 = oldTop1 + scrollTop * x1 ;   (x1是个系数)
newTop2 = oldTop2 - scrollTop * x2 ;   (x2是个系数)

这里要注意就是，如果我们想要两个元素在某一时刻滚动到同一水平线上的话，即要使：newTop1 == newTop2。加入oldTop1一开始为-1000px，oldTop2一开始为1000px，并要求滚动到1000px时，两个元素处在同一水平线上（即scrollTop为1000px），那么代入解下方程即可得到x1为2，x2为0。所以代码变为：

    function onScroll() {
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
      //  按照不同的速度移动，从而产生视差效果
      img1.style.top = old_top1 + scrollTop*2 + "px"; //  图片1向上移动
      img2.style.top = old_top2 - scrollTop*0 + "px"; //  由于视差效果，当图片1向上移动，图片2只要按照原来速度（跟着滚动条滚动）即可营造视差效果，而且这样就可以把两个图片在某一时刻处于同一水平线上
    }

具体效果和代码请看：
这里