Efekt Parallax podczas przewijania strony [CSS]

tutoriale

Kategoria wpisu Frontend, Kurs CSS, Kursy, Tło Tagi: , , , , on przez .



Efekt parallax polega na tym, że fragment lub fragmenty strony przesuwają się z inną szybkością niż pozostałe elementy dając wrażenie trójwymiarowości.

Efekt ten jest stosunkowo łatwy do osiągnięcia i po części już go omówiłam kiedy opisywałam sposoby ustawienia obrazka w tle.

Zaczniemy od stworzenia przykładowej struktury HTML:

Jak powyżej widać mamy tu dwa rodzaje grup. W pierwszej mamy umieszczony w tle obrazek (pokaże się dopiero pod daniu go w CSS) oraz grupę z tekstem.

Teraz pora na CSS:

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

Na co warto zwrócić uwagę

Istotnym elementem kodu jest:

Powoduje on, że obrazek 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.

Obrazek w tle przy tym ustawieniu nie będzie się powtarzał (background-repeat: no-repeat;).

Obrazek ten jest również rozciągnięty względem kontenera (background-size: cover;) – przy czym nie zniekształcamy go zachowując jego naturalne proporcje.

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

Przykład wykołysania tego kodu.

Umieszczanie grafiki jako tła strony

Ciekawe efekty Parallax / Paralaksy na stronę internetową CSS, JavaScript

Nakładające się na siebie tła przy przewijaniu strony w CSS3

Przeczytaj również

Ciekawe efekty Parallax / Paralaksy na stronę inte... Parallax po polsku paralaksa jest jednym z popularniejszych efektów stosowanych na stronach internetowych. Do stworzenia efektu prostej paralaksy nie ...
Nakładające się na siebie tła przy przewijaniu str... Już od kilku lat na rynku istnieje trend do budowania witryn internetowych w technologi one page. Wiele z tych stron podzielona jest na "sekcje" posia...
Paski przewijania (scroll) CSS – overflow Czasami zdarza, się że zawartość elementu (kontenera) jest większa niż przewidziana na jego ilość. Szerokość i wysokość jest są zbyt małe by pomieścić...
Przekształcenia 2D w CSS3 – obrót obiektu H... We wcześniejszym wpisie pokazałam jak stworzyć obracający się po najechaniu myszką div na przykładzie "obracającej się animowanej karty". Tym razem...