Efekt Parallax podczas przewijania strony internetowej [CSS]

Efekt Parallax lub inaczej paralaksa to jeden z ciekawszych i jednocześnie łatwiejszych efektów jakie można spotkać na stronie internetowej. Stosowany jest głównie w wersjach strony na komputery bynajmniej nie tylko dlatego, że lepiej się na nich prezentuje.

Niektóre urządzenia mobilne w ramach oszczędności mogą mieć bowiem domyślnie go wyłączonego.

Na czym polega efekt paralaksy?

Efekt parallax (paralaksa) polega na tym, że fragment lub fragmenty strony zwykle tło, przesuwają się z inną szybkością w przeciwieństwie do pozostałych elementów. W efekcie czego wyglądają się one nieruchome. Efekt ten bardzo ładnie się prezentuje kiedy scrollujemy (przewijamy) stronę. Można wtedy odnieść wrażenie, że elementy nakładają się na siebie nawzajem.

W pewnym sensie można uzyskać dzięki temu wrażenie trójwymiarowości.

Jak utworzyć prostą paralaksę na stronie?

Efekt ten jest stosunkowo łatwy do osiągnięcia na stronie i prawdę mówiąc częściowo już go omówiłam kiedy opisywałam sposoby ustawienia obrazka w tle. Dobrze by było gdyby osoby, które nie do końca ogarniają temat grafiki w tle strony zapoznały się z tym wpisem.

Przykład wykołysania tego kodu.

Prosta paralaksa z użyciem CSS

Zaczniemy od stworzenia przykładowej struktury HTML:

<div class="parallax parallax-1"></div>

<div class="content">
Przykładowy tekst
</div>

<div class="parallax parallax-2"></div>

Jak widać powyżej mamy tu dwa rodzaje grup. 2 puste kontenery DIV jedynie z klasami oraz kontener z tekstem. W tej chwili gdybyśmy wyświetlili zawartość kontenerów wyświetlony został by tylko ten z tekstem. A nam chodzi o coś więcej.

Chcemy by w miejscu pustych div wyświetlały się obrazki. Dlatego z pomocą CSS wprowadzimy kilka zmian:

body, html {
    height: 100%;
    padding:0;
    margin:0;
}
.parallax{
    height: 100%; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.parallax-1 {
    background-image: url('20161215_101518.jpg');

}
.parallax-2 {
    background-image: url('pens-1129434_1920.jpg');
}
.content{
    background-color:#fff;
    font-size:36px;
    padding:90px 14%;
}

Ten skrypt wystarczy do stworzenia prostej parallaxy reszta właściwie zależy od tego co będziemy chcieli umieścić na stronie internetowej.

Tłumaczenie kodu

Istotnym elementem kodu jest:

    height: 100%; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

Powoduje on, że obrazek w tle staje się nieruchomym elementem (background-attachment: fixed;) w stosunku do innych elementów mieszczących się na stronie.

Kolejny fragment kodu wyśrodkowuje obrazek względem kontenera (background-position: center;). W zależności jaki chcemy uzyskać efekt lub jakie mamy zdjęcie możemy zmienić dowolnie pozycję obrazka.

Dzięki ustawieniu background-repeat: no-repeat; obrazek w tle nie będzie się powtarzał. Zostanie więc wyświetlony tylko raz. Bez kolejnej właściwości w tym konkretnym przypadku obrazek był by oblewany przez „białe tło”.

Problem z rozmiarem grafiki rozwiąże background-size: cover; rozciągnie on obiekt względem kontenera. Istotne jest, że go nie zniekształcamy i zachowując jego „naturalne proporcje”. Co nie znaczy, że jeśli użyjemy małej grafiki unikniemy „pixelozy”. Grafika się rozciągnie się tak by pasowała do kontenera.

Ostatnim elementem kodu, który pominęłam jest wysokość. Przy tym ustawieniu zależy ona od innych parametrów na stronie.

Wyłączenie background-attachment: fixed na urządzeniach mobilnych

Z przykrością muszą was jednak poinformować, że background-attachment: fixed; nie jest obsługiwany przez większość przeglądarek na urządzeniach mobilnych. Oznacza to, że parallax w  CSS nie będzie na nich działać.

Przeglądarki będą zastępować background-attachment: fixed; inną opcją background-attachment: scroll;

Przykład wykołysania tego kodu.

• Grafika jako tło strony internetowej
• Paralaksa na stronie internetowej