苹果风格图库 - 图像视差缓和

Question

我希望重新创建一个图库，就像iPhone 6s图片库演示一样。我喜欢他们如何为每个图像创建一个不同大小的磁贴，并且当您滚动时，图像会非常缓慢地滚动。

链接在这里

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

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

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

有人可以帮忙吗？

在这里摆弄

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();

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