Question

我希望我的标题中的contnet在向下滚动时放大并模糊。但我不希望它突然跳到模糊和放大。我希望它慢慢模糊和缩放。我怎么能这样做？

HTML：

<header class="top-section" id="top">
    <div class="content">
        <img src="assets/img/Logo.svg" alt="Logo">
        <p>Scroll for more or <a href="">view my CV</a></p>
    </div>
</header>

.top-section {
    width: 100vw;
    height: 100vh;
    background-color: #0064b9; 
}
.top-section .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh; 
}
.top-section .content img {
    max-width: 550px;
    width: 80%; 
}
.top-section .content p {
    color: #fff;
    padding-top: 10vh; 
}
.top-section .content p a {
    color: #fff;
    transition: all 0.3s ease-in-out; 
}
.top-section .content p a:hover {
    color: #004bb7; 
}
.blur {
    zoom: 2;
    filter: blur(20px);
    -webkit-filter: blur(40px);
    -ms-filter: blur(40px); 
}

$(document).ready(function(){
    $(window).scroll(function(e){   
        var size = $(this).scrollTop();
        if(size > $(".content").offset().top){
            $( "p, img" ).addClass( "blur" );
        }
        else{
            $( "p, img" ).removeClass( "blur" );
        }
    })
})

Answer 1

这有两个主要的解决方案。可以通过添加简单的转换来解决这个问题：400毫秒＆＃34;到你的.blur CSS类（这个值可以改为当然），作为第二种方法：jQuery也有一个内置的动画功能。

您可以在此处找到有关jQuery动画的更多信息： http://www.w3schools.com/jquery/jquery_animate.asp

希望这能帮到你！

祝你好运，格里特

如何使用JavaScript动画？

1 个答案: