Text Block widget: szöveganimáció

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.

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.

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.