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">
agregar google fonts de halloween

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.

Nota
Para este tutorial usaremos como referencia el tema Boost (el cual es el predeterminado de Moodle) para agregar los efectos.

En la mayoría de los otros temas las ubicaciones para agregar código CSS son iguales o parecidas. Si no están en el mismo sitio, consulta la documentación del tema.

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;
}
codigo css para efecto Halloween en Moodle

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/[email protected]/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>
Código para halloween en editor de texto moodle

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/[email protected]/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>
casa embrujada

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/[email protected]/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>
fantasma halloween

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/[email protected]/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>
brujita voladorea

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/[email protected]/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>
día de muertos

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:

gif animado de Halloween Moodle

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

Califica este artículo

Puntuación promedio 0 / 5. Votos: 0

No hay votos hasta ahora. Sé el primero en calificar esta publicación.

Foto del autor
Fundador de VivaBlogger y cofundador de EVirtualplus. Soy un tecnomaniaco desde que estaba en pañales. Mi familia es el fundamento de mi vida. Sígueme en mis redes sociales.

2 comentarios en «Top 5 efectos animados de Halloween en Moodle»

Deja un comentario

El responsable de este sitio web es Marit Acuña. La finalidad de los datos es gestionar los comentarios en este blog. El destinatario (donde se almacenan los datos) es el hosting de este blog: Banahosting, ubicado en EEUU. La legitimidad es el consentimiento que otorgas en el formulario. Tienes derecho a acceder, rectificar, limitar y suprimir tus datos según la política de privacidad.