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

林龙_

已于 2022-04-24 10:22:14 修改

阅读量8.9k

点赞数 21

分类专栏：页面滚动执行相应css3动画文章标签：滚动动画效果原生js监听滚动条高度执行动画效果鼠标滚轮滚动到当前位置执行相应动画随着鼠标滚动到元素位置触发对应css3动画

于 2018-06-23 14:03:47 首次发布

本文链接：https://blog.csdn.net/likeYou1207/article/details/80782935

版权

页面滚动执行相应css3动画专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

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.onresize = function () {
            window_height = document.documentElement.clientHeight;
        };
        // 获取所需效果元素
        var My_dream = document.getElementsByClassName('dream');
        // 鼠标滚轮滚动执行方法
        window.onscroll = function () {
            my_animation()
        };
        // 用于第一屏没有滚动滚动条时触发一下
        my_animation();

        // 判断元素父集是否有已定位元素
        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];
                }
            }
        }
</script>

用法很简单：

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

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

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

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

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

入行没多久时写的有点low 来优化一下代码重复

如果资金充裕，可以请我喝杯咖啡，谢谢 Thanks♪(･ω･)ﾉ

林龙_

关注

21
点赞
踩
51

收藏

觉得还不错? 一键收藏
21
评论
原生JS实现随着鼠标滚动到元素位置触发对应css3动画，简单易用

废话不多说，直接上代码，附用法，纯博主手写，看完后，觉得好左上角请点个赞,觉得不好的请留下您的建议，谢谢（此代码改版很方便，大家可以任意发挥）（注意：如果不想自己写动画的，可以引入Animate.css 相信这个动画库大家都不陌生）body{overflow-x: hidden;}div{width: 100px;height: 100px;margin: 100px auto 0;...
复制链接

扫一扫