來作一個簡單的蔚來汽車官網首頁

首先來看看蔚來官網長什麼樣子

不會作動圖，因此具體效果能夠去蔚來官網看

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
}

好了，終於到最後一步了了，先把動畫定義一下

.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...

end