手写插件【滚动到可视区域播放动画】

最新推荐文章于 2025-04-30 22:57:57 发布

ange2017

最新推荐文章于 2025-04-30 22:57:57 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端js 文章标签：滚动到可视区域播放动画

本文链接：https://blog.youkuaiyun.com/ange2017/article/details/80335258

前端js 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种利用JavaScript实现的滚动触发动画方法。通过检测元素是否进入可视区域，动态添加动画类名，实现元素滚动到可视区域时自动播放动画的效果。文中提供了具体的代码实现，并附带了动画延时设置的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写一个简单的方法，让窗口滚动到可视区域时，即时可以出现动画。

怎么写动画延迟，直接把类名添加在页面中，实现动画延时。譬如:

.delay200{animation-delay:200ms}
.delay500{animation-delay:500ms}

 <h2 class="delay500" data-animate="fadeInUp">回首向来萧瑟处，归去，也无风雨也无晴。</h2>

css动画参考写法：

https://daneden.github.io/animate.css

重点是下面js

不需要改js复制即用，直接按上面的操作使用"data-animate"，里面写动画的类名即可

/*
说明：这是一个滚动到可视区域播放动画的插件，当窗口滚动到可视区域时添加ClassName进入动画；
    1.查找页面内所含有[data-animate]的元素，遍历得到他们本身；[data-animate]值为动态获取，需手写animation，
      更多动画效果请访问https://daneden.github.io/animate.css/；
    2.调用函数:计算元素是否到达可视区域 返回Boolean值；
注意：此方法不能用于ifarm,窗口滚动影响判断
*/
 
$(function() {
    var windowHeight = $(window).height(); //窗口高度 
    var element;

    // 元素在可视区域，即刻开始动画
    var dataAnimateEl = $('[data-animate]'); 
    if (dataAnimateEl.length > 0 || dataAnimateEl.length == 0 ) {
        dataAnimateEl.each(function() {
            element = $(this);             
            // 元素在可视区域，即刻开始动画
            // animationStart(element)
        })
    }

    // 监听页面滚动，开始动画
    $(window).scroll(function(event) { 
        var dataAnimateEl = $('[data-animate]'); 
        if (dataAnimateEl.length > 0 || dataAnimateEl.length == 0 ) {
            dataAnimateEl.each(function() {
                element = $(this);             
                // 元素在可视区域，即刻开始动画
                animationStart(element)
            })
        }
        
              
    });

    //开始动画
    function animationStart(element) { 
        var annimationVal = element.data("animate");
        if (viewingArea(element)) {
            element.removeClass(annimationVal).addClass(annimationVal)
        }
    }

    //函数作用：计算元素是否到达可视区域
    function viewingArea(element) {
        var objHeight = $(element).offset().top;　 //元素到顶部的高度
        let winPos = $(window).scrollTop(); //距离顶部滚动 
        let val = objHeight - winPos;
        if (val < windowHeight && val > 0) {
            //可视区域         
            return true;
        } else {
            //不可视区域 
            return false;
        }
    }

});