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

13916016158

关注迅速公众平台

关注微信联系人

企业电话：021-64391578

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

body{overflow-x: hidden;}
div{width: 100px;height: 100px;margin: 100px auto 0;background: red;}
<body>
    <div class="dream" data-animate="bounceInUp,1s,linear"></div>
    <div class="dream" data-animate="flash,2s,linear"></div>
    <div class="dream" data-animate="pulse,1s,linear"></div>
    <div class="dream" data-animate="rubberBand,1s,linear"></div>
    <div class="dream" data-animate="shake,1s,linear"></div>
    <div class="dream" data-animate="swing,1s,linear"></div>
    <div class="dream" data-animate="tade,1s,linear"></div>
    <div class="dream" data-animate="wobble,1s,linear"></div>
    <div class="dream" data-animate="jello,1s,linear"></div>
    <div class="dream" data-animate="bounceIn,1s,linear"></div>
    <div class="dream" data-animate="bounceInDown,1s,linear"></div>
    <div class="dream" data-animate="bounceInLeft,1s,linear"></div>
    <div class="dream" data-animate="bounceInRight,1s,linear"></div>
    <div class="dream" data-animate="bounceInUp,1s,linear"></div>
    <div class="dream" data-animate="bounceOut,1s,linear"></div>
    <div class="dream" data-animate="bounceOutDown,1s,linear"></div>
    <div class="dream" data-animate="bounceOutLeft,1s,linear"></div>
    <div class="dream" data-animate="bounceOutRight,1s,linear"></div>
    <div class="dream" data-animate="bounceOutUp,1s,linear"></div>
    <div class="dream" data-animate="fadeIn,1s,linear"></div>
    <div class="dream" data-animate="fadeInDown,1s,linear"></div>
    <div class="dream" data-animate="fadeInLeft,1s,linear"></div>
    <div class="dream" data-animate="fadeInRight,1s,linear"></div>
    <div class="dream" data-animate="fadeInUp,1s,linear"></div>
    <div class="dream" data-animate="fadeInDownBig,1s,linear"></div>
    <div class="dream" data-animate="fadeInLeftBig,1s,linear"></div>
    <div class="dream" data-animate="fadeInRightBig,1s,linear"></div>
    <div class="dream" data-animate="fadeInUpBig,1s,linear"></div>
    <div class="dream" data-animate="flip,1s,linear"></div>
    <div class="dream" data-animate="hinge,1s,linear"></div>
</body>
<script>
// 获取浏览器可见区域高度
var window_height= document.documentElement.clientHeight;
// 用户手动修改浏览器可见区域高度时修改变量
window.οnresize=function () {
    window_height=document.documentElement.clientHeight;
};
// 获取所需效果元素
var My_dream=document.getElementsByClassName('dream');
// 鼠标滚轮滚动执行方法
window.onscroll = function(){
    // 获取鼠标滚轮滚动距离
    var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

    // 循环类dream
    for (var k=0;k<My_dream.length;k++){
        if (_scrollTop>= getOffsetTop(My_dream[k]) - window_height && _scrollTop<= getOffsetTop(My_dream[k]) ){
            My_dream[k].style.animationName=My_dream[k].dataset.animate.split(',')[0];
            My_dream[k].style.animationDuration=My_dream[k].dataset.animate.split(',')[1];
            My_dream[k].style.animationTimingFunction=My_dream[k].dataset.animate.split(',')[2];
        }
    }
};

// 判断元素父集是否有已定位元素
function getOffsetTop(ele) {
    var rtn = ele.offsetTop;
    var o = ele.offsetParent;
    while(o!=null)
    {
        rtn += o.offsetTop;
        o = o.offsetParent;
    }
    return rtn;
}

// 滚动条等于0时执行第一屏效果
function my_animation() {
    var _scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    // 效果方法
    for (var k=0;k<My_dream.length;k++){
        if (_scrollTop>= getOffsetTop(My_dream[k]) - window_height && _scrollTop<= getOffsetTop(My_dream[k]) ){
            My_dream[k].style.animationName=My_dream[k].dataset.animate.split(',')[0];
            My_dream[k].style.animationDuration=My_dream[k].dataset.animate.split(',')[1];
            My_dream[k].style.animationTimingFunction=My_dream[k].dataset.animate.split(',')[2];
        }
    }
}
my_animation();
</script>
用法很简单：

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

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

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

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

（您的评价是对博主最大的鼓励，欢迎评价，觉得好左上角请点个赞，觉得不好的请留下您的建议，谢谢 (*￣︶￣) ）
————————————————
版权声明：本文为CSDN博主「likeYou1207」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/likeyou1207/article/details/80782935