• 35648

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

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

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0719/9314.html 1190000019807014

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

蔚来官网首页

不会做动图,所以具体效果可以去蔚来官网

HTML

根据效果,我们来分析一下

页面加载进去后会有黑色的背景,然后慢慢地图片和文字动画加载出来说明背景图不是在父亲节点加背景图片,否则不会有黑色背景和图片的动画那么就需要一个单独的子盒子来做背景切换动画,中间居中的内容也需要盒子来包,可以得出的HTML结构是

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

好了背景的盒子分析完了,再来观察一下内容
F12 发现图片描述是一张logo,
clipboard.png,是一个p标签,这里可以观察到,p标签的长度和logo的长度一样大,如果用letter-spacing,把他撑开很明显不太理智,所以这里选择用text-align-last justify这个样式,那么就需要img和p标签都包在一个盒子里
clipboard.png,是两个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')
})

现在要开始最关键的判定方法了,判断一个元素是否出现在可视区域内,来让我们看一个图:

clipboard.png

元素需要全部在可视区域,才应该显示出来,背景只需要出现,不需要全部在可视区域就应该显示出来
如果一个元素全部展示在可视区域中,应该满足同时满足

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

然后把动画渲染到页面上去,流程图:

clipboard.png

代码:

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

end

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!