Mozgás- és kurzorhatások: egyéni kurzor, egérparallax, képparallax, vonalas hover

Négy kiterjesztés ad mozgást és interaktivitást a weboldalnak. Mindegyiket a Divi Supreme → Extensions oldalon kapcsolod be (és mented), utána a builderben jelennek meg a beállításaik.

Custom Cursor: egyéni egérkurzor

A Custom Cursor a böngésző alapkurzorát stílusozott kurzorra cseréli a nyilvános oldalon. Kapcsold be a kiterjesztést, majd a Custom Cursor customiserben (Divi Library) hozz létre kurzorelrendezéseket stílussal, színekkel, hatókörrel és hover viselkedéssel.

Mit tud

• Alapkurzor cseréje: márkás kurzor az egész webhelyen vagy kijelölt oldalakon.
• Stíluskészletek: Filter Glow változatok, Filled Circle, Two Circles, SVG Emitter és más.
• Színek, méret, csóva és keverési mód a márkához illesztve.
• Reagálás a hover célpontokra: hivatkozások és gombok fölött nagyít és színt vált, CSS-választóval megadva.
• Hatókör: az egész webhely vagy kijelölt oldalak, így a marketingoldalak eltérhetnek a blogtól.

Érintőképernyőn általában nem jelenik meg egyéni kurzor (csak mutatóeszközön).

Használati eset	Miért jó
Kreatív ügynökség weboldala	A megkülönböztető kurzor erősíti a megtervezett arculatot.
Kampány céloldal	Csak a promóciós oldalakon érvényes kurzor.
Portfólió	A projekthivatkozásokon a hover nagyítás kifinomultabbá teszi.

Mikor ne használd: segédprogramszerű vagy műszerfal-felületeken (a pontosság és megszokottság sérülhet), a hozzáférhetőséget előtérbe helyező termékeknél (maradjon a rendszerkurzor), és kizárólag érintőképernyős közönségnél.

Beállítás

1. Kapcsold be a Custom Cursor kiterjesztést a Divi Supreme → Extensions oldalon.
2. Hozz létre egy elrendezést, és nyisd meg a Custom Cursor customisert.
3. Kapcsold be a kurzort, válassz stílust és színeket, állítsd be az Apply To értéket, és mentsd.
4. Nézd meg asztali mutatóeszközön.

Gyors indulás: kapcsold be a kiterjesztést, hozz létre egy Custom Cursor elrendezést, és engedélyezd az egész webhelyre; válaszd a Filled Circle vagy valamelyik Filter Glow stílust, állítsd be az elsődleges színt; kapcsold be a Hide Default Cursor kapcsolót, és próbáld ki a hivatkozások fölötti hovert.

A Filter Glow stílusok színes hős részekhez illenek, a Filled Circle és Two Circles tisztább vállalati arculathoz. A keverési módok (Multiply, Screen, Difference stb.) kölcsönhatásba lépnek az oldal színeivel, ezért világos és sötét szakaszon is próbáld ki. A Hover Target Selector (például a, button) határozza meg, mely elemek váltják ki a hover nagyítást és színt.

Beállítás	Típus	Alapérték	Mit csinál
Custom Cursor	jelölőnégyzet	ki	Főkapcsoló az Extensions fülön (dsm_use_custom_cursor).
Enable Custom Cursor	kapcsoló		Bekapcsolja ezt a kurzorelrendezést a nyilvános oldalon.
Apply To	választó		Az egész webhely, kijelölt oldalak vagy más hatókörszabály.
Cursor Style	választó		Filter Glow 1-6, Filled Circle, Two Circles vagy SVG Emitter.
Primary Colour	szín		A kurzor fő színe.
Secondary Colour	szín		Második szín a kétszínű stílusokhoz.
Cursor Size	csúszka		A kurzor alapmérete.
Trail Size	csúszka		A csóva vagy követő elem mérete, ha van.
Blend Mode	választó	normal	CSS mix-blend-mode.
Animation Speed	csúszka		A kurzor mozgásának sebessége.
Opacity	csúszka		A kurzor átlátszatlansága.
Hide Default Cursor	kapcsoló		Aktív kurzor esetén elrejti a rendszerkurzort.
Hover Scale	csúszka		Nagyítás interaktív célpontok fölött.
Hover Colour	szín		Szín hover közben.
Hover Target Selector	szöveg		A hover célpontok CSS-választója.

Tippek: tartsd a kurzort elég kicsinek a pontos kattintáshoz. Ha több kurzorelrendezés is engedélyezett, a hatókörszabályok döntik el, melyik érvényes.

Mouse Parallax: egérrel vezérelt mélység

A Mouse Parallax (Supreme Parallax) kurzorvezérelt mélységmozgást ad soroknak, oszlopoknak, csoportoknak és moduloknak. Globálisan kapcsold be, majd elemenként az Advanced → Mouse Parallax alatt. A mozgás a szülő szakaszra korlátozódik. Érintőeszközökön az egérmozgást automatikusan figyelmen kívül hagyja.

Mit tud

• Az egér mozgására rétegek mozognak, mélységérzetet keltve a szakaszon belül.
• Állítható az erősség és a mélység: mennyire mozog a szakasz gyökere és az egyes rétegek.
• A mozgás vonatkoztatási kerete: Section (ajánlott) vagy Viewport.
• Simítás és visszarendeződés: lassan követi a kurzort, és ha a kurzor elhagyja a területet, visszaáll.
• Tengely: vízszintes, függőleges vagy mindkettő.

Használati eset	Miért jó
Hős szakaszok	A háttéralakzatok vagy képek enyhén követik a kurzort.
Funkciósorok	Az eltérő mélységű ikonok és kártyák erősítik a hierarchiát.
Portfólió bevezető	Finom mozgás, görgetésrablás nélkül.

Mikor ne használd: sok szöveget tartalmazó olvasóoldalakon (a mozgás zavarhat), kritikus mobil felületen (a hatás egérre szól, jelentést ne bízz rá), és mozgásra érzékeny elrendezéseknél.

Beállítás

1. Kapcsold be a Mouse Parallax kiterjesztést az Extensions oldalon (dsm_use_supreme_parallax).
2. Jelölj ki egy sort, oszlopot vagy modult, majd Advanced → Mouse Parallax.
3. Kapcsold be, és állítsd a mélységet és az erősséget.

Hős sornál kezdd mérsékelt Depth értékkel (például 1-2). Egy gyermekoszlopon eltérő mélységgel rétegzett mozgást érhetsz el. Asztali mutatóeszközön nézd meg.

Az erősség a szakasz mozgásgyökerére vonatkozik, a mélység rétegenként relatív erősség. Kezdd alacsonyan, és addig növeld, amíg szándékosnak hat, nem szédítőnek.

Beállítás	Típus	Alapérték	Mit csinál
Enable Mouse Parallax	kapcsoló	ki	Eszközönként; a tablet és a telefon az asztali értéket örökli, ha nincs megadva.
Mouse strength	csúszka	0.5	Mennyire követik a rétegek a kurzort (0-2).
Depth	csúszka	1	A réteg relatív mozgáserőssége (0-10).
Motion reference	választó	section	Section (ajánlott) vagy Viewport.
Motion smoothness	csúszka	0.1	Simítás a kurzor felé (0-1); alacsonyabb érték lágyabb.
Mouse from center	kapcsoló	be	A mozgás a szakasz közepétől számolódik.
Relax when mouse leaves	kapcsoló	be	A rétegek visszaállnak, ha a kurzor elhagyja a területet.
Axis	választó	both	Horizontal, Vertical vagy Both.

Tippek: a háttér- és előtérelemeknek adj eltérő mélységet; a szöveges modulokon tartsd alacsonyan az erősséget, hogy a szöveg olvasható maradjon.

Image Parallax: görgetésre mozgó képek

Az Image Parallax görgetésvezérelt mozgást ad a feltöltött képeknek (<img> elemek) a Divi és a Divi Supreme moduljaiban. Kapcsold be a kiterjesztést, majd minden képfeltöltő mező alatt kapcsold be a parallaxot.

Mit tud

• Valódi képeken mozog, így az alt szöveg és a keresőbarát jelölés megmarad (nem CSS-háttér).
• Beállítható az irány és a nagyítás mértéke.
• Állítható a késleltetés, a simítás és a tartomány.
• Engedélyezhető a túlcsordulás: a nagyított kép kiléphet a dobozából.

Használati eset	Miért jó
Szerkesztői hős kép	A nagy fotók görgetéskor mélységet kapnak.
Funkciószakaszok	A termék- vagy életstílusképek videó nélkül is dinamikusabbak.
Történetmesélő oldalak	A finom mozgás végigvezeti a szemet az elrendezésen.

Mikor ne használd: háttérképeknél (az a kiterjesztés a képfeltöltő mezőket és az <img> elemeket célozza, a szakaszháttérhez a Divi háttérparallaxát vagy a Mouse Parallaxot használd), az oldal minden képén (túl zajos), és fontos kezelőfelületi ikonoknál.

Beállítás

1. Kapcsold be az Image Parallax kiterjesztést az Extensions oldalon (dsm_use_image_parallax).
2. Szerkessz egy képfeltöltéses modult.
3. A képmező alatt kapcsold be az Image Parallax kapcsolót, és állítsd be az irányt és a nagyítást.

Gyors indulás: adj képet egy Card vagy Image modulhoz, kapcsold be a parallaxot, az irány legyen up, a nagyítás körülbelül 1.3, és görgess a nyilvános oldalon. Minden feltöltőmezőnek saját kapcsolója és beállítása van, így egy modulban az egyik kép mozoghat, a másik maradhat álló.

Beállítás	Típus	Alapérték	Mit csinál
Image Parallax	kapcsoló	ki	Bekapcsolja a görgetéses parallaxot erre a képre.
Parallax Orientation	választó	up	A mozgás iránya (fel, le, balra, jobbra, átlós).
Parallax Scale	csúszka	1.3	A kép nagyítása görgetés közben (1-3).
Parallax Delay (s)	csúszka	0	Indítási késleltetés másodpercben (0-5).
Parallax Transition	választó	Smooth default	A simítási görbe.
Parallax Max Transition (%)	csúszka	0	A görgetési tartomány korlátja (1-99); 0 = nincs korlát.
Parallax Overflow	kapcsoló	ki	Engedi, hogy a nagyított kép kilépjen a dobozából.

Tippek: ha a nagyítás 1 fölött van, kicsit nagyobb forrásképet használj, hogy a minőség megmaradjon. A túlcsordulást mobilon is próbáld ki, hogy ne okozzon vízszintes görgetést.

Line Hover Animation: animált vonalak linkekre

A Line Hover Animation animált aláhúzást (és hasonló vonalhatásokat) ad a modulokban lévő hivatkozásoknak, a Divi gombokat is beleértve. Bekapcsolva minden modul kap egy Design → Line Hover Animation csoportot.

Mit tud

• Animált aláhúzás hover közben, egyéni CSS nélkül.
• Sok előbeállítás: Underline Sweep Right, Double Line Reveal, Glitch Effect, Zigzag Line Animation, Pulse Line Effect és más (ugyanaz a család, mint a Supreme Line Hover modulé).
• Színe, időtartama és késleltetése állítható.
• Menümodulokban az aktuális oldal kiemelése: a mostani elem megtartja a vonalat.

A beállítás a modul belsejében lévő horgonyhivatkozásokon működik, és modulonként kapcsolható, nem csak webhelyszinten.

Használati eset	Miért jó
Navigációs menük	Finom mozgás, az aktuális oldalnak aktív állapottal.
Szöveges hivatkozáslisták	Egységes hover a lábléc és az erőforráslinkek között.
Gombszerű hivatkozások	Plusz hangsúly a hivatkozásjelölésű felhívásgomboknál.

Mikor ne használd: ha a modulban nincs hivatkozás; mozgásra érzékeny közönségnél (inkább statikus aláhúzás vagy rövidebb időtartam); és ha csak egyetlen önálló vonalhatás kell (ahhoz a Supreme Line Hover modul elég lehet).

Beállítás

1. Kapcsold be a Line Hover Animation kiterjesztést az Extensions oldalon (dsm_use_line_hover_animation), és mentsd.
2. Szerkessz egy modult, majd Design → Line Hover Animation.
3. Kapcsold be a Use Line Hover Animation kapcsolót, és válassz hatást.

Beállítás	Típus	Alapérték	Mit csinál
Use Line Hover Animation	kapcsoló	ki	A modulban lévő horgonyhivatkozásokra hover vonalat ad.
Animation Effect	választó	underline_sweep_right	Az előre beállított vonalanimáció.
Animation Line Color	szín	#2EA3F2	A vonal színe (a globális színek is használhatók).
Animation Duration	csúszka	300ms	A hover animáció hossza (100-10000 ms).
Animation Delay	csúszka	0ms	Késleltetés az animáció indulása előtt.
Show Active State on Current Page	kapcsoló	be	Menümodulokban megtartja a vonalat az aktuális oldal elemén.
Active Menu Line Color	szín		Opcionális felülbírálat az aktív menüvonal színére.

Tippek: a fejlécben és a láblécben ugyanazt a hatást és színt használd az egységességért. A 200-400 ms körüli időtartam felhasználói felületi finomságot ad, anélkül hogy lassúnak hatna.