Top 5 efectos animados de Halloween en Moodle

Al igual que celebramos muchas festividades como navidad, carnavales, año nuevo o las fiestas patrias, existe una que en los últimos años ha irrumpido en nuestras vidas, como es, «el Halloween».

Todo el misterio que rodea y los atuendos propios de esa fecha, nos hace querer convertirnos en un Frankenstein, Drácula o Zombie 🧛, aunque sea solo por ese día.

Como sé que a muchos les gustaría llevar las decoraciones propias de esa temporada a su plataforma educativa para incentivar la enseñanza, en este post te traigo 5 efectos animados de Halloween en Moodle para que celebres ese día especial.

Agregando fuentes Google Fonts de Halloween en Moodle

Este artículo, usa como base un post anterior donde explico como agregar animaciones Lottie en Moodle.

Hacerlo con animaciones Lottie facilita en gran medida agregar estos efectos, que en el pasado era necesario hacer con HTML, CSS y JavaScript, haciéndolos muy complicados y no siempre compatibles en Moodle.

Pero antes, agregaremos la fuente Google Fonts, la cual nos permitirá poner un título encima de la animación con un estilo misterio de Halloween.

Para ello, logueate en Moodle como administrador y vamos a: Administración del sitio > Apariencia > HTML adicional.

En el espacio en blanco que pone: Dentro del HEAD, agrega este código:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Griffy&display=swap" rel="stylesheet">

Guarda los cambios con el botón ubicado al final.

Dando estilo al título de Halloween

Ahora agregaremos el código CSS que nos permitirá darle estilo al título.

Ve a: Administración del sitio > Apariencia > Temas > Boost. Selecciona la pestaña Ajustes avanzados y copia este código en el espacio en blanco de Raw initial SCSS:

.halloween-moodle {
font-family: 'Griffy', cursive;
font-size: 34px;
font-weight: 600;
display: table;
margin: 0 auto;
}

No olvides guardar los cambios.

Añadiendo los efectos animados de Halloween en Moodle

Para este tutorial, las animaciones de Halloween en Moodle, las agregaremos en la página principal con la finalidad de que pueda ser vista por todos al entrar.

Necesitaremos crear un bloque HTML en la página principal, en el cual agregaremos el código que nos permitirá mostrar las animaciones Lottie de Halloween en Moodle.

Para agregar este bloque sigue los pasos que te doy en la sección de esta 👉 guía. Lo único que no debes agregar es el código SVG que muestro en ella, ya que lo sustituiremos por los códigos de los efectos animados que te enseño a continuación.

Calabaza terrorífica

Uno de los elementos centrales de la festividad de Halloween son las calabazas con expresiones de terror 🎃, por lo que nuestra primera animación será una de las que más les encantará a los usuarios de tu Moodle.

Usando los pasos que te mostré en la guía que te dejé antes, copia este código en el espacio en blanco (en la vista HTML del bloque de texto):

<span class="halloween-moodle">Feliz Halloween</span>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets1.lottiefiles.com/private_files/lf30_q2okh8lh.json" background="transparent" speed="1" style="margin: 0 auto; width: auto; height: auto;" loop="" autoplay=""></lottie-player>

Guarda los cambios y desactiva la Edición de bloques, para que mires el efecto en su esplendor. 🙌

Casa embrujada

Otro elemento terrorífico son las casas o castillos embrujados 🏚, lo cual lleva a muchas personas a adornar sus espacios con este motivo.

Agrega este código, como te mostré antes, si quieres la casa embrujada:

<span class="halloween-moodle">Feliz Halloween</span>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets4.lottiefiles.com/packages/lf20_xvpl2ws5.json"  background="transparent"  speed="1"  style="width: auto; height: auto;"  loop  autoplay></lottie-player>

Fantasmita recoge dulces

Y como a los niños les encanta recoger dulces durante ese día, no podía faltar un fantasmita amistoso 👻 que seguro les encantará a tus usuarios.

<span class="halloween-moodle">Feliz Halloween</span>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets4.lottiefiles.com/packages/lf20_hIJVaT.json"  background="transparent"  speed="1"  style="width: auto; height: auto;"  loop  autoplay></lottie-player>

Bruja voladora

¿Quién no le gusta la imagen de la brujita voladora 🧙‍♀️🧹 con su risa burlona que adorna muchos de los portales de las casas en ese día?

Como sé que les gustan a muchos, te dejo este efecto:

<span class="halloween-moodle">Feliz Halloween</span>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets1.lottiefiles.com/private_files/lf30_cq296vp3.json"  background="transparent"  speed="1"  style="width: auto; height: auto;"  loop  autoplay></lottie-player>

Día de muertos

En esta misma temporada, también se celebra el Día de muertos 💀. Una conmemoración muy importante en la mayoría de países hispanohablantes, especialmente en México, y debido a que una de sus representaciones son las calaveras y las flores, te dejo un efecto animado sobre ello; por si también celebras esta fecha.

<span class="halloween-moodle">Día de Muertos</span>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets1.lottiefiles.com/datafiles/ZmmdT15RQbnF7OE/data.json"  background="transparent"  speed="1"  style="width: auto; height: auto"  loop  autoplay></lottie-player>

Si no ves los efectos, limpia la cache de Moodle.

El resultado final lo verás en la pagina principal en la sección de bloques a la derecha. Te dejo un ejemplo de como se vería:

Espero te haya gustado este artículo, no olvides dejar un comentario, me ayudan mucho a hacer crecer este blog. Saludos.