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 5 / 5. Votos: 3

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.

También te puede interesar

4 comentarios en «Como agregar Luces Navideñas animadas en Moodle»

  1. Buenas tardes Diógenes, de antemano muchas gracias por tus aportes, me han servido mucho. En estos momentos tengo la instancia de Moodle que ayudo a mejorar con la nieve que publicaste y el árbol de navidad (ese no me funcionó). Pero lo que si no he podido hacer funcionar son las luces. Yo he seguido todo al pie de la letra, es más, revisé el código fuente desde https://codepen.io/tobyj/pen/QjvEex, pero no me funciona. Tengo el moodle 3.9 y el theme Adaptable versión 3.9.1.3.
    Tengo una versión de prueba publicada en la Internet. ¿Podrías ayudarme revisando para saber qué le falta?

    Responder
  2. Buenas tardes Diógenes, de antemano muchas gracias por tus aportes, me han servido mucho. En esta ocasión quiero preguntarte sobre otra opción decorativa para Moodle, pero para el mes de Halloween. ¿Hay algo por ahí que impacte a los usuarios y sea tan bueno como los diferentes aportes que has hecho para navidad, pero para la temática de Halloween?
    Quedo atento, muchas gracias.

    Responder

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.