首先来看看蔚来官网长什么样子

不会做动图，所以具体效果可以去蔚来官网看

HTML

根据效果，我们来分析一下

页面加载进去后会有黑色的背景，而后慢慢地图片和文字动画加载出来说明背景图不是在父亲节点加背景图片，否则不会有黑色背景和图片的动画那么就需要一个单独的子盒子来做背景切换动画，中间居中的内容也需要盒子来包，可以得出的HTML结构是

.container>.items>.item>(.context>inner-box)+(.pic>img.bgp)

好了背景的盒子分析完了，再来观察一下内容

F12 发现
是一张logo，

，是一个p标签，这里可以观察到，p标签的长度和logo的长度一样大，假如用letter-spacing，把他撑开很显著不太理智，所以这里选择用text-align-last justify这个样式，那么就需要img和p标签都包在一个盒子里

，是两个a标签。都需要居中对其，而且两个a标签中间留有空白，可以考虑使用弹性布局，那么可以得出的HTML结构是：

.container>.items>.item>(.context>inner-box>(.wl-logo>img+p)+(.btn-box>a*2))+(.pic>img.bgp)

好了，HTML已经定义好了

CSS

css我就不细讲了，就把几个难的点说出来，并贴出部分css样式

• 前面的大盒子，宽度一律定义为100%

• .context 盒子的居中

  .context    position absolute    text-align center    top 26%    left 50%    transform translate(-50%, -50%)

• p标签的拉伸

  p    -moz-text-align-last justify    text-align-last justify

• a标签的弹性布局
  父盒子：

  .btn-box    display flex    justify-content space-between

  为了a标签尽可能美观少量，a：

  a    border 2px solid #fff    text-align center    width 45%    height 46px    line-height 46px    border-radius 23px    font-weight 700    font-size 16px    letter-spacing 2px

• 背景图动画加载时的黑色

  .pic    width 100%    background-color #000

JS

终于到了万众期待的JS部分了，这里引用了jquery的库，来简化我们操作

可以观察到蔚来官网，滚轮越往下滚，就会有一个从无到有的动画展示出来，那么很显著这里需要一个监听滚轮事件

$(document).scroll();

有了滚轮监听事件，还需要对有动画的元素进行操作，对每个有动画的元素加上class

<img src="./images/a.png" class="bgp logo" alt=""> //logo<p class="p">全国试驾开启</p> //p<a class="bat" href="#">报名试驾</a> //a<a class="bat" href="#">探究ES6</a> //a<img class="bgp" src="./images/b.jpg" alt=""> //背景图

先定义几个全局变量

const winHeight = $(window).height(), // 浏览器可视的高度      clsarr    = []; //所有需要操作的元素var   tp = $(document).scrollTop() || 0;//滚轮下滑的大小

那么先把所有需要操作的元素放在clsarr里，因为find()得到的结果是一个数组，为了防止后面操作麻烦，把他拆开来放进clsarr,避免clsarr成为一个二维数组

[].forEach.call($('.item'),item => {    pusharr(clsarr,$(item).find('.p'))    pusharr(clsarr,$(item).find('.bat'))    pusharr(clsarr,$(item).find('.bgp'))    function pusharr(arr1,arr2){        if(arr2.length <= 1){            arr1.push($(arr2[0]))        }else{            [].forEach.call(arr2,item=>{                arr1.push($(item))            })        }    }})

现在基本数据已经解决完毕了，开始页面动画的初始化，要让所有元素隐藏，首先定义一个css样式：

.hid    opacity 0

而后让每个元素增加上这个class

clsarr.forEach(item=>{    item.addClass('hid')})

现在要开始最关键的判定方法了，判断一个元素能否出现在可视区域内，来让我们看一个图：

元素需要一律在可视区域，才应该显示出来，背景只要要出现，不需要一律在可视区域就应该显示出来
假如一个元素一律展现在可视区域中，应该满足同时满足

1. 滚轮滚动的长度+页面可视的高度 > 元素的高度+元素到页面顶端的长度
2. 元素的高度+元素到页面顶端的长度度 > 滚轮滚动的长度

假如一个背景部分展现在可视区域中，应该满足同时满足

1. 滚轮滚动的长度+页面可视的高度 > 背景到页面顶端的长度
2. 背景到页面顶端的长度 + 背景的高度 > 滚轮滚动的长度

那么响应的js代码

function md(num){    return Math.round(num)}function isrender(tp,wh,ot,oh){ //元素判定方法 tp滚轮滚动的长度,wh页面可视的高度,ot元素的高度,oh元素到页面顶端的长度    if(((md(tp) + md(wh) - 20) > (md(ot) + md(oh))) && ((md(ot) + md(oh)) > md(tp))){        return true    }    return false}function isbgprender(tp,wh,ot,oh){ //背景判定方法 tp滚轮滚动的长度,wh页面可视的高度,ot背景的高度,oh背景到页面顶端的长度    if(((md(tp) + md(wh)) > md(ot)) && (md(ot) + md(oh) > (md(tp)))){        return true    }    return false}web前台开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停升级最新的教程和学习方法（详细的前台项目实战教学视频，PDF）

好了，终于到最后一步了了，先把动画定义一下

.anm //元素动画    opacity 1    animation pulse 1s linear 1.show //图片动画    transition all 2s ease .2s    opacity 1@keyframes pulse {    0%,50%{        opacity: 0;        transform: translate(0, 100%);    }    100% {        opacity: 1;        transform: translate(0, 0);    }}

而后把动画渲染到页面上去，流程图：

代码：

function render(tp,wh){    clsarr.forEach(ele=>{        if(ele.hasClass('bgp')){            if(ele.hasClass('logo')){                if(isrender(tp,wh,ele.offset().top,ele.height())){                    ele.addClass('show')                }             }else{                if(isbgprender(tp,wh,ele.offset().top,ele.height())){                    ele.addClass('show')                }            }        }else{            if(isrender(tp,wh,ele.offset().top,ele.height())){                ele.addClass('anm')            }         }    })}web前台开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停升级最新的教程和学习方法（详细的前台项目实战教学视频，PDF）

最后只要要在监听事件和外部调用这个方法就行啦：

render(tp,winHeight);$(document).scroll(()=>{    tp = $(document).scrollTop()    render(tp,winHeight)});

好了，完成了，通过这个小项目，我觉得大家可以更好的运用上你们学到的知识点。