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

> Egyéni egérkurzor, egérrel vezérelt mélység, görgetésre mozgó képek és animált vonalak linkekre.

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.