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

标签 css parallax

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

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

最佳答案

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

关于css - 一个非背景图像的视差式滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28108194/

相关文章:

css - 如何阻止 CSS 元素样式进入我的类样式?

javascript - 如何检查多个文本区域的输入?

css - 水平行内对齐

html - CSS 更改未得到反射(reflect)。为什么?

javascript - CSS视差标题和粘性导航相互排斥?

html - 使用 CSS 或 HTML 如何消除网站的边距?

javascript - jQuery 视差导航不会滚动到目标

css - Bootstrap : carousel with parallax without background-img

html - 在 Chrome 上滚动后,背景图像附件固定(视差)滞后/闪烁

javascript - 如何在滚动时交换图像以显示在 3d 中