Egyszerű animáció hozzáadása WordPress weboldal tartalmaihoz

A weboldal sebességét szem előtt tartva szoktam javasolni, hogy ne legyenek animációk egy weboldalon. Ám ez néha „elkerülhetetlen”, ezért mutatok egy megoldást.

Egy kis mozgás itt, egy kis mozgás ott, és máris jobban tetszik sok embernek egy-egy weboldal. Szerintem nem ad hozzá semmi a weboldalhoz, de „ízlések és pofonok”.

AnimateGL Animations for WordPress – Elementor & Gutenberg Blocks Animations videós bemutató

A megoldást szolgáltató bővítmény (AnimateGL) használata nagyon egyszerű: Telepíteni kell, majd aktiválni. Utána máris megjelenik az alábbi videón látott plusz funkció a blokkszerkesztőben, amellyel szabályozható, hogy egy-egy elem milyen animációval töltődjön be.

A bővítmény működik blokkszerkeszővel, Elementorral, és más szerkesztőkkel is.

Az animációk iránya, hossza, fajtája mind-mind beállítható opció. Könnyen használható, pár kattintásos megoldás!

Csak ki kell választani az animáció fajtáját (amit előnézetben látunk is a szerkesztőfelületen), megadni pár opció, és menteni a tartalmat. És máris „megmozdul”, azaz animálttá vált a weboldal egy része!

Az „Ismétlés” opció különösen érdekes: ez eredményezi azt, hogy az animáció mindig lefut, ha az animált rész ismét a képernyőre kerül. Tehát egy legörgetés, majd felgörgetés után ismét megmozdul a kívánt elem.

CSS és WebGL animációk

A bővítményben CSS animációk, és WebGL animációk vannak. Az alábbiak:

• Áttűnés – Fade (CSS)
• Nagyítás – Zoom In (CSS)
• Kicsinyítés – Zoom Out (CSS)
• „Törlés” – Wipe (CSS)
• Csúszás – Slide (CSS)
• Áttűnés – Fade (WebGL)
• Csúszás – Slide (WebGL)
• Nyújtás – Stretch (WebGL)
• Hajlítás – Bend (WebGL)
• Megfordítás – Flip (WebGL)
• Nagyítás – Zoom (WebGL)
• Peel (WebGL)

Letöltés

Tesztelt verzió | Aktuálos verzió