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

przykłady parallax

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



Reading Time: 3 minutes

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

Przeczytaj również

Efekt Parallax podczas przewijania strony 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...
Darmowe zdjęcia na stronę lub bloga Odpowiednio dobrana grafika odgrywa na stronie bardzo istotną rolę. Nie każdy jednak z nas jest fotografem, grafikiem i nie potrafi samemu stworzyć od...
Jak zrobić własną stronę błędu 404? – htacce... Strona błędu 404 - brzmi to z ozoru trochę enigmatycznie. Mimo to strona ta znana praktycznie każdemu - ponieważ oznacza brak konkretnej podstrony w d...
Efekt Marquee czyli przewijający się tekst na stro... Marquee jest znacznikiem typu blokowego w HTML. Z jego pomocą można uzyskać prostą animację tekstu w postaci przewijającego się tekstu. Początkowo Ma...