web前端入门到实战：来做一个简单的蔚来汽车官网首页
//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
}
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）
好了，终于到最后一步了了，先把动画定义一下
.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')
}
}
})
}
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）
最后只需要在监听事件和外部调用这个方法就行啦：
render(tp,winHeight);
$(document).scroll(()=>{
tp = $(document).scrollTop()
render(tp,winHeight)
});
好了，完成了，通过这个小项目，我觉得大家可以更好的运用上你们学到的知识点。
