谁能指出我正确的方向?我有一个带有固定背景图像的 DIV,但我希望它在向下滚动页面时以较慢的速度滚动。我不擅长 jQuery 或 CSS3,所以寻求帮助。
提前致谢。
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”是您希望比“常规滚动速度”慢的元素。要使元素移动得更慢,请增加速度变量。为了让它移动得更慢,减少它。
网络上有多个关于视差效果的教程。这里区域二只是形成一个简单的谷歌搜索“视差效果教程”:
http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/
这可能会有所帮助:http ://stephband.info/jparallax/ 它将节点转换为绝对定位的层,这些层会响应鼠标而移动。
window.onscroll = function(e)
{
var val = document.body.scrollTop / your_scroll_factor;
document.getElementById('your_background_image').style.posTop = -val;
}