Prosty efekt parallax w css bez javascript

Co to takie parallax, jest to nic innego jak wrażenie głębi w wyświetlanym obrazie podczas skrolowania strony.
Tutaj pokaże bardzo prosty przykład jedno zdjęcie i tekst. Bardziej skomplikowane efekty niestety nie da się zrobić w czystym css ale to co zrobię w zupełności wystarczy do prostej strony - landing page.

Najpierw html, tak jak mówiłem nic szczególnego 😉

<div class="parallax"></div>
<div class="text">Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker</div>

A teraz css.

body, html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

.parallax {
  background-image: url('https://picsum.photos/id/188/1200/1000');
  height: 100%; 
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.text {
  min-height: 200px;
  padding: 20px;
  line-height: 160%;
}

Najpierw aby strona była na 100% wysokości musimy ustawić ten parametr dla html jak i body.
Do klasy ".parallax"

• background-image dodajemy nasze zdjęcie
• height: 100% ustawiamy to zdjęcie na całą wysokość okna
• background-attachment: fixed który odpowiada a dokładnie decyduje czy położenie danego obrazka jest stałe względem okna, czy też przewija się wraz z zawierającym go blokiem.
• background-position: center centrujemy element
• background-repeat: no-repeat zdjęcie nie jest powielane
• background-size: cover cover skaluje obrazek do jak największych rozmiarów, bez jego rozciągania. Jeżeli proporcje obrazu są inne od elementu jest on przycinany aby nie zostało puste miejsce

See the Pen
parallax in css by Greg (@Tomik23)
on CodePen.