CSS分層背景效果

Question

我想不出一個更好的方式來問這個問題，所以我會直接問它。有人知道如何在http://petenelson.co.uk上實現分層背景效果嗎？有沒有可能實現這個插件？

Answer 1

這就是所謂的視差效果 所以只是谷歌的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上的圖像上，您將看到分層圖像以不同的速度移動。