如何在滾動點到達後播放動畫？

-1

我剛纔看到http://www.archer-group.com/approach 如何在滾動點到達後播放動畫？

這讓我想讓我的投資組合動畫像那樣。當用戶將其滾動到指定的滾動區域/部分時，播放動畫。當您向下滾動到步驟3，步驟4和步驟5時，從滾動視圖部分向上或向下滾動時，動畫會再次播放和重置。

我看到flickr.com網站和動畫看起來不同，他們正在播放視頻，而不是像archer-group.com這樣的圖形動畫（也許是css）。

所以我有下面這段代碼試圖推遲動畫，直到我滾動頁面到該動畫部分。任何人都可以顯示一個簡單的代碼來完成它。提前致謝。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
width: 100px; 
height: 100px; 
background: red; 
-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */ 
animation: myfirst 5s; 
} 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes myfirst { 
0% {background: red;} 
25% {background: yellow;} 
50% {background: blue;} 
100% {background: green;} 
} 

/* Standard syntax */ 
@keyframes myfirst { 
0% {background: red;} 
25% {background: yellow;} 
50% {background: blue;} 
100% {background: green;} 
} 
</style> 
</head> 
<body> 
<br> 
<br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br> 

<p><b>Note:</b> This example </p> 
<p><b>Note:</b> This is a sample text.</p> 

<div></div> 

</body> 
/html>

來源

2014-07-20 akoito

有很多關於這個問題的SO問題。您需要使用JavaScript和頁面的滾動事件。嘗試[google搜尋]（https://www.google.com/search?sourceid=chrome-psyapi2&ion=1&espv=&es_th=1&ie=UTF-8&q=animation%20scroll%20page）然後提出 –

所以基本上可以做到這一點我保持跟蹤scrollTop，然後利用回調函數if語句來播放動畫/讓元素可見。

例如：

$(function() { 

    var $window = $(window); 

    $window.scroll(function (event) { 
     var scrollTop = $window.scrollTop(); 

     if (scrollTop < 400) 
      console.log("hi"); 
    }); 
});

來源

2014-07-20 03:25:15 hongj77

這不適用於響應式網站 –

@ZachSaucier爲什麼呢？ – hongj77

由於內容不一定總是從頁面開始向下400個像素 –

如何在滾動點到達後播放動畫？

回答

相關問題