摘要：首先來看看蔚來官網長什么樣子不會做動圖，所以具體效果可以去蔚來官網看根據效果，我們來分析一下頁面加載進去后會有黑色的背景，然后慢慢地圖片和文字動畫加載出來說明背景圖不是在父親節點加背景圖片，否則不會有黑色背景和圖片的動畫那么就需要一個多帶帶的

不會做動圖，所以具體效果可以去蔚來官網看

根據效果，我們來分析一下

頁面加載進去后會有黑色的背景，然后慢慢地圖片和文字動畫加載出來說明背景圖不是在父親節點加背景圖片，否則不會有黑色背景和圖片的動畫那么就需要一個多帶帶的子盒子來做背景切換動畫，中間居中的內容也需要盒子來包，可以得出的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樣式

前面的大盒子，寬度全部定義為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部分了，這里引用了jquery的庫，來簡化我們操作

可以觀察到蔚來官網，滾輪越往下滾，就會有一個從無到有的動畫展現出來，那么很明顯這里需要一個監聽滾輪事件

$(document).scroll();

有了滾輪監聽事件，還需要對有動畫的元素進行操作，對每個有動畫的元素加上class

 //logo
全國試駕開啟
 //p
報名試駕 //a
探索ES6 //a
 //背景圖

先定義幾個全局變量

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")
})

現在要開始最關鍵的判定方法了，判斷一個元素是否出現在可視區域內，來讓我們看一個圖：

元素需要全部在可視區域，才應該顯示出來，背景只需要出現，不需要全部在可視區域就應該顯示出來
如果一個元素全部展示在可視區域中，應該滿足同時滿足

滾輪滾動的長度+頁面可視的高度 > 元素的高度+元素到頁面頂端的長度

元素的高度+元素到頁面頂端的長度度 > 滾輪滾動的長度

如果一個背景部分展示在可視區域中，應該滿足同時滿足

滾輪滾動的長度+頁面可視的高度 > 背景到頁面頂端的長度

背景到頁面頂端的長度 + 背景的高度 > 滾輪滾動的長度

那么響應的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
}

好了，終于到最后一步了了，先把動畫定義一下

.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")
            } 
        }
    })
}

最后只需要在監聽事件和外部調用這個方法就行啦：

render(tp,winHeight);

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

好了，總算完成了，附上網頁鏈接 https://cysgg.github.io/weila...，源碼：
https://github.com/cysgg/weil...