摘要：首先來看看蔚來官網(wǎng)長(zhǎng)什么樣子不會(huì)做動(dòng)圖，所以具體效果可以去蔚來官網(wǎng)看根據(jù)效果，我們來分析一下頁(yè)面加載進(jìn)去后會(huì)有黑色的背景，然后慢慢地圖片和文字動(dòng)畫加載出來說明背景圖不是在父親節(jié)點(diǎn)加背景圖片，否則不會(huì)有黑色背景和圖片的動(dòng)畫那么就需要一個(gè)多帶帶的

不會(huì)做動(dòng)圖，所以具體效果可以去蔚來官網(wǎng)看

根據(jù)效果，我們來分析一下

頁(yè)面加載進(jìn)去后會(huì)有黑色的背景，然后慢慢地圖片和文字動(dòng)畫加載出來說明背景圖不是在父親節(jié)點(diǎn)加背景圖片，否則不會(huì)有黑色背景和圖片的動(dòng)畫那么就需要一個(gè)多帶帶的子盒子來做背景切換動(dòng)畫，中間居中的內(nèi)容也需要盒子來包，可以得出的HTML結(jié)構(gòu)是

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

好了背景的盒子分析完了，再來觀察一下內(nèi)容
F12 發(fā)現(xiàn)是一張logo，
，是一個(gè)p標(biāo)簽，這里可以觀察到，p標(biāo)簽的長(zhǎng)度和logo的長(zhǎng)度一樣大，如果用letter-spacing，把他撐開很明顯不太理智，所以這里選擇用text-align-last justify這個(gè)樣式，那么就需要img和p標(biāo)簽都包在一個(gè)盒子里
，是兩個(gè)a標(biāo)簽。都需要居中對(duì)其，而且兩個(gè)a標(biāo)簽中間留有空白，可以考慮使用彈性布局，那么可以得出的HTML結(jié)構(gòu)是：

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

好了，HTML已經(jīng)定義好了

css我就不細(xì)講了，就把幾個(gè)難的點(diǎn)說出來，并貼出部分css樣式

前面的大盒子，寬度全部定義為100%

.context 盒子的居中

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

p標(biāo)簽的拉伸

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

a標(biāo)簽的彈性布局
父盒子：

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

為了a標(biāo)簽盡可能美觀一些，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

背景圖動(dòng)畫加載時(shí)的黑色

.pic
    width 100%
    background-color #000

終于到了萬眾期待的JS部分了，這里引用了jquery的庫(kù)，來簡(jiǎn)化我們操作

可以觀察到蔚來官網(wǎng)，滾輪越往下滾，就會(huì)有一個(gè)從無到有的動(dòng)畫展現(xiàn)出來，那么很明顯這里需要一個(gè)監(jiān)聽滾輪事件

$(document).scroll();

有了滾輪監(jiān)聽事件，還需要對(duì)有動(dòng)畫的元素進(jìn)行操作，對(duì)每個(gè)有動(dòng)畫的元素加上class

 //logo
全國(guó)試駕開啟
 //p
報(bào)名試駕 //a
探索ES6 //a
 //背景圖

先定義幾個(gè)全局變量

const winHeight = $(window).height(), // 瀏覽器可視的高度
      clsarr    = []; //所有需要操作的元素
var   tp = $(document).scrollTop() || 0;//滾輪下滑的大小

那么先把所有需要操作的元素放在clsarr里，由于find()得到的結(jié)果是一個(gè)數(shù)組，為了防止后面操作麻煩，把他拆開來放進(jìn)clsarr,避免clsarr成為一個(gè)二維數(shù)組

[].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))
            })
        }
    }
})

現(xiàn)在基本數(shù)據(jù)已經(jīng)處理完畢了，開始頁(yè)面動(dòng)畫的初始化，要讓所有元素隱藏，首先定義一個(gè)css樣式：

.hid
    opacity 0

然后讓每個(gè)元素添加上這個(gè)class

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

現(xiàn)在要開始最關(guān)鍵的判定方法了，判斷一個(gè)元素是否出現(xiàn)在可視區(qū)域內(nèi)，來讓我們看一個(gè)圖：

元素需要全部在可視區(qū)域，才應(yīng)該顯示出來，背景只需要出現(xiàn)，不需要全部在可視區(qū)域就應(yīng)該顯示出來
如果一個(gè)元素全部展示在可視區(qū)域中，應(yīng)該滿足同時(shí)滿足

滾輪滾動(dòng)的長(zhǎng)度+頁(yè)面可視的高度 > 元素的高度+元素到頁(yè)面頂端的長(zhǎng)度

元素的高度+元素到頁(yè)面頂端的長(zhǎng)度度 > 滾輪滾動(dòng)的長(zhǎng)度

如果一個(gè)背景部分展示在可視區(qū)域中，應(yīng)該滿足同時(shí)滿足

滾輪滾動(dòng)的長(zhǎng)度+頁(yè)面可視的高度 > 背景到頁(yè)面頂端的長(zhǎng)度

背景到頁(yè)面頂端的長(zhǎng)度 + 背景的高度 > 滾輪滾動(dòng)的長(zhǎng)度

那么響應(yīng)的js代碼

function md(num){
    return Math.round(num)
}

function isrender(tp,wh,ot,oh){ //元素判定方法 tp滾輪滾動(dòng)的長(zhǎng)度,wh頁(yè)面可視的高度,ot元素的高度,oh元素到頁(yè)面頂端的長(zhǎng)度
    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滾輪滾動(dòng)的長(zhǎng)度,wh頁(yè)面可視的高度,ot背景的高度,oh背景到頁(yè)面頂端的長(zhǎng)度
    if(((md(tp) + md(wh)) > md(ot)) && (md(ot) + md(oh) > (md(tp)))){
        return true
    }
    return false
}

好了，終于到最后一步了了，先把動(dòng)畫定義一下

.anm //元素動(dòng)畫
    opacity 1
    animation pulse 1s linear 1

.show //圖片動(dòng)畫
    transition all 2s ease .2s
    opacity 1

@keyframes pulse {
    0%,50%{
        opacity: 0;
        transform: translate(0, 100%);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

然后把動(dòng)畫渲染到頁(yè)面上去，流程圖：

代碼：

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

最后只需要在監(jiān)聽事件和外部調(diào)用這個(gè)方法就行啦：

render(tp,winHeight);

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

好了，總算完成了，附上網(wǎng)頁(yè)鏈接 https://cysgg.github.io/weila...，源碼：
https://github.com/cysgg/weil...