来作一个简单的蔚来汽车官网首页

时间 2019-12-11

标签来作一个简单汽车首页繁體版

原文原文链接

首先来看看蔚来官网长什么样子

不会作动图，因此具体效果能够去蔚来官网看css

HTML

根据效果，咱们来分析一下html

页面加载进去后会有黑色的背景，而后慢慢地图片和文字动画加载出来讲明背景图不是在父亲节点加背景图片，不然不会有黑色背景和图片的动画那么就须要一个单独的子盒子来作背景切换动画，中间居中的内容也须要盒子来包，能够得出的HTML结构是jquery

.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结构是：git

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

好了，HTML已经定义好了github

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标签的弹性布局
父盒子：flex

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

如今要开始最关键的断定方法了，判断一个元素是否出如今可视区域内，来让咱们看一个图：

元素须要所有在可视区域，才应该显示出来，背景只须要出现，不须要所有在可视区域就应该显示出来
若是一个元素所有展现在可视区域中，应该知足同时知足

滚轮滚动的长度+页面可视的高度 > 元素的高度+元素到页面顶端的长度
元素的高度+元素到页面顶端的长度度 > 滚轮滚动的长度

若是一个背景部分展现在可视区域中，应该知足同时知足

滚轮滚动的长度+页面可视的高度 > 背景到页面顶端的长度
背景到页面顶端的长度 + 背景的高度 > 滚轮滚动的长度

那么响应的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...