摘要:首先来看看蔚来官网长什么样子不会做动图,所以具体效果可以去蔚来官网看根据效果,我们来分析一下页面加载进去后会有黑色的背景,然后慢慢地图片和文字动画加载出来说明背景图不是在父亲节点加背景图片,否则不会有黑色背景和图片的动画那么就需要一个多带带的
首先来看看蔚来官网长什么样子
不会做动图,所以具体效果可以去蔚来官网看
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已经定义好了
CSScss我就不细讲了,就把几个难的点说出来,并贴出部分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 #000JS
终于到了万众期待的JS部分了,这里引用了jquery的库,来简化我们操作
可以观察到蔚来官网,滚轮越往下滚,就会有一个从无到有的动画展现出来,那么很明显这里需要一个监听滚轮事件
$(document).scroll();
有了滚轮监听事件,还需要对有动画的元素进行操作,对每个有动画的元素加上class
//logo全国试驾开启
//p 报名试驾 //a 探索ES6 //a //背景图
先定义几个全局变量
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...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/105781.html
摘要:首先来看看蔚来官网长什么样子不会做动图,所以具体效果可以去蔚来官网看根据效果,我们来分析一下页面加载进去后会有黑色的背景,然后慢慢地图片和文字动画加载出来说明背景图不是在父亲节点加背景图片,否则不会有黑色背景和图片的动画那么就需要一个单独的 首先来看看蔚来官网长什么样子 showImg(https://segmentfault.com/img/bVbvgqY?w=1904&h=935)...
摘要:首先来看看蔚来官网长什么样子不会做动图,所以具体效果可以去蔚来官网看根据效果,我们来分析一下页面加载进去后会有黑色的背景,然后慢慢地图片和文字动画加载出来说明背景图不是在父亲节点加背景图片,否则不会有黑色背景和图片的动画那么就需要一个单独的 首先来看看蔚来官网长什么样子 showImg(https://segmentfault.com/img/bVbvgqY?w=1904&h=935)...
摘要:由于汽车对安全性可靠性实时性,和传感器带宽算力的高要求,及其复杂的软件供应链生态,智能汽车会催生下一代计算操作系统。软件生态与容器放眼智能汽车的生态圈,今天的座舱与两个域计算机都是以整体解决方案的方式售卖给整车厂。 【CSDN 编者按】智能汽车正在被软件定义,而以软件为中心的新架构也...
摘要:近日,来自腾讯云官网的消息显示,腾讯云未来峰会将于月日正式开幕。马化腾再站台,腾讯云是智能时代突破口目前,腾讯云已成为腾讯先进技术的重要出口,更是腾讯占据智能时代重要的突破口。腾讯云未来峰会,腾讯云将如何布局将会有什么产品,不妨拭目以待。近日,来自腾讯云官网的消息显示,2018腾讯云+未来峰会将于5月23日正式开幕。本届云+未来峰会以焕启为主题,将邀请8000余名行业及技术嘉宾,共同参与并探...
阅读 3101·2021-11-08 13:18
阅读 2247·2019-08-30 15:55
阅读 3580·2019-08-30 15:44
阅读 3027·2019-08-30 13:07
阅读 2758·2019-08-29 17:20
阅读 1909·2019-08-29 13:03
阅读 3381·2019-08-26 10:32
阅读 3201·2019-08-26 10:15