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

Question

如果没有视觉效果，这可能很难解释，但这里可以解释一下：想象一下正常情况＆＃39;网页 - 没什么特别的。现在想象一下位于标题下方的主图像。对此图像进行成像仅显示其高度的一半在其容器中。现在想象一下向下滚动页面 - 当你这样做时，主图像以视差样式滚动，在它的容器中移动，显示另一半。

我找不到这样的例子，因为我发现的所有内容都使用背景图片或其他图像以及在图像上移动的元素。我只想要一个元素（主图像）看起来有一些透视。有人能指出我的一个例子吗？

Answer 1

为此，您可以使用背景图像和其上方的另一个div来显示内容。 你可以使用bootstrap视差效果，比如寻找一个例子here

Answer 2

不明白为什么你不想要背景图片，但在所有情况下，你都可以使用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/

Answer 3

（我知道这是一个老话题，但是我想解释一种可能做OP想要的事情。）

我目前正在寻找完全相同的东西，因为我想使用<picture>标签以srcset和媒体查询来调用我的图片，从而在不同的设备尺寸上提供不同的图片。 看起来好像不太可能。