如何在用戶滾動頁面部分時觸發動畫

Question

我在我的網站上的div上使用了一個簡單的animate.css動畫。 這一切工作正常，但我想要觸發動畫時，用戶滾動到該網站上的特定部分，而不是它當前正在運行的網站加載一運行。

https://jsfiddle.net/u4ff2tfk/6/

這是到目前爲止的代碼：

.animated { 
 
    -webkit-animation-duration: 1s; 
 
    animation-duration: 1s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
} 
 
.bounce { 
 
    -webkit-animation-name: bounce; 
 
    animation-name: bounce; 
 
    -webkit-transform-origin: center bottom; 
 
    transform-origin: center bottom; 
 
} 
 
@keyframes bounce { 
 
    from, 20%, 53%, 80%, to { 
 
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
    } 
 
    40%, 
 
    43% { 
 
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
 
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
 
    -webkit-transform: translate3d(0, -30px, 0); 
 
    transform: translate3d(0, -30px, 0); 
 
    } 
 
    70% { 
 
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
 
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 
 
    -webkit-transform: translate3d(0, -15px, 0); 
 
    transform: translate3d(0, -15px, 0); 
 
    } 
 
    90% { 
 
    -webkit-transform: translate3d(0, -4px, 0); 
 
    transform: translate3d(0, -4px, 0); 
 
    } 
 
}

<div data-anchor="intro-section-1" class="section intro-section-1"> 
 
    <div class="float-left "> 
 
    <div id="executive-nav"> 
 
     <p onclick="openSideNavBlue()" class="nav-section-title">Executive Summary</p> 
 
    </div> 
 
    <div class="intro-text animated bounce"> 
 
     <p>It’s our sixth annual report and as the years go by, each iteration becomes an increasingly useful snapshot that captures the IT landscape both as it was over the last 12 months, and in transition from the years before it. 
 
     <br> 
 
     <br>There are 48 fewer respondents in this year’s survey than in 2015, although the number of respondents vary between large, medium and small organisations has stayed relatively consistent. 
 
    </div> 
 
    </div> 
 
    <div class="float-right"> 
 
    <p class="intro-title">Welcome to 
 
     <br>the 2016 
 
     <br>Databarracks 
 
     <br>Data Health 
 
     <br>Check</p> 
 
    <a href="#intro-section-2"> 
 
     <img class="blue-arrow" src="img/blue-arrow.svg"> 
 
    </a> 
 
    </div> 
 
</div>

Answer 1

我不是最好的CSS，但也許你可以嘗試使用jQuery做動畫？它可以基本上是任何動畫，你可能喜歡slideIn，fadeIn等，你可以很容易地用if語句來定義它。

Answer 2

看到這個小提琴http://jsfiddle.net/apaul34208/ozww5cvj/18/

基本的想法是創建一個容器。在該容器中給你想要的是其中的一些規格的動畫是即

var imagePos = $(this).offset().top; 
var imageHeight = $(this).height(); 
var topOfWindow = $(window).scrollTop(); 

您可以通過此要循環，然後有一個if語句中檢查的邊界條件。如果確實在邊界內，您可以添加一個class，這將爲轉換提供必要的信息。我在頂部添加了工作小提琴。