Efecto nieve html para esta navidad en tu blog, ya hace frio y vamos a decorar nuestros blogs con el efecto de nieve!

Muchos blogs se preparan con decoración pero el clásico es el efecto nieve para blogs, con él  decorarás tu blog sin recargar, además en este post podrás encontrar varias maneras de hacer que caiga una nevada para diferentes tipos de blog: Blogger, WordPress, Tumblr, Html… así que manos a la obra.

A mi me encanta ver nevar y creo que es de lo mas bonito y relajante, siempre pienso en escribir algo sobre navidad pero no me sale, así que he optado por el efecto de la nieve cayendo, he preparado varias maneras que funcionan, algunas son muy engorrosas pero a mí la de Tumblr me encanta! porque una vez pasadas las fiestas lo puedo cambiar por palabras o letras y puedes elegir la intensidad de la nieve desde cuatro copos cuándo empieza a caer hasta preparar un autentico alud.

Unos consejos previos antes de que empieces a colocar la nieve en tu web:

Cuándo trabajes con código intenta copiar el anterior en el blog de notas por si algo falla (por cierto piensa en elegir un editor de texto), guardarlo en el caso de que luego a eso de febrero o agosto ya no queráis la nieve y lo volvéis a pegar en su sitio 🙂

Importante que respetes la ubicación aunque cada plantilla es un mundo y no siempre son las mismas. Así que fijaros bien para colocar el efecto nieve html para esta navidad en tu blog de la manera correcta en la plantilla y evitar sustos.

efecto nieve blog

Efecto nieve para una web normal.

Aunque el  efecto nieve html de Tumblr funciona en una web normal y se puede aplicar, me refiero a web normal porque en las de wix por ejemplo no se puede.

<script>
var no = 130; // numero de copos
var speed = 35; //  cuánto menor el número mas tápido
var snowflake = “dibujo.gif“;  El nombre de el archivo que has creado y subido previamente al servidor, quizás tengas que indicar la ruta

var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 400, doc_height = 500;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = 500; tamaño de el espacio en el que nieva
doc_height = 500;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write(“<layer name=”dot”+ i +”” left=”15″ “);
document.write(“top=”15″ visibility=”show”><img src=””);
document.write(snowflake + “” border=”0″></layer>”);
} else {
document.write(“<layer name=”dot”+ i +”” left=”15″ “);
document.write(“top=”15″ visibility=”show”><img src=””);
document.write(snowflake + “” border=”0″></layer>”);
}
} else if (ie4up) {
if (i == 0) {
document.write(“<div id=”dot”+ i +”” style=”POSITION: “);
document.write(“absolute; Z-INDEX: “+ i +”; VISIBILITY: “);
document.write(“visible; TOP: 15px; LEFT: 15px;”><img src=””);
document.write(snowflake + “” border=”0″></div>”);
} else {
document.write(“<div id=”dot”+ i +”” style=”POSITION: “);
document.write(“absolute; Z-INDEX: “+ i +”; VISIBILITY: “);
document.write(“visible; TOP: 15px; LEFT: 15px;”><img src=””);
document.write(snowflake + “” border=”0″></div>”);
}
}
}
function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers[“dot”+i].top = yp[i];
document.layers[“dot”+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout(“snowNS()”, speed);
}

function snowIE() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx[i] += stx[i];
document.all[“dot”+i].style.pixelTop = yp[i];
document.all[“dot”+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout(“snowIE()”, speed);
}

if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}
</script>

Efecto de nieve para BLOGGER

Añadir este código alguno de los espacios para widgets, fácil y rápido. Recomendado, este script te ahorra tiempo y creo que es una manera muy segura de hacer que nieve en blogger.

<script src=”http://yourjavascript.com/25223141921/snowstorm-min.js”></script><a href=”http://goo.gl/Eerlg” target=”_blank”>Nieve en tu Blog</a>

 

Tengo ahora este script mas complicado, debes hacer el copy&paste así que copias y pegas antes de  </body> se pueden customizar algunos valores para modificar la cadencia de la nieve, pero va lento y no es apto para todas las plantillas.

 

<script type=”text/javascript”>
// <![CDATA[
var colour=”#f0f”;
var sparkles=50;

/****************************
* Tinkerbell Magic Sparkle *
* http://www.mf2fm.com/rv *
* NO EDITAR TEXTO MAS ABAJO *
****************************/
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();

window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility=”hidden”;
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor=”transparent”;
rats.style.visibility=”hidden”;
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top=”2px”;
rlef.style.left=”0px”;
rdow.style.top=”0px”;
rdow.style.left=”2px”;
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}

function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+”px”;
star[c].style.top=(stary[c]=y)+”px”;
star[c].style.clip=”rect(0px, 5px, 5px, 0px)”;
star[c].style.visibility=”visible”;
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout(“sparkle()”, 40);
}

function update_star(i) {
if (–starv[i]==25) star[i].style.clip=”rect(1px, 4px, 4px, 1px)”;
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+”px”;
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+”px”;
}
else {
star[i].style.visibility=”hidden”;
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+”px”;
tiny[i].style.left=(tinyx[i]=starx[i])+”px”;
tiny[i].style.width=”2px”;
tiny[i].style.height=”2px”;
star[i].style.visibility=”hidden”;
tiny[i].style.visibility=”visible”
}
}

function update_tiny(i) {
if (–tinyv[i]==25) {
tiny[i].style.width=”1px”;
tiny[i].style.height=”1px”;
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+”px”;
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+”px”;
}
else {
tiny[i].style.visibility=”hidden”;
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility=”hidden”;
}

document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}

function set_scroll() {
if (typeof(self.pageYOffset)==”number”) {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}

window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)==”number”) {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}

function createDiv(height, width) {
var div=document.createElement(“div”);
div.style.position=”absolute”;
div.style.height=height+”px”;
div.style.width=width+”px”;
div.style.overflow=”hidden”;
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

Efecto de nieve para WORDPRESS

Lo mejor en wordpress es usar un pluging y quitarte de problemas! estos dos plugin de nieve para wordpress están muy bien-.

Tribulant Snow Storm

Pemite que la nieve siga al ratón, cantidad color…. pero no podéis cambiarlo por otros símbolos lo que hace que sea muy divertido.

 

Snow Flurry

Muy sencillo y se puede customizar

Efecto de nieve para TUMBLR,

Desde el editor de HTML en personalizar hay que colocarse justo delante de la etiqueta </head> normalmente está al principio del código y lo pegáis, hay varias variables como el tamaño que se puede modificar cuidado a mas de 40 dá errores, la velocidad y en el caso de que seáis mas de asteriscos, €, $ o una palabra sólo tenéis que estar atentos a esta línea de código que os permite cambiar el color también fijaros en esta líneas.

 

var snowcolor = new Array(“#ffffff”, “#ffffff”, “#ffffff”); El color de los copos
var snowtype = new Array(“Arial Black”, “Arial Narrow”, “Times”, “Arial”, “Berlin”); podeis cambiar la fuente para algo debe servir esas cosas llamadas “Wingdings”
var snowletter = “•”;  Aquí es dónde está el punto que podéis cambiar por otro signo
var sinkspeed = 0.9;  Velocidad de caida
var snowmaxsize = 30; Máximo de copito de nieve hasta 40 podéis cambiar
var snowminsize = 10; Mínimo 

mirad como que da de bien aquí:

http://negocioscaninos.tumblr.com

Este es el código sin modificaciones.

 

<script type=”text/javascript”>
var snowmax = 100;
var snowcolor = new Array(“#ffffff”, “#ffffff”, “#ffffff”);
var snowtype = new Array(“Arial Black”, “Arial Narrow”, “Times”, “Arial”, “Berlin”);
var snowletter = “•”;
var sinkspeed = 0.9;
var snowmaxsize = 30;
var snowminsize = 10;
var snowingzone = 1;
var snow = new Array();
var marginbottom;
var marginright;
var ScrollTop;
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(a)
{
rand = Math.floor(a * Math.random());
return rand
}
function iecompattest()
{
return (document.compatMode && document.compatMode != “BackCompat”) ? document.documentElement : document.body
}
function InitHeight() {
if (ie5 || opera) {
marginbottom = iecompattest().clientHeight + 5; //clientHeight;
marginright = iecompattest().scrollWidth + 5; //clientWidth
}
else {
if (ns6) {
marginbottom = self.innerHeight;
marginright = self.innerWidth
}
}
ScrollTop = document.body.scrollTop;
if (ScrollTop == 0) {
if (window.pageYOffset)
ScrollTop = window.pageYOffset;
else
ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
}
marginbottom += ScrollTop;
}
function initsnow()
{
InitHeight()
var a = 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(a) + snowminsize;
snow[i].style.fontSize = snow[i].size + “px”;
snow[i].style.color = snowcolor[randommaker(snowcolor.length)];
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()
{
InitHeight();
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 = ScrollTop
}
}
var a = setTimeout(“movesnow()”, 60)
}
function hidesnow()
{
if (window.timer) { clearTimeout(timer) }
for (i = 0;i <= snowmax;i++)
{
document.getElementById(“s” + i).style.visibility = “hidden”
}
}
for (i = 0;i <= snowmax;i++)
{
document.write(‘<div id=”s’ + i + ‘” style=”POSITION: absolute; Z-INDEX: 9’ + i + “; VISIBILITY: visible; TOP:-” + snowmaxsize + ‘px; LEFT: 15px;”>’ + snowletter + “</div>”)
}
if (browserok)
{ initsnow() }
else
{ document.write(‘esto es mucha caña para tu navegador!, ‘) };

 

 

Espero que disfrutes pronto de la nevada de tu blog!!

A %d blogueros les gusta esto: