使用滾動事件鏈接CSS3動畫/變換

我正在尋找將CSS3轉換鏈接到滾動事件的方法。我正在尋找與http://nizoapp.com/類似的功能，當您到達頁面上的某個滾動點時，某些元素將會移動。我知道你必須用jQuery調用滾動事件（使用偏移和滾動），但我很好奇，如果有一種方法，然後使用CSS3的動畫部分，或者如果需要在jQuery中完成。無論哪種方式，我都希望得到一些關於如何讓這個工作順利開始的幫助。謝謝您的幫助。使用滾動事件鏈接CSS3動畫/變換

來源

2011-11-17 Andrew

一個好的起點可能是the jQuery Waypoints plugin。當你滾動到一個元素時，它可以很容易地執行一個函數，並且還可以根據當前正在查看的內容來應用類。然後，您可以使用這些觸發您之後的CSS動畫。

UPDATE - 我剛剛碰到the Scrollorama jQuery插件。作者說，它沒有經過徹底的測試，但它的目的是做你正在做的事情，絕對看起來是一個很好的起點。

來源

2011-11-17 14:47:02 CherryFlavourPez

這是一個偉大的插件，感謝鏈接到它。 –

沒問題 - 我發現自己連接到它很多，因爲它對一堆不同的東西真的有幫助。 – CherryFlavourPez

好主意！前段時間我遇到了Waypoints，但忘記了它。這可能很好。謝謝！ – Andrew

沒有辦法將特定的CSS鏈接到滾動位置。你將需要包含一些JavaScript粘合劑來達到這個效果。我最喜歡的方法是綁定到窗口onscroll事件並將您的動畫代碼放在那裏。

來源

2011-11-17 15:32:03

我正在使用scrollTop（）方法。

將添加或刪除類和我的CSS動畫屬性

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

    if (y <= 300) { 
     $('#my-div').addClass('animate'); 
    } 
    else 
    { 
     $('#my-div').removeClass('animate');     
    } 
});

在HTML

：

<div id="my-div"> 
    <p>Lorem ipsum dolor sit amet</p> 
</div>

在CSS

：

#my-div { 
    width:200px; 
    height:200px; 
    background-color:red; 
} 
#my-div.animate { 
    transition: rotate(30deg); 
}

來源

2013-08-28 13:58:28 rafawhs

使用滾動事件鏈接CSS3動畫/變換

回答

相關問題