JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat&amp;file.css">
<div class="slide">
  Slide 1
</div>
<div class="slide">
  Slide 2
</div>
<div class="slide">
  Slide 3
</div>

CSS

html, body {
  margin: 0;
  padding: 0;
  font-family: Montserrat, sans-serif;
}

* {
  box-sizing: border-box;
}

.slide {
  border: 2px dashed #AAA;
  padding: 10px;
  height: 400px;
}

JavaScript

// Вся магія паралаксу відбувається в JavaScript.

// Це дуже просто:
// В JavaScript є можливість виконувати код при різних подіях (onclick, onmousemove і т.д.)

// Так от, приємний бонус: в всіх елементів є одна суперкрута подія - onscroll.
// Вона спрацьовує тоді, коли користувач прокручує вміст цього елементу.

// Для всієї сторінки нам потрібно onscroll елементу 'body', бо саме йому належить полоска вертикальної прокрутки сторінки.

// 1. Знайдемо його:
var body = document.querySelector('body');
// document.querySelector('<CSS-правило>') здійснює пошук елементу, якому відповідає правило. Правило задається синтаксисом CSS. Наприклад:
//   document.querySelector('.block a.title') знайде тег <A> з класом "title", який знаходиться в елементі з класом ".block". Це - така собі "продвінута" версія document.getElementById, яка вміє шукати не лише по ID, а і по класах, тегах і т.п.

// 2. Навішаємо на body код, який виконуватиметься, коли хтось прокручуватиме сторінку.

i = 0;

body.onscroll = function() {
	console.log('Сторінку було прокручено ' + i + ' разів!');
  i = i + 1;
};

// Спробуй поскролити сторінку!