15 Sie 2019

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