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

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ę.

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.

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.

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.

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.

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.

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.

Firewatch Parallax in CSS

autor: Sam Beckham

See the Pen Firewatch Parallax in CSS by Sam Beckham (@samdbeckham) on CodePen.

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