JavaScript로 애니메이트하는 방법은 무엇입니까?

Question

내 머리글에있는 contnet을 사용하여 아래로 스크롤 할 때 확대 및 흐리게 처리하고 싶습니다. 그러나 나는 그것이 blured로 갑자기 점프하고 확대하고 싶지 않습니다. 천천히 흐리게하고 확대하고 싶습니다. 어떻게해야합니까?

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

이 두 가지 주요 솔루션이 있습니다. .blur CSS 클래스 (이 값은 당연히 바뀔 수 있음)와 두 번째 방법으로 간단한 "전환 : 400ms"을 추가하면 해결할 수 있습니다. jQuery에는 애니메이션 기능이 내장되어 있습니다.

현재 jQuery를 애니메이션에 대한 자세한 정보를 확인할 수 있습니다 http://www.w3schools.com/jquery/jquery_animate.asp

희망이 당신을 도와!

감사합니다. Gerrit