Hem incorporat a Portaledu el plugin Blocks Animation, que ens permet dotar d’efectes animats a pràcticament qualsevol bloc de Gutenberg. En este post us ensenyarem com utilitzar esta funcionalitat.
1-Animació de textos. Efecte d’escriptura o tecleig.
En els elements de text, com a paràgraf, titular, encapçalat, etc., veurem una nova opció en el menú contextual d’opcions del bloc. En primer lloc, seleccionem la part del text que volem animar; pot ser tota la frase o paràgraf o bé només una o diverses paraules.
En segon lloc, despleguem el menú de la barra de ferramentes del bloc, la fletxeta, on seleccionarem l’opció d’Animació d’escriptura. En fer-ho, podrem seleccionar un temps de retard d’inici i una velocitat per a l’animació.
Guardem l’entrada i la previsualitzem per a veure com ha quedat. Veurem un efecte de tecleig, anirà apareixent el text al qual hem aplicat l’animació.
2.-Animació d’imatges o altres blocs
En la majoria de blocs de gutenberg, com per exemple, en qualsevol bloc d’imatge, en la columna d’ajustos de la dreta, apareix una secció d’Animacions :
En el menú desplegable d’opcions d’animació, en trobarem una gran varietat. Una vegada hàgem seleccionat alguna, ens apareixeran nous ajustos, a saber, el retard d’inici i la velocitat de l’animació.
Reproduir en passar el cursor: S’oferix un ajust perquè l’animació s’execute (una vegada) en passar el ratolí sobre l’element. Hem de tindre en compte que si activem esta opció, l’animació s’executarà només quan li passem el punter del ratolí per damunt.
A més, el botó de Reproduir l’animació ens permet comprovar l’animació configurada per a eixe bloc. Podem comprovar l’efecte en esta imatge:
3.-Animació d’un bloc contenidor (animacions encastades)
Com sabeu, el bloc contenidor s’utilitza per a agrupar blocs i ajustar de manera conjunta uns certs aspectes de la seua aparença (color de fons o imatge de fons, màrgens, espaiat, contorn…). En este cas, podem introduir en un bloc contenidor diferents blocs com a botons, text, imatges i configurar animacions tant per al contenidor, com per als subblocs. Vegem-ho amb un exemple:
Llistat de material escolar
Consulta
Si vols saber com s’ha fet este bloc contenidor, tret de les animacions, Bloc contenidor: exemple 1 – Portaledu
4.-Configuració del sistema operatiu per a habilitar/deshabilitar animacions
Per motius d’accessibilitat, les animacions web es poden deshabilitar per tal de facilitar la lectura de les pàgines web. Esta configuració es troba habitualment en el sistema operatiu. Els navegadors respeten habitualment les configuracions d’accessibilitat del sistema operatiu, com ara la de “Reduir moviment“.
En el cas de Windows, trobarem esta opció en Configuració –> Accessibilitat –> Efectes visuals –> Efectes d’animació
