我想不出更好的方法来问这个问题,所以我就直接问了。有人知道如何在http://petenelson.co.uk上实现分层背景效果吗?是否有插件可以实现这一点?
问问题
542 次
1 回答
1
这被称为视差效应 ,所以只需 google 一下 jQuery Parallax 插件,你就会知道它们。
经验法则是,在页面滚动事件期间,您有不同的 z-index 元素以不同的速度移动。
如果您查看此演示页面http://www.ianlunn.co.uk/plugins/jquery-parallax/,您将在代码中看到它包括:
<script src="scripts/jquery.parallax-1.1.3.js"></script>
和
$(文档).ready(函数(){ $('#nav').localScroll(800); //.parallax(xPosition, speedFactor, outerHeight) 选项: //xPosition - 元素的水平位置 //惯性 - 相对于垂直滚动的移动速度。例子:0.1是滚动速度的十分之一,2是滚动速度的两倍 //outerHeight (true/false) - jQuery 是否应该使用它的 outerHeight 选项来确定一个部分何时在视口中 $('#intro').parallax("50%", 0.1); $('#second').parallax("50%", 0.1); $('.bg').parallax("50%", 0.4); $('#third').parallax("50%", 0.3); })
以下是一些有用的链接:
- http://medleyweb.com/web-dev/15-useful-jquery-parallax-plugins-and-tutorials/
- http://www.tripwiremagazine.com/2012/07/parallax-scrolling.html
更新:
视差效果不仅可以用于滚动。其实这取决于你的想象力和创造力。例如,如果您将鼠标移到此视差插件演示http://stephband.info/jparallax/#parallax上的图像上,您将看到分层图像以不同的速度移动。
于 2012-12-13T11:00:54.653 回答