CSS分层背景效果
答
这就是所谓的视差效果 所以只是谷歌的jQuery Parallax插件,你会他们的dosens。
经验法则是,您具有不同的z-index元素,它们在页面滚动事件期间以不同的速度移动。
如果你看看这个演示页面http://www.ianlunn.co.uk/plugins/jquery-parallax/,你会因为它包含的代码见:
<script src="scripts/jquery.parallax-1.1.3.js"></script>
和
$(document).ready(function(){ $('#nav').localScroll(800); //.parallax(xPosition, speedFactor, outerHeight) options: //xPosition - Horizontal position of the element //inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling //outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport $('#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
UPDATE:
视差效应可以用来不仅与滚动。其实这取决于你的想象力和创造力。例如,如果将鼠标移动到此视差插件演示http://stephband.info/jparallax/#parallax上的图像上,您将看到分层图像以不同的速度移动。