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
Szekció neve “A panel megnyitása”- Jelölj ki egy réteget a színpadon vagy a Rétegek oldalsávon.
- A jobb oldalsávon kapcsolj Tervezési módba.
- Kattints az Interakció fülre (az egér ikonra).

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
Szekció neve “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ó
Szekció neve “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
Szekció neve “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
Szekció neve “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
Szekció neve “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 vagy az Extra stílus 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 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
Szekció neve “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ó 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
Szekció neve “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ó
Szekció neve “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
Szekció neve “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. |
Készült: