Niebo, góry, las — każdy scrolluje inaczej
Sky, mountains, forest — each scrolls differently
Ustaw prędkość przewijania dla każdej z trzech warstw SVG osobno i zobacz efekt paralaksy na żywo, przewijając podgląd. Dwa warianty kodu: nowoczesny CSS bez JS-a i uniwersalny fallback.
Set the scroll speed for each of three SVG layers independently and see the parallax effect live by scrolling the preview. Two code variants: modern JS-free CSS and a universal fallback.
Trzy warstwy tego podglądu to zwykłe kształty SVG z viewBox i transformacjami —
dokładnie to, co budujemy od podstaw w
Kursie SVG.
Warstwowanie i transformacje omawiamy szczegółowo w
Lekcji 8.
The three layers in this preview are plain SVG shapes with a viewBox and
transforms — exactly what we build from scratch in the
SVG Course.
Layering and transforms are covered in detail in
Lesson 8.
Ustaw prędkości
Set the speeds
Im niższa prędkość, tym wolniej warstwa porusza się względem przewijania — 0 oznacza warstwę nieruchomą.
The lower the speed, the slower the layer moves relative to scrolling — 0 means a fixed layer.
Przewiń podgląd
Scroll the preview
Przewiń w dół wewnątrz okna podglądu, żeby zobaczyć efekt paralaksy na żywo.
Scroll down inside the preview window to see the parallax effect live.
Wybierz wariant kodu
Pick a code variant
Nowoczesny CSS działa bez JS-a, ale na razie tylko w przeglądarkach opartych na Chromium. JS działa wszędzie.
Modern CSS works without JS, but currently only in Chromium-based browsers. JS works everywhere.
- Sekcje hero z głębią — tło, elementy środkowe i pierwszy plan.
- Strony produktowe i portfolio z efektem "ożywionego" scrolla.
- Landing page'e opowiadające historię w miarę przewijania.
- Hero sections with depth — background, midground, and foreground.
- Product and portfolio pages with a "lively" scroll feel.
- Landing pages that tell a story as you scroll.
Czym jest ten generator? To wizualne narzędzie do budowania efektu paralaksy — warstwy poruszające się z różną prędkością względem przewijania strony, co tworzy iluzję głębi.
What is this tool? A visual way to build a parallax effect — layers moving at different speeds relative to page scrolling, creating an illusion of depth.
Na czym polega efekt paralaksy?
What is the parallax effect?
To złudzenie głębi powstające wtedy, gdy warstwy bliżej "kamery" poruszają się szybciej niż warstwy dalej — dokładnie tak, jak drzewa za oknem samochodu mijają Cię szybciej niż odległe góry.
It's an illusion of depth that occurs when layers closer to the "camera" move faster than layers further away — just like trees outside a car window pass by faster than distant mountains.
Czym różni się wariant CSS od wariantu JS?
How does the CSS variant differ from the JS one?
Wariant CSS wykorzystuje animation-timeline: scroll() — nowszą
funkcję CSS, która wiąże animację bezpośrednio z pozycją przewijania, bez JavaScriptu.
Wariant JS nasłuchuje zdarzenia scroll i ręcznie ustawia transform — działa
we wszystkich przeglądarkach, kosztem odrobiny kodu.
The CSS variant uses animation-timeline: scroll() — a newer CSS
feature that ties an animation directly to scroll position, with no JavaScript. The JS
variant listens for the scroll event and manually sets transform — it works in
every browser, at the cost of a little code.
Czy nowoczesny CSS działa we wszystkich przeglądarkach?
Does the modern CSS work in every browser?
Nie jeszcze. animation-timeline: scroll() jest obsługiwane przez
przeglądarki oparte na Chromium (Chrome, Edge). Firefox i Safari na razie tego nie wspierają
— dla nich potrzebny jest wariant JS jako zamiennik.
Not yet. animation-timeline: scroll() is supported by
Chromium-based browsers (Chrome, Edge). Firefox and Safari don't support it yet — they need
the JS variant as a substitute.
Czy paralaksa spowalnia stronę?
Does parallax slow down the page?
Animowanie transform jest tanie dla przeglądarki (obsługiwane
przez GPU), więc przy rozsądnej liczbie warstw wpływ na wydajność jest minimalny. Unikaj
animowania właściwości takich jak top czy left — te są znacznie droższe.
Animating transform is cheap for the browser (GPU-accelerated),
so with a reasonable number of layers the performance impact is minimal. Avoid animating
properties like top or left — those are much more expensive.
Czy narzędzie wysyła moje dane gdziekolwiek?
Does the tool upload my data anywhere?
Nie. Generator działa w całości w Twojej przeglądarce.
No. The generator runs entirely in your browser.
Czym jest CSS/SVG Parallax Layers Generator?
Paralaksa to jeden z najstarszych trików budujących wrażenie głębi w płaskim medium — znany z gier 2D na długo przed tym, jak trafił do stron internetowych. Zasada jest prosta: elementy "bliżej" powinny poruszać się szybciej niż elementy "dalej", tak jak w naturalnym patrzeniu przez okno w ruchu.
Dwa sposoby na tę samą animację
Klasyczne podejście JavaScript nasłuchuje zdarzenia scroll i przy każdej
zmianie pozycji przewijania oblicza nową wartość transform: translateY() dla
każdej warstwy, mnożąc pozycję scrolla przez indywidualny współczynnik prędkości. Nowsze
podejście CSS, animation-timeline: scroll(), pozwala przypiąć animację
bezpośrednio do postępu przewijania — bez pisania ani jednej linijki JavaScriptu, kosztem
ograniczonego wsparcia przeglądarek.
Dlaczego warstwy poruszają się z różną prędkością
- Prędkość 0 — warstwa całkowicie nieruchoma, zachowuje się jak stałe tło.
- Prędkość poniżej 1 — warstwa porusza się wolniej niż scroll, sprawiając wrażenie oddalenia (niebo, góry w tle).
- Prędkość równa 1 — warstwa porusza się dokładnie tak szybko jak scroll, jakby była zwykłą treścią strony.
- Prędkość powyżej 1 — warstwa porusza się szybciej niż scroll, sprawiając wrażenie bliskości (pierwszy plan).
Praktyczne wskazówki
Trzymaj różnice prędkości między warstwami umiarkowane — zbyt duży kontrast (np. 0.1 vs 2.0) sprawia, że warstwy "rozjeżdżają się" wizualnie zamiast tworzyć spójną iluzję głębi. Testuj efekt na różnych szybkościach przewijania, bo to, co wygląda dobrze przy powolnym scrollu myszką, może wyglądać chaotycznie przy szybkim przewijaniu touchpadem.
Wdrożenie w produkcji
Wariant CSS wymaga owinięcia warstw w kontener z overflow-y: scroll i
ustawienia animation-range odpowiadającego zakresowi przewijania. Wariant JS
jest bardziej uniwersalny, ale pamiętaj o ograniczeniu częstotliwości wywołań (throttling)
przy prawdziwym wdrożeniu na dużej stronie, żeby nie przeciążać wątku głównego.
What is a CSS/SVG Parallax Layers Generator?
Parallax is one of the oldest tricks for building a sense of depth in a flat medium — known from 2D games long before it reached websites. The principle is simple: elements "closer" should move faster than elements "farther away," just like naturally looking out a moving window.
Two ways to build the same animation
The classic JavaScript approach listens for the scroll event and, on every
scroll position change, computes a new transform: translateY() value for each
layer by multiplying the scroll position by an individual speed factor. The newer CSS
approach, animation-timeline: scroll(), lets you pin an animation directly to
scroll progress — without writing a single line of JavaScript, at the cost of limited
browser support.
Why layers move at different speeds
- Speed 0 — the layer is completely fixed, behaving like a static background.
- Speed below 1 — the layer moves slower than the scroll, giving an impression of distance (sky, background mountains).
- Speed equal to 1 — the layer moves exactly as fast as the scroll, as if it were ordinary page content.
- Speed above 1 — the layer moves faster than the scroll, giving an impression of closeness (foreground).
Practical tips
Keep the speed differences between layers moderate — too much contrast (e.g. 0.1 vs 2.0) makes layers visually "fall apart" instead of creating a coherent depth illusion. Test the effect at different scroll speeds, since what looks good with a slow mouse-wheel scroll can look chaotic with a fast touchpad swipe.
Using it in production
The CSS variant requires wrapping the layers in a container with overflow-y:
scroll and setting an animation-range matching the scroll range. The JS
variant is more universal, but remember to throttle the call frequency in a real deployment
on a large page, so you don't overload the main thread.
Sprawdź też inne generatory CSS.
Check out the other CSS generators too.
Fale SVG, clip-path, grid i gradienty — wszystko w jednym miejscu, bez instalacji.
SVG waves, clip-path, grid, and gradients — all in one place, no install needed.