1

谁能指出我正确的方向?我有一个带有固定背景图像的 DIV,但我希望它在向下滚动页面时以较慢的速度滚动。我不擅长 jQuery 或 CSS3,所以寻求帮助。

提前致谢。

4

4 回答 4

1

http://potentpages.com/parallax-scroll-tutorial/

这是我和我的公司创建的一个教程,描述了如何制作您所说的网页。它不需要任何 jQuery 或高级 CSS。

有许多关于如何创建视差网站的库和教程。我们在这里列出了一些:

http://potentpages.com/parallax-tutorials/

相关的javascript是:

var topDiv = document.getElementById("topDiv");
var speed = 1.5;

window.onscroll = function()
{
   var yOffset = window.pageYOffset;
   topDiv.style.backgroundPosition = "0px "+ (yOffset / speed) + "px";
}

其中“topDiv”是您希望比“常规滚动速度”慢的元素。要使元素移动得更慢,请增加速度变量。为了让它移动得更慢,减少它。

于 2013-11-13T19:18:15.923 回答
1

网络上有多个关于视差效果的教程。这里区域二只是形成一个简单的谷歌搜索“视差效果教程”:

http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/

http://richardshepherd.com/smashing/parallax/

http://stephband.info/jparallax/

于 2013-03-27T11:07:01.587 回答
1

这可能会有所帮助:http ://stephband.info/jparallax/ 它将节点转换为绝对定位的层,这些层会响应鼠标而移动。

于 2013-03-27T11:58:03.767 回答
0
window.onscroll = function(e)
{
    var val = document.body.scrollTop / your_scroll_factor;
    document.getElementById('your_background_image').style.posTop = -val;
}
于 2013-09-23T20:44:08.320 回答