HTML – 如何创建像这样的视差效果？

概述我一直试图建立一个像这个网站上的视差效果的网站： http://www.sparksandhoney.com/the-open-agency-index/ 要么 http://www.sparksandhoney.com/press-index/ 我一直在尝试使用stellar.js,但我似乎无法使导航栏和网页同步滚动图像这个网站.到目前为止,我一直在努力使导航栏和文本层成为一个在固定背景上滚动的 我一直试图建立一个像这个网站上的视差效果的网站：
http://www.sparksandhoney.com/the-open-agency-index/
要么
http://www.sparksandhoney.com/press-index/

我一直在尝试使用stellar.Js,但我似乎无法使导航栏和网页同步滚动图像这个网站.到目前为止,我一直在努力使导航栏和文本层成为一个在固定背景上滚动的div,但这根本不起作用？

顺便说一句,我已经浏览了这个网站的源代码,他们使用的是Squarespace,但是我试图在没有它的情况下做到这一点.

有没有人有任何想法？

解决方法 它实际上非常简单.导航和内容容器在流程中.内容具有margin-top以将其与nav分开.然后将背景图像设置为位置：固定,并且在滚动上偏移滚动位置的百分比(例如,30％).

您不需要任何库,但jquery使它更容易.考虑到stellar.Js需要jquery,我假设你使用它没有问题.在这种情况下,以下代码足以让它为您工作：

$(window).on('scroll',function() {    $('#background').CSS('margin-top',$(window).scrolltop() * -.3);});

这是整个行动的Jsfiddle：http://jsfiddle.net/9gK9z/1/

总结

以上是内存溢出为你收集整理的HTML – 如何创建像这样的视差效果？全部内容，希望文章能够帮你解决HTML – 如何创建像这样的视差效果？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。