First let's see what Weilai's webmaster looks like

No graphics, so the effect can go Weilai Official Website see

HTML

Based on the results, let's analyze

Pages are loaded with a black background, and then slowly map pictures and text animations are loaded to illustrate that the background image is not a background picture on the father node, otherwise there will be no black background and picture animation, then a separate sub-box is needed to do the background switching animation, and the contents in the middle also need a box to do the background switching animation.Package, the resulting HTML structure is

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

Now that the background box is analyzed, let's look at the content again
F12 DiscoveryIs a logo,
, is a p tag, you can see here that the length of the P tag is the same as the length of the logo. It is obviously not sensible to use letter-spacing to support it, so if you choose the text-align-last justify style here, you will need both the img and P tags wrapped in a box
Is two a labels.They need to be centered, and there is a gap between the two a tags. Consider using an elastic layout, then the HTML structure you can derive is:

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

Okay, the HTML is already defined

CSS

I won't go into detail about css, just say a few difficult points and paste out some CSS Styles

• Big box in front, width defined as 100%

• Center of the.context box

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

• Stretch of p Label

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

• Elastic Layout of a Label
  Parent box:

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

  To make the label a as beautiful as possible, 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
  

• Black when background animation loads

  .pic
      width 100%
      background-color #000
  

JS

It's finally the JS section that everyone is looking forward to, where jquery's libraries are referenced to simplify our operations

Observing the popularity of the official web, the more the wheels roll down, the more an animation will emerge from nothing, so it is obvious that there is a need to listen for wheel events

$(document).scroll();

With a wheel to listen for events, you also need to operate on animated elements, adding class to each animated element

<img src="./images/a.png" class="bgp logo" alt=""> //logo
<p class="p">National Test Drive Open</p> //p
<a class="bat" href="#">Sign up for a test drive</a> //a
<a class="bat" href="#">Explore ES6</a> //a
<img class="bgp" src="./images/b.jpg" alt=""> //Background Map

Define several global variables first

const winHeight = $(window).height(), // Height of browser visibility
      clsarr    = []; //All elements that require action
var   tp = $(document).scrollTop() || 0;//The size of the wheel slide down

So first put all the elements that need to be manipulated in clsarr, because find() results in an array, in order to prevent subsequent operations, break it up and put it in clsarr, to avoid clsarr becoming a two-dimensional array

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

Now that the basic data has been processed, start the initialization of the page animation. To hide all elements, first define a css style:

.hid
    opacity 0

Then let each element add this class

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

Now it's time to start with the most critical method of determining whether an element appears in the visible area. Let's look at a diagram:

Elements need to be all in the visual area before they should be displayed, backgrounds only need to appear, and not all in the visual area.
If an element is all displayed in the visual area, it should be satisfied at the same time

1. Roller length + Page visible height > Element height + Element to top length
2. Height of element + Length of element to top of Page > Length of roll wheel

If a background part is displayed in the visible area, it should be satisfied at the same time

1. Length of wheel roll + height of page visibility > length from background to top of page
2. Length from Background to Top of Page + Height of Background > Length of Rolling Wheel

Then the js code for the response

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

function isrender(tp,wh,ot,oh){ //Element determination method tp wheel roll length, wh page visible height, ot element height, oh element to the top of the page length
    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){ //Background determination method tp wheel roll length, wh page visible height, ot background height, oh background to the top of the page length
    if(((md(tp) + md(wh)) > md(ot)) && (md(ot) + md(oh) > (md(tp)))){
        return true
    }
    return false
}

Okay, finally to the last step, let's define the animation first

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

Then animate the page, flow chart:

Code:

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

Finally, you just need to call this method while listening for events and externally:

render(tp,winHeight);

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

Okay, that's it, with a link to the web page https://cysgg.github.io/weila...

end