Jak to zrobić — przewijanie paralaksy
Dowiedz się, jak stworzyć efekt przewijania „paralaksy” za pomocą CSS.
Paralaksa
Przewijanie paralaksy to trend na stronie internetowej, w którym zawartość tła (tj. obraz) jest przesuwana z inną prędkością niż zawartość pierwszego planu podczas przewijania. Kliknij poniższe łącza, aby zobaczyć różnicę między witryną z przewijaniem paralaksy i bez niego.
Demo bez przewijania paralaksy
Uwaga: Przewijanie paralaksy nie zawsze działa na urządzeniach mobilnych/smartfonach. Możesz jednak użyć zapytań o media, aby wyłączyć efekt na urządzeniach mobilnych (patrz ostatni przykład na tej stronie).
Jak stworzyć efekt przewijania paralaksy?
Użyj elementu kontenera i dodaj obraz tła do kontenera o określonej wysokości. Następnie użyj , background-attachment: fixed
aby stworzyć rzeczywisty efekt paralaksy. Pozostałe właściwości tła służą do idealnego wyśrodkowania i skalowania obrazu:
Przykład z pikselami
<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set
a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position:
center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- Container element
-->
<div class="parallax"></div>
W powyższym przykładzie wykorzystano piksele do ustawienia wysokości obrazu. Jeśli chcesz użyć procentu, na przykład 100%, aby obraz zmieścił się na całym ekranie, ustaw wysokość kontenera paralaksy na 100%. Uwaga: Musisz również zastosować height: 100%
zarówno do <html>, jak i <body>:
Przykład z procentem
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Full height */
height: 100%;
/* Create the parallax
scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
Niektóre urządzenia mobilne mają problem z background-attachment: fixed
. Możesz jednak użyć zapytań o media, aby wyłączyć efekt paralaksy dla urządzeń mobilnych:
Przykład
/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if
needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}