如何使用JavaScript進行動畫製作？

我想讓頭部中的contnet放大並模糊，因爲您向下滾動。但我不希望它突然跳到模糊和放大。我希望它慢慢模糊和放大。我怎樣才能做到這一點？如何使用JavaScript進行動畫製作？

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"); 
     } 
    }) 
})

來源

2016-07-09 Zoid

達到這一目的有兩個主要的解決方案。可以通過向.blur CSS類添加一個簡單的「transition：400ms」來解決這個問題（這個值可以隨意更改），也可以作爲第二種方法解決：jQuery還內置了一個動畫功能。

您可以在這裏進一步瞭解jQuery的動畫的更多信息： http://www.w3schools.com/jquery/jquery_animate.asp

希望這有助於你出去！

此致敬意， Gerrit

來源

2016-07-09 18:10:50

如何使用JavaScript進行動畫製作？

回答

相關問題