Галерея Apple Style - изображение Parallax Easing

Question

Я надеюсь воссоздать галерею так же, как и демонстрационную версию галереи iPhone 6s. Мне нравится, как они создали каждое изображение с другой плитки размера, и что при прокрутке изображение очень медленно прокручивается вместе с ним.

LINK HERE

Я создал подобную галерею изображения, как пример, но я не уверен, как:

1) Воссоздание параллакса ослабление на изображениях, как она прокручивается

2) Все изображения затухают при нагрузке

Может ли кто-нибудь помочь?

FIDDLE HERE

Answer 1

Существует несколько способов сделать это.

Вы можете использовать параллакса эффекты, преобразование/translateY или

$('#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(); 

Это только общее направление, есть более чем один способ сделать это, я перечислил то, что было бы самым простым способом для меня.