原生JS实现随着鼠标滚动到元素位置触发对应css3动画,简单易用

废话不多说,直接上代码,附用法,纯博主手写,看完后,觉得好左上角请点个赞,觉得不好的请留下您的建议,谢谢(此代码改版很方便,大家可以任意发挥)

(注意:如果不想自己写动画的,可以引入Animate.css  相信这个动画库大家都不陌生)

body{overflow-x: hidden;}
div{width: 100px;height: 100px;margin: 100px auto 0;background: red;}

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

用法很简单:

1)注意:没有自己写动画效果时,记得引入animate.css动画库

2)在想要添加动画的元素上添加class类名 dream

3)然后添加自定义属性 ( data-animate="动画名称,动画时间,动画速率" ),注意中间有 ","号隔开

4)加上后查看效果即可,使用前可以先复制博主代码查看下效果

(您的评价是对博主最大的鼓励,欢迎评价,觉得好左上角请点个赞,觉得不好的请留下您的建议,谢谢 (* ̄︶ ̄)  )

你可能感兴趣的:(页面滚动执行相应css3动画)