當滾動時，讓背景圖像首先顯示底部？

Question

我正在試圖做一個像https://www.artyofficial.com/一樣的功能。

向下滾動時，第二張圖像的底部會出現，而第一張圖像開始被剪掉。用CSS可以實現這樣的事情嗎？我會張貼樣式表，但不幸的是，我甚至不知道從哪裏開始。

Answer 1

你要找的是parallax scrolling effect

最重要的屬性是這裏的background-attachment: fixed;。

我給你做了一個JSFiddle儘可能容易，看看它。

Answer 2

我會通過看background-attachment屬性開始，它的值：

fixed The background is fixed with regard to the viewport

Answer 3

它被稱爲視差效果。你可以參考鏈接：Parallax Effect

<style> 
.parallax { 
    /* The image used */ 
    background-image: url("img_parallax.jpg"); 

    /* Set a specific height */ 
    height: 500px; 

    /* Create the parallax scrolling effect */ 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 
</style> 

<!-- Container element --> 
<div class="parallax"></div> 

Answer 4

你只需要讓所有的這種連續的div的background-attachment: fixed。檢查下面的例子：

.panels{ 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background-attachment: fixed; 
 
    background-size: cover; 
 
    background-position: center center; 
 
} 
 

 
.panels:nth-child(1){background-image: url('http://lorempixel.com/400/200/sports/');} 
 

 
.panels:nth-child(2){background-image: url('http://lorempixel.com/400/200/nightlife/');} 
 

 
.panels:nth-child(3){background-image: url('http://lorempixel.com/400/200/cats/');} 
 

 
.panels:nth-child(4){background-image: url('http://lorempixel.com/400/200/food/');} 
 

 
.panels:nth-child(5){background-image: url('http://lorempixel.com/400/200/nature/');} 
 

 

 
/* this is for hiding stackoverflow console */ 
 
.as-console-wrapper{ display: none !important; }

<div class="panels"></div> 
 
<div class="panels"></div> 
 
<div class="panels"></div> 
 
<div class="panels"></div> 
 
<div class="panels"></div>