Tovább a tartalomhoz

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.

  1. Jelölj ki egy réteget a színpadon vagy a Rétegek oldalsávon.
  2. A jobb oldalsávon kapcsolj Tervezési módba.
  3. Kattints az Interakció fülre (az egér ikonra).
https://minta-bolt.hu/wp-admin/admin.php?page=revslider&view=editor&module=1&slide=1
Az Interakció panel egy szöveges rétegnél

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.

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.

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.

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.

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.

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

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ó.

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.
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ó.

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.

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:

Tiszteletben tartjuk a magánszférádat

Sütiket használunk a böngészési élmény javítására és a forgalom elemzésére. Az analitika csak akkor indul, ha engeded. Adatvédelmi irányelvek, Sütitájékoztató.

Sütibeállítások