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>

Guarda los cambios.

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

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 😁