# Text Block widget: szöveganimáció

> Betűnként vagy szavanként érkező, szétszóródó, kevert, gépelt és színt cserélő szöveg a Text Block widgetben, globális animációval együtt.

A mozgó szöveg a címsorra, az ajánlatra vagy egy idézetre irányítja a tekintetet. Gyakran elég egy rövid animáció a megjelenéskor. A **Text Block** widget GSAP-pal animálja a saját szövegét: a betűk vagy szavak beúszhatnak, szétszóródhatnak, összekeveredhetnek, kigépelődhetnek vagy színt válthatnak. Az animáció indulhat az oldal betöltésekor, görgetéskor vagy rámutatáskor.

Az ingyenes bővítmény része, a Pro bővítménnyel is ugyanúgy működik. Kapcsold be a **Text Block** widgetet a **The Plus Addons → Widgets** oldalon. Globális animációhoz kell még a **Text Animation** kiterjesztés a **Plus Global** csoportban, a **The Plus Addons → Extensions** oldalon. A widget panelfeliratai angolul maradtak, ezért itt az angol feliratok szerepelnek.

## Alap animáció beállítása

1. Húzd a **Text Block** widgetet az oldalra, és írd a szöveget a **Content → Description** mezőbe.
2. Nyisd meg a **Content** fül **Text Animation** szakaszát, és kapcsold be az **Enable Animation** beállítást.
3. Az **Animation** mezőt hagyd **Basic** értéken, így a widgetben állítod be az animációt.
4. Az **Animation Type** mezőben válaszd ki a hatást.

![A Text Block Text Animation szakasza: bekapcsolt animáció, Basic, Normal típus, Split Type, Animation Trigger, Animation Controls, Animation Effects és Repeat](./kepek/szovegek-adatok-4-szovegblokk-anim-panel.webp)

*A Text Block Text Animation szakasza: bekapcsolt animáció, Basic, Normal típus, Split Type, Animation Trigger, Animation Controls, Animation Effects és Repeat* (https://minta-bolt.hu/wp-admin/post.php?post=48&action=elementor)

A képen az összes alap animációs beállítás látszik egy helyen.

![A Text Block szövege a nyilvános oldalon animáció közben](./kepek/szovegek-adatok-4-szovegblokk-anim.webp)

*A Text Block szövege a nyilvános oldalon animáció közben* (https://minta-bolt.hu/tp-szovegblokk-anim/)

A képen a szöveg az animáció közbeni állapotban látszik.

## Animációtípusok

| Animation Type | Mit látnak a látogatók |
| --- | --- |
| **Normal** (alapérték) | Minden karakter vagy szó egymás után tűnik elő. A **Transform Effects** beállítással közben mozog, nagyobbodik vagy forog is a helyére |
| **Explode / Scatter** | A karakterek vagy szavak véletlen helyekről repülnek be, és a semmiből nőnek meg |
| **Scramble Text** | Véletlen betűk, számok és jelek állnak össze a valódi szöveggé |
| **Typing Effect** | A szöveg az első betűtől kezdve kigépelődik. Minden bekezdés egyszerre gépelődik |
| **Text Style Swap** | A karakterek egymás után átváltanak a **Stílus → Text Swap Style** szakaszban megadott színre és tipográfiára, és úgy maradnak |

A **Text Swap Style** szakasz csak ennél a típusnál jelenik meg a **Stílus** fülön.

## Az animáció finomhangolása

1. **Normal** típusnál kattints a **Transform Effects** melletti ceruzaikonra, és add meg, honnan induljon a szöveg: **X Position**, **Y Position**, **Skew X**, **Skew Y**, **Scale**, **Rotation** és **Transform Origin**. Ha az **Y Position** 40 px, minden karakter 40 px-szel lejjebb indul, és felfelé mozog a helyére.
2. A **Split Type** mezőben válaszd a **Characters** (betűnként, ez az alapérték) vagy a **Words** (szavanként) értéket. A **Typing Effect** és a **Scramble Text** nem használja.
3. Az **Animation Trigger** mezőben válaszd ki, mikor induljon: **On Load** (betöltéskor, alapérték), **On Scroll** (görgetésre) vagy **On Hover** (rámutatásra).
4. **On Scroll** esetén az **Enable Scroll Scrub** a görgetés helyéhez köti az animációt ahelyett, hogy egyszer lejátszaná. A **Normal**, az **Explode / Scatter** és a **Text Style Swap** típusnál érhető el.
5. Az **Animation Controls** melletti ceruzaikonnal az időzítést állíthatod: **Duration** (időtartam, alapból 1,2 másodperc), **Delay** (késleltetés az indulás előtt, 0,3 másodperc) és **Stagger** (két karakter vagy szó közötti idő, 0,04 másodperc).
6. Az **Animation Effects** mezőben a sebességgörbét választhatod, a **Power 1 Out** (alapérték) és az **Elastic Out** vagy **Bounce Out** között. A **Typing Effect** nem használja.
7. A **Repeat** bekapcsolva ismétli az animációt. A **Normal** animáció újra és újra be- és kifakítja a szöveget, a **Typing Effect** elölről gépeli.

## Globális animáció használata

A globális animációt egyszer állítod be a webhely beállításai között, és utána bármelyik **Text Block** widgetben kiválaszthatod.

1. Kapcsold be a **Text Animation** kiterjesztést a **Plus Global** csoportban, a **The Plus Addons → Extensions** oldalon. Addig, amíg ezt nem teszed, a widgetben a **Global** választása csak egy figyelmeztetést ír ki, hogy a globális szöveganimáció le van tiltva.
2. Az Elementor szerkesztőben nyisd meg a **Site Settings → Global Text Animations** részt, kattints az **Add Global Animation** gombra, add meg az **Animation Name** nevet, állítsd be az animációt, és kattints a **Save Changes** gombra.
3. A **Text Block** widgetben állítsd az **Animation** mezőt **Global** értékre, és válaszd ki az animációt a **Global Animation** mezőben. A webhelybeállításokban mentett értékek a widget saját beállításai helyett érvényesek.

## Hogyan viselkedik

- Az animációs szkriptek csak azokon az oldalakon töltődnek be, ahol az **Enable Animation** be van kapcsolva.
- A felbontott animáció a szöveg hosszával lassul. **Characters** típusnál és az alapértelmezett **Stagger** mellett egy 227 karakteres szöveg kb. 10 másodperc alatt ért véget.
- **On Scroll**: a szöveg rejtve marad, amíg a widget teteje el nem éri a képernyőmagasság kb. 70%-át, majd egyszer lejátszódik.
- **Enable Scroll Scrub**: az animáció követi a görgetés helyét, és visszafelé fut, ha a látogató visszagörget.
- **On Hover**: a szöveg normálisan látszik. Ha a mutató fölé kerül, az animáció az elejétől lejátszódik, ha elhagyja, azonnal a teljes szöveg látszik. Minden újabb rámutatás újra lejátssza.
- A **Normal** típus megtartja a félkövér szöveget és a linkeket.
- Ha a **Global** van kiválasztva, de nincs globális animáció kijelölve, vagy a kijelölt törölve lett, a szöveg animáció nélkül jelenik meg.
- Több animált **Text Block** widget egy oldalon egymástól függetlenül fut.

## Korlátok

- A **Typing Effect** és a **Scramble Text** eltávolítja a félkövér, dőlt szöveget és a linkeket: az animáció után a szöveg sima.
- **Characters** típusnál a szavak két sorba törhetnek, az animáció vége után is. A **Words** egyben tartja a szavakat.
- Az **On Scroll** szöveg sosem jelenik meg, ha a widget olyan alacsonyan van az oldalon, hogy nem görgethető a képernyő 70%-áig.
- Az **On Scroll** indítású **Typing Effect** üresen hagyja a blokkot, amíg a látogató el nem éri, ezért a lejjebb lévő tartalom elmozdul, amikor a szöveg kigépelődik.
- Ha az **Animation** **Global**, de a **Text Animation** kiterjesztés ki van kapcsolva, az oldal az alapértelmezett **Normal** karakterenkénti beúszást játssza.
- A **Global Animation** mező alatti megjegyzés egy **Global Scroll Interactions** szakaszt említ, az animációk valójában a **Site Settings → Global Text Animations** alatt vannak.

## Hibaelhárítás

- A **Global Animation** lenyíló hiányzik: kapcsold be a **Text Animation** kiterjesztést a **The Plus Addons → Extensions** oldalon, és töltsd újra a szerkesztőt.
- A szöveg sosem jelenik meg: **On Scroll** esetén a widget túl közel lehet az oldal aljához. Használd az **On Load** értéket, vagy tedd feljebb a widgetet.
- A link és a félkövér szöveg eltűnt: a **Typing Effect** és a **Scramble Text** sima szöveget mutat. Linkes szöveghez a **Normal** típust használd.
- A szavak közepén tör a sor: állítsd a **Split Type** értékét **Words**-re.
- Az animáció túl sokáig tart: csökkentsd a **Stagger** értékét az **Animation Controls** alatt, vagy állítsd a **Split Type** értékét **Words**-re.