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

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

发布时间：2018-06-23 14:03,

浏览次数：404

, 标签：

JS

css

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

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

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

0;background: red;}

    

data-animate="bounceInUp,1s,linear">

    

data-animate="flash,2s,linear">

    

data-animate="pulse,1s,linear">

    

data-animate="rubberBand,1s,linear">

    

data-animate="shake,1s,linear">

    

data-animate="swing,1s,linear">

    

data-animate="tade,1s,linear">

    

data-animate="wobble,1s,linear">

    

data-animate="jello,1s,linear">

    

data-animate="bounceIn,1s,linear">

    

data-animate="bounceInDown,1s,linear">

    

data-animate="bounceInLeft,1s,linear">

    

data-animate="bounceInRight,1s,linear">

    

data-animate="bounceInUp,1s,linear">

    

data-animate="bounceOut,1s,linear">

    

data-animate="bounceOutDown,1s,linear">

    

data-animate="bounceOutLeft,1s,linear">

    

data-animate="bounceOutRight,1s,linear">

    

data-animate="bounceOutUp,1s,linear">

    

data-animate="fadeIn,1s,linear">

    

data-animate="fadeInDown,1s,linear">

    

data-animate="fadeInLeft,1s,linear">

    

data-animate="fadeInRight,1s,linear">

    

data-animate="fadeInUp,1s,linear">

    

data-animate="fadeInDownBig,1s,linear">

    

data-animate="fadeInLeftBig,1s,linear">

    

data-animate="fadeInRightBig,1s,linear">

    

data-animate="fadeInUpBig,1s,linear">

    

data-animate="flip,1s,linear">

    

data-animate="hinge,1s,linear">

用法很简单：

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

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

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

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

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

如果您还是觉得很模糊的，请留下您的联系方式，博主会在一天内给您回复