Como agregar Luces Navideñas animadas en Moodle

El tiempo pasa volando, ya estamos nuevamente en diciembre, y nos trae lo más ansiado por muchos: la época navideña 🎅, donde todo es alegría y felicidad.

Y como ya se está haciendo tradición en este blog, no podía faltar un artículo dedicado a como decorar nuestro Moodle con motivos navideños. Les mostré como agregar un árbol de navidad animado, nieve cayendo y ahora le toca el turno a las luces. 😀

Sigue leyendo, ya que en este artículo te mostraré como añadir luces navideñas animadas en Moodle, para que la alegría llegue a los miembros de tu plataforma educativa.

Agregando código HTML para luces navideñas animadas en Moodle

Lo primero que debemos hacer es agregar el código HTML que nos permitirá posicionar las luces navideñas en Moodle y puedan ser mostradas.

En esta página puedes ver cómo queda el efecto de luces animadas, el cual está basado en el script creado por @tobyj de codepen.

Logueado como administrador, dirígete a: Administración del sitio > Apariencia > HTML adicional.

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

<ul class="lightrope">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

agregar código html para luces navideñas animadas en moodle

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

Dando formato a las luces animadas con código CSS

Ahora que tenemos posicionadas las luces animadas con HTML, le daremos forma y las animaremos con código CSS.

Con ello conseguiremos un efecto animado muy ligero, que no recargará nuestro Moodle, ya que evitaremos el uso de JavaScript.

Nota
Para esta guía, nos basaremos en el tema Boost, que viene por defecto en las últimas versiones de Moodle. Si en tu tema, agregar código CSS no está ubicado en el mismo sitio, sugiero leer la documentación o consultar a su creador.

Ahora vamos a: Administración del sitio > Apariencia > Temas > Boost, ubícate en la pestaña Ajustes avanzados. En el campo Raw initial SCSS, agrega esto:

$globe-width: 12px;
$globe-height: 28px;
$globe-spacing: 40px;
$globe-spread: 3px;
$light-off-opacity: 0.4;

.lightrope {
text-align: center;
white-space: nowrap;
overflow: hidden;
position: absolute;
z-index: 100000;
margin: -15px 0 0 0;
padding: 0;
pointer-events: none;
width: 100%;
li {
position: relative;
animation-fill-mode: both; 
animation-iteration-count:infinite;
list-style: none;
margin: 0;
padding: 0;
display: block;
width: $globe-width;
height: $globe-height;
border-radius: 50%;
margin: $globe-spacing/2;
display: inline-block;
background: rgba(0,247,165,1);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,247,165,1);
animation-name: flash-1;
animation-duration: 2s;
&:nth-child(2n+1) {
background: rgba(0,255,255,1);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,255,255,0.5);
animation-name: flash-2;
animation-duration: 0.4s;
}
&:nth-child(4n+2) {
background: rgba(247,0,148,1);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(247,0,148,1);
animation-name: flash-3;
animation-duration: 1.1s;
}
&:nth-child(odd) {
animation-duration: 1.8s;
}
&:nth-child(3n+1) {
animation-duration: 1.4s;
}
&:before {
content: "";
position: absolute;
background: #222;
width: ($globe-width - 2);
height: $globe-height/3;
border-radius: 3px;
top: (0 - ($globe-height/6));
left: 1px;
}
&:after {
content: "";
top: (0 - $globe-height/2);
left: $globe-width - 3;
position: absolute;
width: $globe-spacing + 12;
height: ($globe-height/3 * 2);
border-bottom: solid #222 2px;
border-radius: 50%;
}
&:last-child:after {
content: none;
}
&:first-child {
margin-left: -$globe-spacing;
}
}
}
@keyframes flash-1 { 
0%, 100% { background: rgba(247,148,29,1);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(247,148,29,1);} 
50% { background: rgba(247,148,29,$light-off-opacity);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(247,148,29,0.2);}
}
@keyframes flash-2 { 
0%, 100% { background: rgba(0,247,165,1);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,247,165,1);} 
50% { background: rgba(0,247,165,$light-off-opacity);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,247,165,0.2);}
}
@keyframes flash-3 { 
0%, 100% { background: rgba(247,0,148,1);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(247,0,148,1);} 
50% { background: rgba(247,0,148,$light-off-opacity);
box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(247,0,148,0.2);}
}

código css para luces de navidad

No olvides guardar los cambios.

Recarga la página en el navegador, para que puedas ver las luces animadas de navidad en tu Moodle 🥳. ¡Bastante sencillo!

Si no puedes verlas aún, limpia la caché de tu plataforma en: Administración del sitio > Desarrollo > Purgas cachés, con el botón Purgar todas las cachés.

A pesar de que las luces navideñas en Moodle parecen sobreponer los elementos de la cabecera, puedes hacer clic en ellos sin problemas 😉. Y lo mejor es que puedes verlas en dispositivos móviles, ya que es responsivo.

Espero te haya gustado esta guía, y puedas llenar de alegría navideña tu plataforma educativa con este agradable efecto.

No olvides dejar un comentario, aunque sea para felicitarnos por estas fechas. 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.

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.

Me interesa
Curso: Gamificando
como un Experto
Haz que tus alumnos aprendan
mientras juegan
Curso online 100% tutorizado
Únete y recibe las últimas novedades en tu email.
Suscríbete a Evirtualplus
Suscríbete
política de privacidad
Acepto la
Suscríbete a Evirtualplus
Acepto la política de privacidad
Suscríbete
Suscríbete