Hemos incorporado a Portaledu el plugin Blocks Animation, que nos permite dotar de efectos animados a prácticamente cualquier bloque de Gutenberg. En este post os enseñaremos cómo utilizar esta funcionalidad.
1-Animación de textos. Efecto de escritura o tecleo.
En los elementos de texto, como párrafo, titular, encabezado, etc., veremos una nueva opción en el menú contextual de opciones del bloque. En primer lugar, seleccionamos la parte del texto que queremos animar; puede ser toda la frase o párrafo o bien solo una o varias palabras.
En segundo lugar, desplegamos el menú de la barra de herramientas del bloque, la flechita, donde seleccionaremos la opción de Animación de escritura. Al hacerlo, podremos seleccionar un tiempo de retardo de inicio y una velocidad para la animación.
Guardamos la entrada y la previsualizamos para ver cómo ha quedado. Veremos un efecto de tecleo, irá apareciendo el texto al que hemos aplicado la animación.
2.-Animación de imágenes u otros bloques
En la mayoría de bloques de gutenberg, como por ejemplo, en cualquier bloque de imagen, en la columna de ajustes de la derecha, aparece una sección de Animaciones:
En el menú desplegable de opciones de animación, encontraremos una gran variedad. Una vez hayamos seleccionado alguna, nos aparecerán nuevos ajustes, a saber, el retardo de inicio y la velocidad de la animación.
Reproducir al pasar el cursor: Se ofrece un ajuste para que la animación se ejecute (una vez) al pasar el ratón sobre el elemento. Hemos de tener en cuenta que si activamos esta opción, la animación se ejecutará solamente cuando pasemos el puntero del ratón por encima.
Además, el botón de Reproducir la animación nos permite comprobar la animación configurada para ese bloque. Podemos comprobar el efecto en esta imagen:
3.-Animación de un bloque contenedor (animaciones anidadas)
Como sabéis, el bloque contenedor se utiliza para agrupar bloques y ajustar de forma conjunta ciertos aspectos de su apariencia (color de fondo o imagen de fondo, márgenes, espaciado, contorno…). En este caso, podemos introducir en un bloque contenedor diferentes bloques como botones, texto, imágenes y configurar animaciones tanto para el contenedor, como para los subbloques. Veámoslo con un ejemplo:
Listado de material escolar
Consulta
Si quieres saber cómo se ha hecho este bloque contenedor, excepto las animaciones, Bloque contenedor: ejemplo 1 – Portaledu
4.-Configuración del sistema operativo para habilitar/deshabilitar animaciones
Por motivos de accesibilidad, las animaciones web se pueden deshabilitar para facilitar la lectura de las páginas web. Esta configuración se encuentra habitualmente en el sistema operativo. Los navegadores respetan habitualmente las configuraciones de accesibilidad del sistema operativo, como por ejemplo la de «Reducir movimiento».
En el caso de Windows, encontraremos esta opción en Configuración –> Accesibilidad –> Efectos visuales –> Efectos de animación
