How to animate with JavaScript?

Question

I'm wanting the contnet in my header to zoom in and blur as you scroll down. But I dont want it to suddenly jump to being blured and zoomed in. I want it to slowly blur and zoom. How can I do this?

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

There are two main solutions to this. One that can be solved by adding a simple "transition: 400ms" to your .blur CSS class (this value can be changed ofcourse) and as a second method: jQuery also has an animation function built into it.

You can find more information about jQuery animations here: http://www.w3schools.com/jquery/jquery_animate.asp

Hope this helped you out!

Best regards, Gerrit