# Widget-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

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.

![Az Animations szekció beállításai](./kepek/animaciok-es-effektek-animaciok.webp)

*Az Animations szekció beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=60&action=elementor)

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

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.

![A Rellax szekció beállításai](./kepek/animaciok-es-effektek-rellax.webp)

*A Rellax szekció beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=60&action=elementor)

| 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

A **Transforms** szekció a widget megjelenését alakítja át: elforgatja, eltolja, nagyítja, és 3D-s perspektívát ad neki.

![A Transforms szekció beállításai](./kepek/animaciok-es-effektek-transzformaciok.webp)

*A Transforms szekció beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=60&action=elementor)

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

A **Tooltip** szekció a widgetre eszköztippet tesz, amely rámutatáskor jelenik meg az elem mellett.

![A Tooltip szekció beállításai](./kepek/animaciok-es-effektek-tooltip.webp)

*A Tooltip szekció beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=60&action=elementor)

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](https://hub.hellowp.io/hu/plugins/dynamic-content-for-elementor/dinamikus-cimkek-sablon-es-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 |