html5 css3下拉 动画css怎么写

html-css020

html5 css3下拉 动画css怎么写,第1张

大概的过程是这样的:

...

a(this).addClass("animated").find(".aninode").each(function() {

a(this).addClass(a(this).attr("data-animate"))

})

...

页面滚动到每个 section 元素的时候,先给它加个名为 animated 的 class ,在这样的 section 内部找到 class 名为 aninode 的 div 元素。这样的 div 元素或者其内部的元素会有个 data-animate="a-****" 的属性。把这个属性的值,也就是 a-**** 也当做 class 名称传给这个 div 元素或者其内部的元素。这个 class 里面就包含有动画样式。也就是说,通过 class="animated" 当做钩子,有 animated 这个 class 的时候,名为 aninode 的 div 元素或者其内部的元素才会执行相关的动画效果。

动画效果的 CSS 样式在 core.js 里面。控制动画执行是在 baomi.js 里面。

其实这个页面可以再完善下 section 元素 move 出屏幕的时候,去掉 animated;当move 回来的时候再加上 animated。目前的情况是,滚动到页面最低下以后,再往上滚动页面,就看不见动画效果了

/*

data:2022-11-17

author:lfp

move运动函数

dom--需要运动的对象

json--{width:100,height:100,left:100,top:100}

callback--回调函数 可调用自己 实现异步动画效果

*/

//主函数

function move(dom,json,callback){

//让每一次动画都是新的开始,防止出现动画一直不停的运行

if(dom.timer)clearInterval(dom.timer)

var i=0

var start=0

//在对象中增加timer 便于控制他停止

dom.timer=setInterval(function(){

i++

//循环每一个目标属性添加动画方法

for(var attr in json){

//获取当前attr的属性值 已经去除了px 还有 如果初始值是auto 用零代替

var cur=getStyle(dom,attr)

if(i==1)start=cur

//拿到该属性的目标值

var target=json[attr]

//设置分成10次增加增量 你可以根据需要修改

var speed=(target-start)/10

console.log(speed+"====="+cur)

//如果没有达到目标值就一直加

if(Math.abs(cur-target)>1){

dom.style[attr]=cur+speed+"px"

}else{

//达到目标值了就停止或者其他情况也停止

clearInterval(dom.timer)

//等停止了动画再回调函数进行另外的操作

if(callback)callback.call(dom)

}

}

},45)

}

//配套函数

function getStyle(dom,attr){

var value=""

if(window.getComputedStyle){

value=window.getComputedStyle(dom,false)[attr]

}else{

value=dom.currentStyle[attr]

}

value=parseInt(value)

return value || 0//如果你再样式中没有设置初始的值就会出现NaN 所以要用0来补充

}

function $(id){

//return document.getElementById(id)

return document.querySelector("#"+id)

}