Cómo agregar Nieve cayendo en Moodle

Me encanta la época navideña, todo es fiestas y alegría 🎉, con ella llegan las decoraciones que tanto nos encanta 🎄

Nuestro Moodle también puede entrar en modo navideño, agregando imágenes alegóricas a esas fechas, pero podemos ir más allá: poner un efecto de nieve cayendo en Moodle.

En esta pequeña guía te mostraré cómo agregar nieve que cae en Moodle, usando javascript, de manera sencilla, rápida y sin comprometer la usabilidad de tu sitio web.

Te enseñaré dos tipos de efectos, te toca a ti decidir cuál te gusta más.

Copos de nieve cayendo en Moodle

Con este primer efecto obtendremos nieve en forma de copos redondeados, luce hermosa y minimalista 😊. Los muestra de diferentes tamaños mientras van cayendo sobre el escritorio de nuestro Moodle. Puedes ver una demo desde aquí.

Para añadir este efecto dirígete como administrador en Moodle a: Administración del sitio > Apariencia > HTML adicional

En el campo que pone: Cuando BODY está abierto, agrega este código:

<script type="text/javascript">

// Cantidad de copos de nieve
var snowMax = 50;

// Color de los copos
var snowColor = ["#DDD", "#EEE"];

// Forma de la nieve
var snowEntity = "&#x2022;";

// Velocidad mientras cae
var snowSpeed = 0.75;

// Tamaño minimo de los copos
var snowMinSize = 8;

// Tamaño maximo de los copos
var snowMaxSize = 30;

// Velocidad de refrescamiento (en milliseconds)
var snowRefresh = 50;

// Estilo adicional
var snowStyles = "cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;";

/*
// Fin de la configuración
// ----------------------------------------
// No modifiques a partir de esta linea
*/

var snow = [],
	pos = [],
	coords = [],
	lefr = [],
	marginBottom,
	marginRight;

function randomise(range) {
	rand = Math.floor(range * Math.random());
	return rand;
}

function initSnow() {
	var snowSize = snowMaxSize - snowMinSize;
	marginBottom = document.body.scrollHeight - 5;
	marginRight = document.body.clientWidth - 15;

	for (i = 0; i <= snowMax; i++) {
		coords[i] = 0;
		lefr[i] = Math.random() * 15;
		pos[i] = 0.03 + Math.random() / 10;
		snow[i] = document.getElementById("flake" + i);
		snow[i].style.fontFamily = "inherit";
		snow[i].size = randomise(snowSize) + snowMinSize;
		snow[i].style.fontSize = snow[i].size + "px";
		snow[i].style.color = snowColor[randomise(snowColor.length)];
		snow[i].style.zIndex = 1000;
		snow[i].sink = snowSpeed * snow[i].size / 5;
		snow[i].posX = randomise(marginRight - snow[i].size);
		snow[i].posY = randomise(2 * marginBottom - marginBottom - 2 * snow[i].size);
		snow[i].style.left = snow[i].posX + "px";
		snow[i].style.top = snow[i].posY + "px";
	}

	moveSnow();
}

function resize() {
	marginBottom = document.body.scrollHeight - 5;
	marginRight = document.body.clientWidth - 15;
}

function moveSnow() {
	for (i = 0; i <= snowMax; i++) {
		coords[i] += pos[i];
		snow[i].posY += snow[i].sink;
		snow[i].style.left = snow[i].posX + lefr[i] * Math.sin(coords[i]) + "px";
		snow[i].style.top = snow[i].posY + "px";

		if (snow[i].posY >= marginBottom - 2 * snow[i].size || parseInt(snow[i].style.left) > (marginRight - 3 * lefr[i])) {
			snow[i].posX = randomise(marginRight - snow[i].size);
			snow[i].posY = 0;
		}
	}

	setTimeout("moveSnow()", snowRefresh);
}

for (i = 0; i <= snowMax; i++) {
	document.write("<span id='flake" + i + "' style='" + snowStyles + "position:absolute;top:-" + snowMaxSize + "'>" + snowEntity + "</span>");
}

window.addEventListener('resize', resize);
window.addEventListener('load', initSnow);

</script>

donde agregar código html en moodle

Guarda los cambios.

¡Listo!, ya tienes el efecto de copos de nieve en Moodle. Más sencillo imposible 😉

Dato
Puedes personalizar el código cambiando los parámetros de la variable var  hasta la línea 25.

Por ejemplo, si quieres que los copos de nieve sean más grandes, modifica el 30 del parámetro var snowMaxSize  por un valor mayor (mientras más alto el número, mayor tamaño tendrá). Para duplicar su tamaño quedaría así: var snowMaxSize = 60; 

Nieve cayendo en forma de escarcha

El segundo efecto que te mostraré, es de copos de nieve cayendo con forma de escarcha. Quedan igual de bien, lo que cambia es la forma, que en este caso son cristales de escarcha; muy emblemático de la navidad. Desde aquí puedes ver una demostración.

Al igual que hicimos anteriormente, solo debes copiar el código siguiente en el campo: Cuando BODY está abierto. Con esto ya tendremos el efecto.

<script type="text/javascript">

// Establece el numero de escarcha
var snowmax=35

// Color de la nieve
var snowcolor=new Array("#aaaacc","#ddddff","#ccccdd","#f3f3f3","#f0ffff")

// Fuentes con que se crea la nieve
var snowtype=new Array("Times","Arial","Times","Verdana")

// Letra para crear la escarcha (recomendada: * )
var snowletter="*"

// Velocidad con que cae
var sinkspeed=0.6

// Tamaño maximo de la nieve
var snowmaxsize=30

// Tamaño minino de la nieve
var snowminsize=8

// Establecer la zona donde cae la nieve (1 todo, 2 izquierda, 3 centro, 4 derecha)
var snowingzone=1

///////////////////////////////////////////////////////////////////////////
// FIN DE CONFIGURACION
///////////////////////////////////////////////////////////////////////////


// No edite bajo esta linea
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera

function randommaker(range) {
        rand=Math.floor(range*Math.random())
    return rand
}

function initsnow() {
        if (ie5 || opera) {
                marginbottom = document.body.scrollHeight
                marginright = document.body.clientWidth-15
        }
        else if (ns6) {
                marginbottom = document.body.scrollHeight
                marginright = window.innerWidth-15
        }
        var snowsizerange=snowmaxsize-snowminsize
        for (i=0;i<=snowmax;i++) {
                crds[i] = 0;
            lftrght[i] = Math.random()*15;
            x_mv[i] = 0.03 + Math.random()/10;
                snow[i]=document.getElementById("s"+i)
                snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
                snow[i].size=randommaker(snowsizerange)+snowminsize
                snow[i].style.fontSize=snow[i].size+'px';
                snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
                snow[i].style.zIndex=1000
                snow[i].sink=sinkspeed*snow[i].size/5
                if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
                if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
                if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
                if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
                snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
                snow[i].style.left=snow[i].posx+'px';
                snow[i].style.top=snow[i].posy+'px';
        }
        movesnow()
}

function movesnow() {
        for (i=0;i<=snowmax;i++) {
                crds[i] += x_mv[i];
                snow[i].posy+=snow[i].sink
                snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px';
                snow[i].style.top=snow[i].posy+'px';

                if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
                        if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
                        if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
                        if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
                        if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
                        snow[i].posy=0
                }
        }
        var timer=setTimeout("movesnow()",50)
}

for (i=0;i<=snowmax;i++) {
        document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
        window.onload=initsnow
}

</script>

Puedes cambiar los parámetros de la escarcha hasta la línea 25, modificando las variables de var, siguiendo la descripción mostrada encima de cada uno.

Con esto hemos terminado. Un tutorial pequeño, pero muy útil para darle a tu Moodle ese ambiente navideño propio de la época decembrina.

No olvides compartir en los comentarios tu opinión, o si tienes tu propio efecto será bien recibido 😁

La base para este tutorial son los script de estos autores: Copos de nieveEscarcha de nieve

Califica este artículo

Puntuación promedio 5 / 5. Votos: 2

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

15 comentarios en «Cómo agregar Nieve cayendo en Moodle»

  1. Hola de nuevo, use un comentario que bloqueaba todo, desde la salida hasta el menú de los cursos, los hice fue ponerle // Tamaño maximo de los copos
    var snowMaxSize = 80; y funciono..gracias bro..

    Responder
  2. Hola, vi tu sitio y procedí lo que decías ahí, sobre los copos de nieve, lo probé y funciona, pero lo malo, me lo bloquea todo el sitio, es decir el botón de salida, el menú, todo..me toco quitarlo, la luces funcionan muy bien….gracias

    Responder
  3. Tengo un problema!!!
    He añadido el código y el efecto nieve aparece ok.
    Pero ahora no me permite acceder a ninguna opción/pestaña dentro de Administración del sitio.
    Puedes ayudarme?? gracias

    Responder
    • Hola Ana.
      Lamento que hayas tenido ese problema.
      Para quitar el código javascript de la nieve, como administrador, sustituye en la URL a continuación, tudominio.com por el dominio de tu Moodle:

      https://tudominio.com/admin/settings.php?section=additionalhtml

      Y podrás acceder a Administración del sitio > Apariencia > HTML adicional, de manera directa.

      Espero sea de ayuda.
      Saludos.

      Responder
  4. Hola! pegué en código y me encantó.
    Pero tengo una pregunta cómo puedo hacer si quiero que los copos desaparezcan un poco más arriba de la mitad de la página?? qué debo ajustar en el código?? Te pregunto esto porque un participante indicó que esos copos le molestan cuando está visualizando el curso, entonces me gustaría que no interfirieran tanto con la interfaz del curso.
    Quedo atenta tu respuesta. Saludos

    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.