Layer Style

Kliknij dwukrotnie dowolną warstwę (na płótnie albo w panelu Layers), żeby otworzyć Layer style — modal z zakładkami, gdzie każda zakładka to jeden efekt. Efekty są niezależne: każdy ma przełącznik enable, a do końcowego renderowanego layera wkład wnoszą tylko te włączone.

Efekty są przechowywane w JSONie effects warstwy. Siedem zakładek:

Parallax

Sprawia, że warstwa podąża za kursorem z offsetem głębi + pochylenia na storefroncie. Używane do “subtelnego 3D” — elementy tła ledwo się ruszają, elementy pierwszego planu dryfują mocniej.

• Enable — włącza/wyłącza efekt na tej warstwie.
• Depth (-1 do 1) — mnożnik offsetu translate. Warstwy tła powinny używać wartości bliskich 0 (albo lekko ujemnych); warstwy pierwszego planu do ~0.7. Wartości ujemne ruszają się przeciwnie do kursora.
• Tilt (0 do 1) — mnożnik rotateX/rotateY. Dodaje uczucie pochylenia w stronę kursora.
• Respect reduced-motion preference — pomija parallax dla odwiedzających, których OS raportuje prefers-reduced-motion: reduce. Zalecane dla dostępności.

Slider intensywności w Stage settings → Parallax to globalny mnożnik na każdą warstwę z depth/tilt. Ustaw na 0, żeby wyłączyć parallax dla całej sceny bez ruszania pojedynczych warstw.

Drop shadow

CSS box-shadow wyrzucony z bounding boxa warstwy.

• Enable
• X / Y offset — piksele.
• Blur — piksele.
• Spread — piksele.
• Color — picker RGBA.
• Inset — checkbox; gdy on, wyrzuca cień do środka.

Stroke

CSS border wokół warstwy.

• Enable
• Width — piksele.
• Style — Solid / Dashed / Dotted / Double / None.
• Color — picker RGBA.

Background

Solidny kolor tła pod treścią warstwy.

• Enable
• Color — picker RGBA.

Przydatne dla warstw tekstowych potrzebujących kolorowego pasa, albo żeby ukształtować stan hover buttona przez oś czasu.

Transform

Transformacje 3D zaaplikowane do wrappera warstwy.

• Enable
• Rotation X / Y / Z — stopnie.
• Perspective — piksele (CSS perspective).
• Scale X / Y — mnożnik (1 = bez skalowania).
• Skew X / Y — stopnie.

Przydatne do pochyleń parallax, które chcesz “wbić” niezależnie od kursora, izometrycznych mockupów albo prostych efektów 3D (karta permanentnie obrócona o 15° na osi Y).

Filter

CSS filter() chain zaaplikowany do warstwy.

• Enable
• Brightness — slider.
• Contrast — slider.
• Saturate — slider.
• Blur — piksele.
• Hue rotate — stopnie.
• Invert — toggle.

Te łączą się w kolejności CSS filter. Używaj do color-gradingu obrazu bez re-eksportu, albo do stopniowego ostrzenia rozmytego obrazu przez oś czasu.

Click action

Sprawia, że cała warstwa jest klikalna, niezależnie od typu. (Warstwy button mają już własną konfigurację akcji; ta zakładka to ekwiwalent dla dowolnej innej warstwy.)

• Enable
• Action — trzy tryby:
  • Open URL — nawiguje do URL.
  • Close popup — zamyka popup na tę wizytę.
  • Scroll to selector — płynnie scrolluje stronę do CSS selektora, który podasz.
• Value — zależy od akcji: URL dla Open URL, CSS selektor dla Scroll to selector.
• Open in — dla Open URL: Same window albo New tab.

Aplikowanie efektów do wielu warstw

Prawy klik na warstwę z włączonymi efektami → Copy effects. Następnie zaznacz jedną lub wiele docelowych warstw, prawy klik → Paste effects. Plugin raportuje ile warstw otrzymało paste.

Wskazówki wizualne w panelu Layers

Warstwa z co najmniej jednym włączonym efektem pokazuje mały badge Effects w swoim wierszu (tooltip: “This layer has active effects”). Sub-ikona oka badge’a respektuje flagę visible każdego efektu — przełączanie widoczności pozwala podejrzeć warstwę bez trwałego usuwania efektu.

Zapis

Kliknij Save layer style na dole modala, żeby potwierdzić. Zmiana ląduje na undo stacku jako jedna akcja — undo przywraca wszystkie efekty do poprzedniego stanu. Zapis sceny zapisuje to do bazy; do tego momentu żyje w working copy.

Gdzie dalej

• Referencja → Typy warstw — które efekty stosują się do których typów warstw.
• Edytor → Timeline — animowanie wartości efektów przez keyframe’y.
• Storefront → Parallax myszy — jak parallax wygląda na produkcji.