# Interakció panel (réteg)

> Egérkurzor, az egér mozgására reagáló réteg és rámutatáskor megjelenő stílus beállítása, valamint a kattintásra váltó második szöveg.

Az **Interakció** panelen azt állítod be, hogyan viselkedik a kijelölt réteg, ha a látogató fölé viszi vagy a közelében mozgatja az egeret, illetve rákattint. Beállíthatod a rétegen látszó egérkurzort, az egér közeledtére induló mozgást, a rámutatáskor érvényes második stílust, és szöveges rétegnél a kattintásra váltó második szöveget.

## A panel megnyitása

1. Jelölj ki egy réteget a színpadon vagy a [Rétegek oldalsávon](https://hub.hellowp.io/hu/plugins/revslider/szerkeszto-bejaras-retegek-oldalsav/).
2. A jobb oldalsávon kapcsolj [Tervezési módba](https://hub.hellowp.io/hu/plugins/revslider/szerkeszto-bejaras-tervezesi-mod/).
3. Kattints az **Interakció** fülre (az egér ikonra).

![Az Interakció panel egy szöveges rétegnél](./kepek/szerkeszto-panelek-3-interakcio.webp)

*Az Interakció panel egy szöveges rétegnél* (https://minta-bolt.hu/wp-admin/admin.php?page=revslider&view=editor&module=1&slide=1)

A képen fent a **Kapcsolható szöveg** kapcsoló, alatta az **Interakció** szakasz a kurzorok és az egérmozgások csempéivel, legalul a **Rámutatás stílusa és transzformációja** kapcsoló látszik.

A panel három szakaszból áll. A **Kapcsolható szöveg** csak szöveges rétegnél látszik. Az **Interakció** minden rétegnél megvan. A **Rámutatás stílusa és transzformációja** csak akkor jelenik meg, ha az **Interakció** be van kapcsolva. A dia háttere nem reagál az egérre, ezért annál a panel üres.

## Kapcsolható szöveg

A szakasz kapcsolójával egy szöveges rétegnek második szöveget adhatsz. Kattintásra a réteg átvált erre a szövegre, még egy kattintásra vissza az eredetire.

| Beállítás | Mit csinál |
| --- | --- |
| Kapcsolt tartalom | A második szöveg. Csak akkor látszik, ha a szakasz be van kapcsolva. |

## Interakció

A szakasz kapcsolójával dönthetsz arról, hogy a réteg egyáltalán reagál-e az egérre. Kikapcsolt állapotban a réteg nem mutat saját kurzort, nem mozdul, és a rámutatási szakasz is eltűnik a panelről.

### Kurzorikon

A tizenkét csempe közül azt választod ki, milyen egérkurzor látszik a réteg fölött. A csempére víve az egeret a kurzor az adott alakra vált.

| Kurzor | Hogyan néz ki |
| --- | --- |
| Inherit | A réteg annak az elemnek a kurzorát használja, amelyben van. Ez az alapérték. |
| Auto | A böngésző választ az egér alatti tartalom alapján. |
| Arrow | A szokásos nyíl. |
| Pointer | A hivatkozásoknál látott mutatóujj. |
| Text | A kijelölhető szövegnél látott függőleges vonal. |
| Move | A húzáshoz használt négyirányú nyíl. |
| Crosshair | Vékony kereszt. |
| Help | Nyíl kérdőjellel. |
| Wait | A várakozást jelző kurzor. |
| Zoom In | Nagyító pluszjellel. |
| Zoom Out | Nagyító mínuszjellel. |
| Hidden | A réteg fölött nem látszik kurzor. |

### Kurzormozgás

Itt azt választod ki, milyen mozgást végezzen a réteg, amikor az egér a közelében jár. A csempék lejátszanak egy előnézetet, és négy oldalra oszlanak, a csempék alatti pontok lapoznak közöttük. Az alapérték a **Nincs**.

Ha a **Nincs** helyett valamelyik csempét választod, a csempék alatt megjelenik a négy közös szabályozó (**Erősség**, **Sugár**, **Sebesség**, **Visszatérés**). A csempe választása betölti a hozzá tartozó kezdőértékeket.

| Mozgás | Mit csinál |
| --- | --- |
| Magnet | A réteg az egér felé mozdul, amíg az egér a megadott sugáron belül van. |
| Snap To Cursor | A réteg az egér helyére ugrik, és követi. |
| Slow Drift | A réteg lassan, nagy sugárból húzódik az egér felé. |
| Lean In | A réteg az egér felé dől. |
| Sideways Only | A réteg csak egy tengely mentén követi az egeret (a tengelyt a **Tengely** adja meg). |
| Stretch | A réteg az egér felé nyúlik. |
| Taffy | A réteg az egér felé nyúlik, és rugalmasan tér vissza. |
| Pop | A réteg gyorsan megnő, amint az egér a sugáron belülre ér. |
| Swell | A réteg lassan megnő, amíg az egér a sugáron belül van. |
| Shy | A réteg összezsugorodik és eltávolodik, ahogy az egér közeledik. |
| Recoil | A réteg eltávolodik az egértől, és rugalmasan tér vissza. |
| Repel | A réteg eltávolodik az egértől. |
| Skittish | A réteg gyorsan elugrik az egértől, és pattogva tér vissza. |
| Card Tilt | A réteg térben az egér felé billen. |
| Deep Tilt | A réteg térben, a Card Tiltnél nagyobb mértékben billen az egér felé. |
| Swing | A réteg ide-oda forog, ahogy az egér elhalad mellette. |
| Wobble | A réteg ide-oda forog, ahogy az egér elhalad mellette, és rugalmasan tér vissza. |

A mozgás beállításai (csak akkor látszanak, ha a mozgás nem **Nincs**):

| Beállítás | Mit csinál | Tartomány |
| --- | --- | --- |
| Erősség | A mozgás nagysága: milyen messzire mozdul, nő vagy dől a réteg. A mezőn balra-jobbra húzva is állítható. | 0 és 150 között |
| Sugár | Milyen távolságon belül indítja el a mozgást az egér. | 20 és 800 képpont között |
| Sebesség | Milyen gyorsan követi a réteg az egeret. A nagyobb érték az egér sebességét adja, a kisebb lassabb követést. | 2 és 40 között |
| Visszatérés | Hogyan tér vissza a réteg az eredeti helyére, ha az egér elhagyta a sugarat. Smooth: túllendülés nélkül. Overshoot: egyszer túllendül. Elastic: többször túllendül, egyre kevésbé. Bounce: többször visszapattan az eredeti helyen. | |
| Tengely | Milyen irányban mozoghat a réteg: Both (vízszintesen és függőlegesen), Horizontal (csak balra-jobbra), Vertical (csak fel-le). Csak a Magnet, Snap To Cursor, Slow Drift, Lean In, Sideways Only, Repel és Skittish mozgásnál látszik. | |
| Perspektíva | A térbeli billenés perspektívájának távolsága. Rövid távolságnál erősebbnek, hosszúnál laposabbnak látszik a billenés. Csak a Card Tilt és Deep Tilt mozgásnál látszik. | 200 és 3000 képpont között |

## Rámutatás stílusa és transzformációja

A szakasz kapcsolójával a rétegnek második stílust adhatsz, amelyet akkor vesz fel, ha az egér fölé ér. Az egér ráhúzásakor a réteg animálva vált át a normál stílusról a rámutatási stílusra, az egér elhagyásakor vissza. A szakasz minden beállítása a [Stílus](https://hub.hellowp.io/hu/plugins/revslider/szerkeszto-panelek-stilus/) vagy az [Extra stílus](https://hub.hellowp.io/hu/plugins/revslider/szerkeszto-panelek-extra-stilus/) panel megfelelő beállítását tükrözi, és azt az értéket adja meg, amelyet a beállítás rámutatáskor felvesz.

![A rámutatási stílus beállításai: stílus, szűrők és animáció](./kepek/szerkeszto-panelek-3-interakcio-rahuzas.webp)

*A rámutatási stílus beállításai: stílus, szűrők és animáció* (https://minta-bolt.hu/wp-admin/admin.php?page=revslider&view=editor&module=1&slide=1)

A képen a bekapcsolt szakasz látszik: a **Stílus** színmezői, a **Szűrők**, az **Animáció** és legalul a **Maszk alatti animáció** és **Letiltás mobilon** kapcsoló.

### Stílus

A szakasz azt adja meg, milyen színeket, szövegdíszítést és szegélyt mutasson a réteg rámutatáskor. Hogy pontosan mely beállítások látszanak, a réteg típusától függ. Ha a kurzor a **Stílus** címsor fölött áll, a sor végén megjelenik a stílus alaphelyzetbe állítása gomb. Ez a szakasz minden beállítását törli, így a réteg színe, szövegdíszítése és szegélye rámutatáskor nem változik.

| Beállítás | Mit csinál |
| --- | --- |
| Eredeti színek megtartása | Csak SVG ikon rétegnél látszik. Bekapcsolva az SVG az eredeti fájl színeit használja, és az SVG rámutatási színbeállításai eltűnnek. Ugyanaz a beállítás, mint a Stílus panelen, így az egyik helyen átállítva a másikon is megváltozik. |
| SVG színe | Csak SVG ikon rétegnél, kikapcsolt **Eredeti színek megtartása** mellett. Az SVG kitöltőszíne rámutatáskor. A színmezőre kattintva a [színválasztó](https://hub.hellowp.io/hu/plugins/revslider/szerkeszto-panelek-szinvalaszto/) nyílik meg. |
| Körvonal színe | Ugyanilyen feltétellel az SVG körvonalának színe rámutatáskor. |
| Körvonal vastagsága | Az SVG körvonalának vastagsága rámutatáskor, 0 és 500 között. Az 1-nél kisebb számok is használhatók. A vastagság az eredeti grafika méretéhez viszonyított, ezért egy felnagyított kis grafikán az 1 is vastagnak látszhat. |
| Szaggatás hossza | Az SVG körvonalának szaggatási hossza rámutatáskor. A 0-nál nagyobb szám szaggatott vonallá alakítja a körvonalat, és minél nagyobb, annál hosszabbak a szaggatások és a közök. Ha a normál és a rámutatási stílus szaggatási hossza eltér, a szaggatott vonal mozogni látszik. |
| Szaggatás eltolása | Hol kezdődjenek a szaggatások a körvonal mentén (a hossz 0-nál nagyobb értékénél), −100 és 100 között. A normáltól eltérő érték rámutatáskor végigtolja a szaggatásokat a vonalon. |
| Szöveg | Csak szöveges rétegnél: a szöveg színe rámutatáskor. |
| Szövegdíszítés | Csak szöveges rétegnél: None (nincs), Overline (felül vonal), Underline (alá húzott), Line Through (áthúzott). |
| Háttér | A réteg háttérszíne rámutatáskor. |
| Színátmenet-animáció | Ha a háttér valamelyik színe színátmenet: Slide (az új háttér végigcsúszik a rétegen), Fade (az új háttér áttűnik a régi fölé). |
| Szegély | A szegély színe rámutatáskor. |
| Szegély stílusa | None, Solid, Dotted, Dashed, Double, Groove, Ridge, Inset vagy Outset. |
| Szegély vastagsága | A négy oldal szegélyvastagsága képpontban, felül, jobbra, alul, balra sorrendben. Ha a lakat ikont bekapcsolod, mind a négy oldal ugyanakkora lesz. Csak akkor látszik, ha a szegély stílusa nem None. |
| Szegély lekerekítése | A négy sarok lekerekítése képpontban, bal felső, jobb felső, jobb alsó, bal alsó sorrendben. A lakat ikon itt is egyformára állítja a négyet. Rámutatáskor a sarkok szegély nélkül is lekerekednek. |

### Szűrők

| Beállítás | Mit csinál | Tartomány |
| --- | --- | --- |
| Elmosás | Mennyire legyen elmosódott a réteg rámutatáskor. | 0 és 500 képpont között |
| Szürkeárnyalat | A réteg színének mekkora részét veszi el. | 0 és 100% között |
| Fényerő | A réteg fényessége. A 100% a normál fényerő, a kisebb sötétít, a nagyobb világosít. | 0 és 500% között |

Mindegyik érték a mezőn balra-jobbra húzva is állítható.

### Animáció

A szakasz azt adja meg, hogyan animálódik a réteg a rámutatási stílusba, és milyen átalakítást, átlátszatlanságot és rétegsorrendet vesz fel rámutatáskor.

| Beállítás | Mit csinál | Tartomány |
| --- | --- | --- |
| Időtartam | Mennyi idő alatt vált a normál stílusról a rámutatásira és vissza. Alapérték: 300ms. | 0 és 100000 ms között |
| Easing | A váltás gyorsulási görbéje (Back, Bounce, Circ, Cubic, Elastic, Expo, Linear, Power0 és Power4 között, QIcons, Quad, Quart, Quint, Sine, Strong, valamint Late, Late2, Late3). Alapérték: Power3.easeInOut. | |
| zIndex | A réteg rétegsorrendje rámutatáskor. A nagyobb szám előbbre hozza a réteget, így a ráhúzott réteg a szomszédai elé kerülhet. Az auto megtartja a normál sorrendet. | 0 és 5000 között |
| Átlátszatlanság | A réteg átlátszatlansága rámutatáskor. | 0 (teljesen átlátszó) és 1 között |
| X méretezése | Vízszintes méretezés a normál szélesség többszöröseként. | 0 és 10 között |
| Y méretezése | Függőleges méretezés a normál magasság többszöröseként. | 0 és 10 között |
| X irányú nyírás | A réteg függőleges éleinek ferdítése fokban. | −100 és 100 között |
| Y irányú nyírás | A réteg vízszintes éleinek ferdítése fokban. | −100 és 100 között |
| Forgatás X | Forgatás a vízszintes tengely körül, fokban. | −5000 és 500 fok között |
| Forgatás Y | Forgatás a függőleges tengely körül, fokban. | −5000 és 5000 fok között |
| Forgatás Z | Síkbeli forgatás fokban, óramutató járásával megegyezően vagy ellentétesen. | −5000 és 5000 fok között |
| Origó X, Y, Z | Annak a pontnak a helye, amely körül az átalakítás történik, a réteg szélességének, magasságának, illetve mélységének százalékában. Az 50% a réteg közepe, illetve a felülete. | −2500% és 2500% között |
| Maszk alatti animáció | Bekapcsolva a rámutatási átalakítás a réteg saját dobozára van vágva, a kilógó rész nem látszik. Kikapcsolva az animáció kiléphet a dobozból. | |
| Letiltás mobilon | Bekapcsolva a rámutatási stílus mobil eszközökön nem érvényesül. Mobilon nincs egérmutató, a stílus érintésre kapcsolódna be. | |

### Szövegárnyék és dobozárnyék

A **Szövegárnyék** és a **Dobozárnyék** szakasz külön kapcsolóval kapcsolható be. Rámutatáskor a réteg szövegéről, illetve külső dobozáról vet egy vagy több árnyékot. Ha a normál stílusban nincs árnyék, az árnyék rámutatáskor elhalványul be, az egér elhagyásakor ki. Több árnyékot egymás fölé rakva összetettebb hatás érhető el. Az értékek a mezőn húzva is állíthatók.

| Beállítás | Mit csinál | Tartomány |
| --- | --- | --- |
| X | Vízszintes eltolás. | −50 és 50 képpont között |
| Y | Függőleges eltolás. | −50 és 50 képpont között |
| Elmosás | Az árnyék szélének lágyítása. | 0 és 100 képpont között |
| Kiterjedés | Csak a dobozárnyéknál: az árnyék növelése vagy zsugorítása a réteg méretéhez képest, az elmosás előtt. | −20 és 40 képpont között |
| Árnyék színe | Az árnyék színe. A színmezőre kattintva a színválasztó nyílik meg. A részben átlátszó szín természetesebb hatást ad, mint a tömör. | |
| Szint hozzáadása | Újabb árnyék a már meglévők fölé, saját X, Y, elmosás (dobozárnyéknál kiterjedés) és színbeállítással. Ha egynél több szint van, mindegyik a sorszámát viseli. | |
| Szint eltávolítása | Törli azt az árnyékszintet, amely fölött a kurzor áll. Csak akkor látszik, ha legalább két szint van. Az utolsó szintet nem lehet így törölni, a rámutatási árnyék teljes törléséhez kapcsold ki a szakaszt. | |