需要關於「從側面浮動」項目的指導？

Question

我試圖與下面的效果網站：

1. 當加載頁面，則什麼也不顯示
2. 然後，當你scrol下來，將照片從瀏覽器窗口的兩側浮， ，然後堆疊在窗口中間。 （喜歡的位置：固定）
3. 當您進一步滾動時，更多圖片將浮出並添加到中間的堆棧。

這很難解釋和找到，但這裏是一個非常先進的例子of the effect。

我真的希望你能幫上忙。

Answer 1

首先，將所有元素設置爲顯示：none;在你的CSS。 爲動畫使用jQuery：

• 使用scroll()事件來決定何時開始
• 使用animate()做實際的工作。

例如：

$('#element').animate({ 
    opacity: 1, 
    left: '+=50', 
    top: '+=200' 
}, 2000, function() { 
    // Animation complete. 
}); 

這將導致具有ID「元素」元件淡入，而在2秒移動50像素向右和向下200像素。

Answer 2

你也可以使用jQuery，它具有良好的框架效果。

Answer 3

我建議你看看使用JQuery動畫以及搜索「無限滾動」或「無限滾動」。

JQuery UI可能是您最好的選擇，看起來不錯。有幾種方法可以做到這一點，在這裏寫太多。

至於無限滾動，還有很多方法可以解決這個問題。

這裏是一個開始：http://masonry.desandro.com/demos/infinite-scroll.html

Answer 4

試試這個....

 
    $(document).ready(function(){ 


    $("body").css("display","none"); 
    $("body").fadeIn(2000); 
    }); 

在這其中，首先整個頁面的將是空的......然後它會在褪色... 。

 
    $('#element').animate({ 
    opacity: 1, 
    left: '+=50', 
    top: '+=200' 
    }, 2000, function() { 
    // Animation complete. 
    }); 

使用上面的代碼移動對象....