Как сделать много страничный parallax?

Question

Всем добрый день, делают сайт, где каждый блок с высотой и шириной на весь экран должен иметь эффект parallax . С двумя страницами я сделал, но не знаю как сделать с 3 и более страницами эффект parallax. Помогите пожалуйста , заранее спасибо.

.parallax {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            font-size: 120px;
        }
        .parallax:first-child {
            background-color: aqua;
            z-index: 100;
        }
        .parallax:nth-child(2) {
            background-color: aquamarine;
            z-index: 200;
        }
        .parallax:nth-child(3) {
            background-color: blue;
            z-index: 200;
        }
        .section {
            position: fixed;
        }

 <div class="parallax">
    <div class="section">Section-1</div>
</div>
<div class="parallax">Section-2</div>
<div class="parallax">Section-3</div>

Answer 1

html,
body {
  margin: 0;
  padding: 0;
}

.parallax {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 120px;
  position: sticky;
  top: 0;
}

.parallax:nth-child(odd) {
  background-color: red
}

.parallax:nth-child(even) {
  background-color: green
}

<div class="parallax">Section-1</div>
<div class="parallax">Section-2</div>
<div class="parallax">Section-3</div>
<div class="parallax">Section-4</div>
<div class="parallax">Section-5</div>
<div class="parallax">Section-6</div>
<div class="parallax">Section-7</div>
<div class="parallax">Section-8</div>
<div class="parallax">Section-9</div>
<div class="parallax">Section-10</div>

БЛОГ НА HUSL

Как сделать много страничный parallax?

Ответы (1 шт):