スクロールするときに背景画像を一番下に表示しますか？

Question

https://www.artyofficial.com/のような機能を作成しようとしています。

スクロールダウンすると、最初のイメージが切り取られている間に、2番目のイメージの下部が表示されます。どのように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>