元素出现在页面时，添加动画，配合animate.css使用

最新推荐文章于 2025-07-09 11:08:06 发布

原创最新推荐文章于 2025-07-09 11:08:06 发布 · 4.1k 阅读

9 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#动画 #animate.css #添加动画

javascript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种在页面元素滚动进入和离开视口时触发动画的方法，包括两种情况：一是执行进入和离开动画，二是仅执行进入动画。

我工作中经常遇到这样的需求：当某个元素出现在页面中时给他加一些动画，于是封装了一个配合animate.css使用的添加动画的函数。为了使用起来方便。哈哈，现在把他总结一下放到这里。

功能：某个元素出现在页面中进入时做什么动画，离开时做什么动画（搭配animate.css使用)

1. 做两次动画：进入动画，和离开动画

参数：

element 要做动画的元素
className 进入时要做的动画（class类）
leaveStyle 离开时要做的动画（class类）
parentEle 要做动画元素的父元素（因为有些元素做动画之前他的高度会为0，影响页面的显示效果。有关纵方向的动画都需要加父容器，若无此问题则不用传）

var myIndexScroll = function(element,className,leaveStyle,parentEle){

//刚开始先执行一次
     element.addClass('animated '+className);

    $(window).scroll(function(){

        element.css('opacity','0')


        //页面卷曲高度
        var scrollHeight = $(window).scrollTop();

        //有写父容器则用否则用动画元素
        var ele = parentEle || element;

        //顶部距文章顶部高度
        var elementTopToTop = ele.offset().top
        //显示器高度
        var screenH = $(window).height()
        //当元素从上往下出现在屏幕中
    if(elementTopToTop  - scrollHeight >=  0 && elementTopToTop - scrollHeight  <= screenH )
        {
            element.removeClass('animated '+leaveStyle).addClass('animated '+className).css('opacity','1');
        //当元素离开屏幕
        }else if(elementTopToTop - scrollHeight+ele.height() <  0 || elementTopToTop - scrollHeight > screenH)
        {
          element.removeClass('animated '+className).addClass('animated '+leaveStyle);
        }
        //当元素从下往上出现屏幕
        else if( scrollHeight>elementTopToTop )
        {
          if(elementTopToTop + ele.height() >= scrollHeight){
            element.removeClass('animated '+leaveStyle).addClass('animated '+className).css('opacity','1');
          }
        }
    })
}

调用：输入参数（做动画的元素，出现动画，离开动画）

myIndexScroll($('.news'),'fadeInUp','fadeOutDown');

调用（有父元素）：输入参数（做动画的元素，出现动画，离开动画，动画元素的父容器（有关纵方向的动画都需要加父容器）

myIndexScroll($('.discribe'),'fadeInDown slow','fadeOutLeft',$('.banner'));

2.做一次动画：只做进入动画

var myIndexScroll = function(element,className){

    var mainEvent =function(){
            element.css('opacity','0')
            //页面卷曲高度
            var scrollHeight = $(window).scrollTop();

            //顶部距文章顶部高度
            var elementTopToTop = element.offset().top
            //显示器高度
            var screenH = $(window).height()
            //当元素从上往下出现在屏幕中
        if(elementTopToTop  - scrollHeight >=  0 && elementTopToTop - scrollHeight  <= screenH )
            {
                element.addClass('animated '+className).css('opacity','1');
            }
        }
// 开始先执行一次
    mainEvent();

    $(window).scroll(function(){

      mainEvent();

    })

}

调用：输入参数（做动画的元素，出现动画，离开动画，动画元素的父容器（有关纵方向的动画都需要加父容器）

myIndexScroll($('.news'),'fadeInUp slow');

如果帮到你的话，希望在留言区告诉我一下哦，哈哈哈，谢谢