Apple Style Gallery - Image Parallax Easing

Question

我希望重新创建一个类似于iPhone 6s Image Gallery演示的画廊。我喜欢他们如何使用不同尺寸的瓷砖创建每个图像，并且当您滚动时，图像会非常缓慢地滚动。

LINK HERE

我创建了一个类似图片库的示例，但我不确定如何：

1）在滚动时重新创建图像上的视差缓动

2）让所有图像在加载时淡入

有人可以帮忙吗？

FIDDLE HERE

Answer 1

有几种方法可以做到这一点。

您可以使用视差效果，transform / 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();

这只是一个大方向，有不止一种方法可以做到这一点，我列出了对我来说最简单的方法。