Parallax po polsku paralaksa jest jednym z popularniejszych efektów stosowanych na stronach internetowych. Efekt ten powoduje, że tło danej sekcji jest nieruchome lub jego elementy poruszają się w innym tempie niż my scrollujemy stronę.
Co znajdziesz w tym wpisie
Przykładowe realizacje
Do stworzenia efektu prostej paralaksy nie potrzeba dużo wystarczy kilka dużych obrazków lub zdjęć resztę uzyskujemy dzięki odpowiedniemu ustawieniu ich w tle (CSS3, CSS, JavaScript, jQuery). Jednak nie jest tak każdą paralaksą. Obecnie istnieje kilkanaście typów tego efektu. Przykłady można znaleźć na wielu portalach w tym na CodePen (portalu gdzie można prezentować swój kod).
Na potrzeby tego wpisu wybrałam kilka przykładowych paralaks reprezentujących różne trendy oraz efekty spotykane na stronach internetowych.
Poruszające się elementy:
W tym wypadku mamy do czynienia z efektem ciągłego ruchu.
Parallax.js
autor: CSS_Masters
See the Pen Parallax.js by CSS_Masters (@CSS_Masters) on CodePen.0
Podążanie za myszką:
Obiekty umieszczone na przykładzie poruszają się za kursorem myszy.
Parallax
autor: Iliya Zhechev
See the Pen Parallax by Iliya Zhechev (@ichko) on CodePen.0
Fragmenty strony jak plansze:
W tym wypadku strona została podzielona na części, które podobnie jak plansze nakładają się na siebie nawzajem. Podczas skrolowania jedna odchodzi by odsłonić koleją.
Full Page Parallax Scroll Effect
autor: Emily Hayman PRO
See the Pen Full Page Parallax Scroll Effect by Emily Hayman (@eehayman) on CodePen.0
Tekst na tle gwieździstego nieba:
To kolejny efekt przedstawiający ruchome tło podczas gdy tekst pozostaje statyczny.
Parallax Star background in CSS
autor: Saransh Sinha
See the Pen Parallax Star background in CSS by Saransh Sinha (@saransh) on CodePen.0
Efekt ruchomego tekstu:
W tym wypadku efekt parallax dotyka sam tekst, który zostaje jak gdyby podzielony na warstwy. Przez pewien czas porusza się on po ekranie.
Parallax Effect
autor: James Dow
See the Pen Parallax Effect by James Dow (@photodow) on CodePen.0
Explore the microspace 🙂
by Julius Horn
Efekt 3D z parallax:
Tym razem obrazki zostały tak rozmieszczone, że otrzymujemy efekt zbliżony do 3D.
GSAP Mouse Driven Parallax 3D scene
autor: fred
See the Pen GSAP Mouse Driven Parallax 3D scene by fred (@fr3d3ric) on CodePen.0
Firewatch Parallax in CSS
autor: Sam Beckham
See the Pen Firewatch Parallax in CSS by Sam Beckham (@samdbeckham) on CodePen.0
Oczywiście to nie wszystkie przykłady Parallax tak jak pisałam do bardzo popularny efekt i w związku z tym powstało wiele różnych wariantów oraz form. Jeśli chcieli byście się podzielić innymi przykładami możecie linki do nich umieścić w komentarzu.
Dodatkowe tagi
trój wymiarowa grafika z pomocą CSS i skryptów JS
wyjątkowe rozwiązania
animacje na stronie
dodatki do witryny www
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.