不会作动图,因此具体效果能够去蔚来官网看css
根据效果,咱们来分析一下html
页面加载进去后会有黑色的背景,而后慢慢地图片和文字动画加载出来讲明背景图不是在父亲节点加背景图片,不然不会有黑色背景和图片的动画那么就须要一个单独的子盒子来作背景切换动画,中间居中的内容也须要盒子来包,能够得出的HTML结构是jquery
.container>.items>.item>(.context>inner-box)+(.pic>img.bgp)
复制代码
好了背景的盒子分析完了,再来观察一下内容 F12 发现 git
.container>.items>.item>(.context>inner-box>(.wl-logo>img+p)+(.btn-box>a*2))+(.pic>img.bgp)
复制代码
好了,HTML已经定义好了github
css我就不细讲了,就把几个难的点说出来,并贴出部分css样式数组
前面的大盒子,宽度所有定义为100%浏览器
.context 盒子的居中布局
.context
position absolute
text-align center
top 26%
left 50%
transform translate(-50%, -50%)
复制代码
p标签的拉伸flex
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部分了,这里引用了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)
});
复制代码
好了,总算完成了,附上网页连接 cysgg.github.io/weilai_proj… 源码 github.com/cysgg/weila…