华为nova5-scroll页面卷动淡入淡出效果

演示demo：https://codepen.io/han-bin520/pen/WNrjMaa

实现原理

页面卷动效果，即是我们所说的视差滚动。所谓的视差滚动，就是在页面滚动过程中，多层次的元素进行不同程度的位移，带来立体的视差效果。还有很多的奇思妙想的展现方式，都是滚动页面触发的，也可称为视差滚动。视差滚动里面最基础的就是切换背景，这点其实一个CSS就满足了。

实现方式

实现方式有三种，第一种是最简单的切换背景的视差滚动效果，是css里面的background-attachment属性，只需设置它的值fixed，它能实现的效果非常有限；第二种是用原生的js（示例所用的方法），首先监听整个视差的滚动

window.addEventListener('scroll', (e) => {})

再设置整个视口的滚动高度scrolled 

 let scrolled = document.documentElement.scrollTop /
      (document.documentElement.scrollHeight - document.documentElement.clientHeight);

最后去判断高度，实现原生的动画效果

 if(scrolled <= 0.5){
      $green.style.marginLeft = scrolled * 500 * -1 +"px";
      $green.style.opacity = (0.5-scrolled) / 0.5;

 示例代码： 

   *{
      margin: 0;
      padding: 0;
    }
    body,html{
      width: 100%;
      height: 4000px;
    }
    #phone{
      position: sticky;
      top: 0;
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }
    .green-left, .orange-right{
      position: absolute;
      top: 50%;
      transform: translate(-50%,-50%);
      width: 10%;
    }
    .number, .phone{
      position: absolute;
      top: 50%;
      left: 45%;
      transform: translate(-50%,-50%);
      width: 40%;
    }
  .green-left{
    left: 39%;
    z-index: 399;
    opacity: 1;
  }
    .orange-right{
      right: 39%;
      z-index: 399;
      opacity: 1;
    }
    .number{
      opacity: 0;
    }
    .phone{
      opacity: 0;
    }

<section id="phone">
  <img src="https://consumer-img.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/pdp/phones/nova5-pro/img/pic_s2_pc_green.png" alt="green" class="green-left">
  <img src="http://consumer-img.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/pdp/phones/nova5-pro/img/pic_s2_pc_orange.png" alt="orange" class="orange-right">
  <img src="https://consumer-img.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/pdp/phones/nova5-pro/img/pic_s3_pc_733.png" alt="733" class="number">
  <img src="https://consumer-img.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/pdp/phones/nova5-pro/img/pic_s3_pc_phone.png" alt=phone"" class="phone">
</section>

  window.addEventListener('scroll', (e) => {
    let $green = document.querySelector(".green-left");
    let $orange = document.querySelector(".orange-right");
    let $number = document.querySelector(".number");
    let $phone = document.querySelector(".phone");
    let scrolled = document.documentElement.scrollTop /
      (document.documentElement.scrollHeight - document.documentElement.clientHeight);
    if(scrolled <= 0.5){
      $green.style.marginLeft = scrolled * 500 * -1 +"px";
      $green.style.opacity = (0.5-scrolled) / 0.5;

      $orange.style.marginRight = scrolled * 500 * -1 +"px";
      $orange.style.opacity = (0.5-scrolled) / 0.5;
    }else {
      $green.style.opacity = 0;
      $orange.style.opacity = 0;
    }
    if(scrolled > 0.4 && scrolled < 0.7){
      $number.style.opacity = 0.4 + scrolled;
    }else if(scrolled >= 0.7){
      $number.style.opacity = 1;
    }
    else {
      $number.style.opacity = 0;
      $phone.style.opacity = 0;
    }

    if (scrolled > 0.7 && scrolled <= 1) {
      $phone.style.opacity = 0.1 + scrolled;
    }else {
      $phone.style.opacity = 0;
    }

  })    

第三种方法，就是采用插件的方式，比如常见的skrollr.js、parallax.js、scrollReveal.js和scrollMagic.js等，插件的方式能弥补原生js中出现的大量判断语句。华为的部分手机产品落地页就是用scrollMagic.js来做的

 

补充说明：视差滚动配合其他的一些动画套件就可以完成更加丰富多彩的动画滚动效果，比如iphone官网的视差滚动是配合lottie.js来执行动画序列，达到一种类似于3d旋转的动画效果。

iphone SE中的lottie.js

iphone SE中的动画序列