如何實現上滾動

Question

不同的背景，我想複製的效果如下圖所示 -

https://allods.my.com/en/news （沒有這一項，抱歉）

http://bit.do/b2692

https://www.google.co.in/sheets/about

忽略所有動畫，我想知道如何在頁面滾動時實現多種不同的背景。

PS。我是一個完整的初學者，我更喜歡只有HTML/CSS解決方案。

Answer 1

你應該嘗試添加位置固定屬性到你的背景，它應該有所幫助。

body, 
 
html, 
 
main { 
 
    /* important */ 
 
    height: 100%; 
 
} 
 
.fixed-bg { 
 
    min-height: 100%; 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
} 
 
.fixed-bg.bg-1 { 
 
    background-image: url("https://c7.staticflickr.com/8/7052/6803328782_432e1dd481_b.jpg"); 
 
} 
 
.fixed-bg.bg-2 { 
 
    background-image: url("https://imagesus-ssl.homeaway.com/mda01/b8b73d34-98e2-4633-ab05-6797a99bcf2e.1.10/Cocoa-Beach-Pier-with-Disney-cruise-ship-in-background.jpg"); 
 
} 
 
.fixed-bg.bg-3 { 
 
    background-image: url("http://static.fly4free.pl/s/2015/4/f/f6dc42b71e7ef2336edbfbc8c9124684.jpeg"); 
 
} 
 
.fixed-bg.bg-4 { 
 
    background-image: url("http://coachhouse.com.au/default/assets/File/kayak.jpg"); 
 
} 
 
.scrolling-bg { 
 
    min-height: 100%; 
 
}

<main> 
 
    <div class="fixed-bg bg-1"> 
 
    <h1><!-- title goes here--></h1> 
 
    </div> 
 

 
    <div class="scrolling-bg cd-color-2"> 
 
    <div class="container"> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi... 
 
     </p> 
 
    </div> 
 
    </div> 
 
    <div class="fixed-bg bg-2"> 
 
    <h1><!-- title goes here --></h1> 
 
    </div> 
 

 
    <div class="scrolling-bg color-2"> 
 
    <div class="container"> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi... 
 
     </p> 
 
    </div> 
 
    </div> 
 
    <div class="fixed-bg bg-3"> 
 
    <h1><!-- title goes here --></h1> 
 
    </div> 
 

 
    <div class="scrolling-bg color-2"> 
 
    <div class="container"> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi... 
 
     </p> 
 
    </div> 
 
    </div> 
 
    <div class="fixed-bg bg-4"> 
 
    <h1><!-- title goes here --></h1> 
 
    </div> 
 

 
    <div class="scrolling-bg color-2"> 
 
    <div class="container"> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi... 
 
     </p> 
 
    </div> 
 
    </div> 
 
</main>

事業部後格的方法：

body, 
 
html, 
 
main { 
 
    /* important */ 
 
    height: 100%; 
 
    padding:0; 
 
    margin:0; 
 
} 
 
.container{ 
 
position:absolute; 
 

 
} 
 

 
.fixed-bg { 
 
    min-height: 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    
 
} 
 
.fixed-bg.bg-1 { 
 
    background-image: url("https://c7.staticflickr.com/8/7052/6803328782_432e1dd481_b.jpg"); 
 

 
    
 
} 
 
.fixed-bg.bg-2 { 
 
    background-image: url("https://imagesus-ssl.homeaway.com/mda01/b8b73d34-98e2-4633-ab05-6797a99bcf2e.1.10/Cocoa-Beach-Pier-with-Disney-cruise-ship-in-background.jpg"); 
 
    
 
    
 
} 
 
.fixed-bg.bg-3 { 
 
    background-image: url("http://static.fly4free.pl/s/2015/4/f/f6dc42b71e7ef2336edbfbc8c9124684.jpeg"); 
 
} 
 
.fixed-bg.bg-4 { 
 
    background-image: url("http://coachhouse.com.au/default/assets/File/kayak.jpg"); 
 
} 
 
.scrolling-bg { 
 
    min-height: 100%; 
 
    
 
}

<main> 
 
    <div class="fixed-bg bg-1"> 
 
    <div class="container"><!-- content goes here--></div> 
 
    </div> 
 
    
 
    <div class="fixed-bg bg-2"> 
 
    <div class="container"><!-- content goes here--></div> 
 
    </div> 
 

 
    
 
    <div class="fixed-bg bg-3"> 
 
    <div class="container"><!-- content goes here--></div> 
 
    </div> 
 

 
    
 
    <div class="fixed-bg bg-4"> 
 
    <div class="container"><!-- content goes here--></div> 
 
    </div> 
 

 
    
 
</main>

Answer 2

所以，你正在尋找一個視差效果，有一些插件是的。我最近使用http://pixelcog.github.io/parallax.js/，這對我來說效果很好。

使用它非常簡單。你說你想要一個HTML/CSS的解決方案，但我不認爲你可以做到沒有JavaScript。如果別人知道沒有javascript的替代方案，我也想看看它。但即使您對JavaScript不瞭解，也可以使用此插件，只需按照我提供的鏈接上的說明操作即可。

該插件需要jquery才能使用！