Jak zrobić efekt parallax w sekcji hero?
Chcę dodać efekt parallax do sekcji hero na stronie głównej – żeby tło poruszało się wolniej niż reszta strony podczas scrollowania. Czy da się to zrobić bez biblioteki JavaScript?
1 Odpowiedź
Hej!
Parallax wygląda efektownie i dodaje głębi. I da się to zrobić w czystym CSS bez żadnego JavaScript.
Parallax przez CSS background-attachment: fixed
.hero-parallax {
background-image: url('tlo.jpg');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
display: flex;
align-items: center;
}
To najprostszy parallax – tło zostaje nieruchome podczas scrollowania, reszta strony przesuwa się po nim.
Uwaga na mobile
background-attachment: fixed nie działa poprawnie na iOS i wielu urządzeniach Android. Dodaj media query:
@media (max-width: 768px) {
.hero-parallax {
background-attachment: scroll;
}
}
Jak to dodać w WordPress bez kodu?
W Gutenbergu – blok Cover obsługuje parallax! Dodajesz blok Cover, wgrywasz zdjęcie tła i w ustawieniach bloku włączasz opcję Paralaksa.
W Elementorze – opcja Parallax dostępna w ustawieniach sekcji, zakładka Style – Background. 😊
