蘋果風格畫廊 - 圖像視差緩和

Question

我希望重新創建一個畫廊就像iPhone 6s圖像庫演示之一。我喜歡他們是如何將每張圖片製作成不同大小的圖塊，並且在您滾動時，圖片非常緩慢地隨之滾動。

LINK HERE

我創建了一個類似的圖片庫一樣的例子，但我不知道如何：

1）重新創建圖像的視差寬鬆，因爲它滾動

2）讓所有圖像在加載時淡入淡出

有人可以幫忙嗎？

FIDDLE HERE

Answer 1

有幾種方法可以做到這一點。

你可以使用視差效果，變換/平移Y或

$('#outer').bind('mousewheel', function (e) { 
if (!(e.originalEvent.wheelDelta == 120)) 

全功能的鏈接。

現在在有負載時的畫面褪色（你可以滾動做的一樣好），這取決於如果你想和可以使用jQuery，因爲它是最簡單的。

$(window).load(function(){ 
$('img').not(':visible').fadeIn(1000); 
}); 

function makeVisible() { 
$('img').load(function() { 
    $(this).fadeIn(1000); 
}); 
}); 

makeVisible(); 

這只是一個大方向，也有這樣做的方法不止一種，我列出這將是對我來說最簡單的方法。