jquery - 视差效果 : Make foreground move when scrolling

标签 jquery css parallax

<分区>

我有几张图片,我想将它们作为信息图表垂直放置在页面上。但是,我想将背景与前景元素分开,并有一点视差效果,当您向下滚动时,前景(背景)元素移动 ...

不确定如何最好地使用 jQuery 或什至 CSS3 完成此操作...任何链接或示例将不胜感激。

最佳答案

您可以使用 jquery.parallax .

jParallax turns nodes into absolutely positioned layers that move in response to the mouse. Depending on their dimensions these layers move at different rates, in a parallaxy kind of way.

屏幕截图:

jQParallax
(来源:stephband.info)

代码也很小。

<ul>
    <li class="parallax-layer"></li>
    <li class="parallax-layer"></li>
</ul>

关于jquery - 视差效果 : Make foreground move when scrolling,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12851501/

上一篇:html - 如何删除 <div> 标签上方的空间?

下一篇:javascript - 使用 jquery 遍历 html 表行以获取 <td> 单元格内的 div id

相关文章:

jquery - 如何更准确地对齐此 jQuery UI 按钮(跨浏览器)?

html - Chrome 显示搭配不同

android - 应用程序背景中的视差效果

jquery - 如何使用 jQuery 创建嵌套 DIV?

javascript - $(this) 仅适用于一项 [jQuery]

javascript - 在 javascript 上搜索文本

javascript - 使用选择值在提交时构建 URL

html - 使用 CSS3 的背景图像底部渐变

html - 相对包装器中的 CSS 中心内容

jquery - IE8 和 9 中的 CSS3 视差错误