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

HTML – 如何创建像这样的视差效果?,第1张

概述我一直试图建立一个像这个网站上的视差效果的网站: 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 – 如何创建像这样的视差效果?所遇到的程序开发问题。

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1108206.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-29
下一篇 2022-05-29

发表评论

登录后才能评论

评论列表(0条)

保存