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

przykłady parallax

Kategoria wpisu Frontend, Inspiracje, Testy i opinie Tagi: , , , , , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (2 głosów, średnia: 5,00 z 5)
Loading...

Parallax po polsku paralaksa jest jednym z popularniejszych efektów stosowanych na stronach internetowych. 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.

Przykładowe realizacje

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

Ruchome pojedyncze elementy:
Ten z pozoru statyczny przykład nabiera życia kiedy najedziemy kursorem na jeden z 2 obiektów.

Parallax Hover example
autor: Laust

See the Pen Parallax Hover example by Laust (@laustdeleuran) on CodePen.0

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
przykładowe użycia paralaksy
przykładowe rozwiązania prarallax
wzory, przykłady, demo, script paralaxy
trój wymiarowa grafika
ciekawe efekty na stronę
wybrane wzory
wyjątkowe rozwiązania
animacje na stronie
dodatki do witryny www
efekt paralaksy css
parallax efekt, effects