MagyarmagyarWidget-kiterjesztések: Animációk, Rellax, Transzformációk és Eszköztipp
Négy kiterjesztés, amely bármelyik Elementor-widgetre ráteszi a CSS-animációt, a görgetésre mozgó parallax hatást, a 3D-s átalakítást és az eszköztippet.
Ez a fejezet négy kiterjesztést ír le. Mindegyik bármelyik widgeten bekapcsolható: nyisd meg a widget Haladó fülét, és keresd meg a megfelelő szekciót. A szekciók neve a felületen Animations, Rellax, Transforms és Tooltip, bennük a kapcsoló felirata Animációk, Rellax, Transzformációk, illetve Eszköztipp. A beállítások csak a kapcsoló bekapcsolása után jelennek meg.
Animációk
Szekció neve “Animációk”Az Animations szekció CSS3 kulcskockákkal animálja a widgetet. A kapcsoló bekapcsolása után az Animáció típusa mezőben választasz a kész animációk közül, a többi beállítás a lejátszást szabályozza.
A képen a szekció bekapcsolt állapota látszik: felül a lejátszás és szüneteltetés gombja, alatta a típus, az origó és az időzítés beállításai.
| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| Animációk | Be- és kikapcsolja az animációt a widgeten. | Nem |
| Lejátszás / Szüneteltetés gombok | A szerkesztőben elindítják vagy megállítják az animációt, így megnézheted a hatását. | |
| Animáció típusa | Az animáció fajtája: Lebegés, Áthaladás, Pulzálás, Lengés, Nagyítás, Robbanás, Csillogás, Emelkedés vagy süllyedés, Forgás, Ismétlések, Pattogás. | Lebegés |
| Transzformáció origója | A CSS transform-origin tulajdonsága: az a pont, amely körül az animáció történik (például Bal felső, Közép, Lent jobbra). |
Közép |
| Ismétlési mód | Be- vagy kikapcsolja a végtelen ismétlést. Kikapcsolva megadhatod, hányszor játssza le az animációt. | Végtelen |
| Időtartam | Egy teljes animációs ciklus hossza másodpercben. | 1 |
| Késleltetés | Ennyi másodperc után indul az animáció. | 0 |
| Időzítési függvény | Az animáció sebességgörbéje: Lineáris, Ease, Fokozatos gyorsulás, Fokozatos lassulás, Ease In Out, valamint az easeInQuint, easeOutQuint, easeInOutQuint, easeInCirc, easeOutCirc, easeInOutCirc, easeInExpo, easeOutExpo, easeInOutExpo, easeInBack, easeOutBack és easeInOutBack görbék. | Lineáris |
| Irány | Előre (Normál), visszafelé (Megfordítás), felváltva előre és vissza (Váltakozó), vagy visszafelé indulva felváltva (Váltakozva fordítva). | Normál |
| Kitöltési mód | A widget kinézete, amikor az animáció éppen nem fut: Nincs, Visszafelé (az indulás előtt az első kockát mutatja), Előre (a végén a legutolsó kockánál marad), Mindkettő. | Nincs |
Rellax
Szekció neve “Rellax”A Rellax szekció parallax hatást ad a widgetnek: az elem az oldal görgetésével a többitől eltérő sebességgel mozog. Akkor hasznos, ha azt szeretnéd, hogy egy elem lassabban vagy gyorsabban „csússzon” el, mint a környező tartalom.
| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| Rellax | Be- és kikapcsolja a hatást a widgeten. | Nem |
| Sebesség | Az animáció sebessége. A beállítás eszközönként külön adható meg. | 0 |
| Százalék | Az oldalmagasságnak az a pontja, ahol az elem az eredeti helyére ér. A 0,5 azt jelenti, hogy az oldal közepén találkozik az eredeti pozíciójával. Eszközönként külön adható meg. | 0,5 |
| z-index | A CSS z-index tulajdonsága: nagyobb értéknél az elem a többi elem fölé kerül. |
0 |
Transzformációk
Szekció neve “Transzformációk”A Transforms szekció a widget megjelenését alakítja át: elforgatja, eltolja, nagyítja, és 3D-s perspektívát ad neki.
A Transzformációk kapcsoló bekapcsolása után ezek a beállítások jelennek meg. A legtöbb eszközönként (asztali gép, táblagép, mobil) külön adható meg.
| Beállítás | Mit csinál |
|---|---|
| Szög | A widget elforgatása a síkban. |
| Forgatás X, Forgatás Y | A widget elforgatása a vízszintes, illetve a függőleges tengely körül (3D-hatás). |
| Eltolás X, Eltolás Y, Eltolás Z | A widget eltolása a három irányban. A Z a nézőhöz közeledő vagy attól távolodó mozgás. |
| Méretezés | A widget nagyítása vagy kicsinyítése (az alapérték 1). |
| Transzformáció origója | Az a pont (X és Y érték), amely körül az átalakítás történik. |
| Perspektíva | A 3D-hatás perspektívája. |
| Perspektíva origója | A perspektíva nézőpontja (X és Y érték). |
A Transzformációk csoport jobb szélén lévő ikonnal visszaállíthatod az értékeket az alapra.
Eszköztipp
Szekció neve “Eszköztipp”A Tooltip szekció a widgetre eszköztippet tesz, amely rámutatáskor jelenik meg az elem mellett.
A Tartalom mezőbe írod az eszköztipp szövegét. A mező dinamikus címkét is elfogad, így az eszköztipp tartalma egy Elementor-sablon is lehet: ehhez használd a Sablon dinamikus címkét (lásd: Dinamikus címkék: sablon és PHP).
| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| Eszköztipp | Be- és kikapcsolja az eszköztippet a widgeten. | Nem |
| Tartalom | Az eszköztipp tartalma. | |
| Elhelyezés | Hol jelenjen meg az eszköztipp az elemhez képest: Felül, Jobb, Alul, Bal, vagy Automatikus. Mindegyiknek van a szélhez igazított változata is (például Fent, a kezdő pozícióban, Fent, a záró pozícióban, Jobb felső, Jobb alsó, Lent az elején, Lent a végén, Bal eleje, Bal vége, Automatikus kezdőpozíció, Automatikus végpozíció). | Felül |
| Nyíl | Megjeleníti vagy elrejti az eszköztipp nyilát. | Igen |
| Kurzor követése | Az eszköztipp követi az egérmutatót: Nem, Igen, Vízszintes, Függőleges vagy Kezdeti. | Nem |
| Maximális szélesség | Az eszköztipp legnagyobb szélessége képpontban. | 200 |
| Érintőeszközök | Érintőképernyőn Bekapcsolás, Kikapcsolás, vagy Megjelenítéshez a képernyőt nyomva kell tartani. | Bekapcsolás |
| Háttérszín | Az eszköztipp háttérszíne. | |
| Tipográfia | Az eszköztipp betűtípusa és szövegstílusa. | |
| Szöveg színe | Az eszköztipp szövegének színe. | |
| Keretsugár | Az eszköztipp sarkainak lekerekítése. | |
| Z-Index | Az eszköztipp rétegsorrendje: nagyobb értéknél más elemek fölé kerül. | 9999 |
Készült: