css - 一个非背景图像的视差式滚动

Question

如果没有视觉效果，这可能很难解释，但可以这样说:想象一个“普通”网页 - 没什么特别的。现在想象一个主图像位于标题下方。成像此图像仅在其容器中显示其高度的一半。现在想象向下滚动页面 - 当您这样做时，主图像以视差方式滚动，在容器内移动，露出另一半。

我找不到这方面的示例，因为我找到的所有内容都使用背景图像或其他图像和在图像顶部移动的元素。我只希望一个元素(主图像)看起来有一些透视。谁能给我举个例子？

Answer 1

不明白为什么你不需要背景图片，但是在所有情况下，你可以使用 Parallax.js，它使用属性 data-image-src 来指定图片。

看看这个演示:

HTML:

<div class="demo" data-parallax="scroll" data-image-src="/path/to/image.jpg"></div>

jQuery:

$('.demo').parallax({imageSrc: '/path/to/image.jpg'});

见于:http://pixelcog.com/parallax.js/