首先我们来看看蔚来的官网长什么样。不会做动画，可以去蔚来官网看html。根据效果我们分析一下，页面加载后会出现黑色背景，然后慢慢显示图片和文字。加载动画时，说明父节点没有添加背景图片，否则不会有黑色背景和图片动画，这时背景切换动画需要单独的子框，内容居中也需要打包成一个盒子，可以得到得到的HTML结构为.container>.items>.item>(.context>inner-box)+(.pic>img.bgp)分析完背景盒子，我们来看内容，发现是一个logo。,是一个p标签。这里可以观察到p标签的长度和logo的长度是一样的。如果使用letter-spacing的话，展开起来显然不合理，所以这里我们选择text-align-lastjustify的样式，那么img和p标签需要用一个盒子包裹起来，也就是两个a标签。两者都需要居中，并且两个a标签之间有空格，可以考虑使用弹性布局，那么可以绘制的HTML结构为：.container>.items>.item>(.context>inner-box>(.wl-logo>img+p)+(.btn-box>a*2))+(.pic>img.bgp)好了，HTML已经定义了CSScss我就不细说了，就一个难的说一下，在大框前面贴一些css样式，宽度全部定义为100%。上下文框的中心。contextpositionabsolutetext-aligncentertop26%left50%transformtranslate(-50%,-50%)p标签的拉伸p-moz-text-align-lastjustifytext-align-lastjustifytheelasticlayoutofthea标签父框:.btn-boxdisplayflexjustify-contentspace-between为了让a标签尽可能美观a:aborder2pxsolid#ffftext-aligncenterwidth45%height46pxline-height46pxborder-radius23pxfont-weight700font-size16pxletter-spacing2pxbackgroundimageanimationloadingblack.picwidth100%background-color#000JS终于到了万众期待的JS部分，下面是quote安装jquery库是为了简化我们的操作。我们可以观察到，在蔚来官网上，滚轮越往下滚，就会有从头开始的动画，可见这里需要一个监听滚轮事件$(document).scroll();有了滚轮监听事件，还需要对带动画的元素进行操作，给每个带动画的元素加上cla??ss//logo全国试驾开始
//p
报名试驾//aExploreES6//a//定义几个背景imagesfirst全局变量constwinHeight=$(window).height(),//浏览器可见高度clsarr=[];//所有需要操作的元素vartp=$(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'))fufunctionpusharr(arr1,arr2){if(arr2.length<=1){arr1.push($(arr2[0]))}else{[].forEach.call(arr2,item=>{arr1.push($(item))})}}})至此基础数据已经处理完毕，开始页面动画的初始化。隐藏所有元素，首先定义一个css样式：.hidopacity0然后给每个元素加上这个classclsarr.forEach(item=>{item.addClass('hid')})现在是时候开始最关键的判断了方法，判断一个元素是否出现在可见区域，我们看一张图：所有的元素都需要在可见区域view区域才应该显示。背景只需要出现即可，不需要全部在视图区内就可以显示。如果一个元素全部显示在视图区，则应该同时满足滚轮滚动长度+页面可见高度>元素高度+元素到页面顶部的高度元素+元素到页面顶部的长度>滚轮长度如果背景部分显示在可见区域，应满足滚轮长度+可见页面高度>从的长度背景到页面顶部背景到页面顶部的长度+背景的高度>滚轮的长度然后对应的js代码functionmd(num){returnMath.round(num)}functionisrender(tp,wh,ot,oh){//元素判断方法tp滚轮长度，wh页面可见高度，ot元素高度，oh元素到页面顶部的长度if(((md(tp)+md(wh)-20)>(md(ot)+md(oh)))&&((md(ot)+md(oh))>md(tp))){返回true}returnfalse}functionisbgprender(tp,wh,ot,oh){//背景判断方法tp滚轮长度，wh页面可见高度，ot背景高度，oh背景为这一页顶面长度if(((md(tp)+md(wh))>md(ot))&&(md(ot)+md(oh)>(md(tp)))){returntrue}returnfalse}好了，终于到最后一步了，先定义动画吧。anm//元素动画opacity1animationpulse1slinear1.show//图片动画transitionall2sease.2sopacity1@keyframespulse{0%,50%{不透明度：0;转换：翻译（0，100%）；}100%{不透明度：1；转换：翻译（0，0）；}}然后渲染动画到页面，流程图：代码：functionrender(tp,wh){clsarr.forEach(ele=>{if(ele.hasClass('bgp')){if(ele.hasClass('徽标')){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')}}})}最后只需要在监听事件和外部调用这个方法：render(tp,winHeight);$(document).scroll(()=>{tp=$(document).scrollTop()渲染（tp，winHeight）}）;嗯，总算写完了，附上网页链接https://cysgg.github.io/weila...，源码：https://github.com/cysgg/weil...end
