js 滚动触发动画

最新推荐文章于 2024-07-30 11:44:55 发布

t121097

最新推荐文章于 2024-07-30 11:44:55 发布

阅读量1.2k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/t121097/article/details/80233589

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

样式：

.move1
{
    position: relative;
    visibility: hidden;
    text-align: center;
    margin-left: auto;
    margin-right: auto;

    /*animation:fadeIn 2s;
    -webkit-animation:fadeIn 2s;*/ /* Safari and Chrome */

}

动画：

@keyframes fadeIn
{
    0%   {left:10%;  Opacity:0;}
    100% {left:0%;   Opacity:0.9;}
}

@-webkit-keyframes fadeIn /* Safari and Chrome */
{
    0%   {left:10%;  Opacity:0;}
    100% {left:0%;   Opacity:0.9;}
}

对应js：
$(function(){

    $(window).scroll(function(){
        if($(this).scrollTop() >= 110 && $(this).scrollTop() <= 410){   //3000你说的某个位置

            $(".move1").css({"visibility": "visible",
                "animation":"fadeIn 2s","-webkit-animation":"fadeIn 2s"
            });
        }
    });
})