12 – Paralaksa

Paralaksa (parallax) w HTML to efekt wizualny, w którym tło strony porusza się wolniej niż treść na pierwszym planie podczas przewijania. Dzięki temu strona sprawia wrażenie „głębi”, trochę jak w grach lub animacjach.

Jak to wygląda w praktyce

Wyobraź sobie:

• tekst przewija się normalnie w dół

• obraz w tle „zostaje w miejscu” albo przesuwa się wolniej

To właśnie jest efekt paralaksy.

2️⃣ Najprostszy przykład (HTML + CSS)

HTML

CSS (style.css)

Co tu się dzieje?

Najważniejsza linijka:

Oznacza ona, że:

• tło jest „przyklejone” do okna przeglądarki

• treść się przewija

• tło zostaje w miejscu → powstaje efekt paralaksy

Dlaczego to się nazywa „paralaksa”?

Bo elementy na różnych „głębiach”:

• poruszają się z różną prędkością

• mózg interpretuje to jako trójwymiarowość

Tak samo działa to w:

• fotografii

• astronomii

• grach komputerowych

Ważna uwaga

background-attachment: fixed:

• nie działa idealnie na niektórych telefonach

• w profesjonalnych projektach często używa się JavaScriptu lub bibliotek (np. GSAP, ScrollMagic)