如何讓不同部分的視差工作（一頁）

Question

如何在單頁設計的不同部分和不同位置的圖像上製作視差？

現在我正在處理這段代碼。

HTML標記：

<section class="highlights"> 
    <img src="images/hero.jpg" alt="" /> 
</section><!-- End section.highlights --> 

圖像的CSS是

#hero, .highlights { 
    height: 360px; 
    padding: 0; 
    position: relative; 
    overflow: hidden; 
    opacity: 0.9; 

    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

    z-index:1; 
} 
#hero img { 
    height: auto; 
    width: 100%; 
    margin: 0 auto; 
    display: block; 
    position: relative; 
} 

的JS：

$('#hero img').css({"bottom": '-' + $(window).scrollTop()/2 + 'px' }); 

Answer 1

我會建議使用JavaScript庫如Skrollr.js。

您將對動畫和時間有很好的控制。

查看我們的這兩個教程，讓你開始與Skrollr：

• Simple parallax scrolling tutorial
• How to create a parallax scrolling website