Efecto copos de nieve para tu foro[TUTO]

Loiss1989 · 3 Dic 2009

1.Abrimos el bloc de notas y copiamos el sgte codigo :

PHP:

//Snow

if  ((document.getElementById) &&  
window.addEventListener || window.attachEvent){ 

(function(){ 

//Configuracion. 

var num = 40;   //Numero de copos 
var timer = 30; //setTimeout speed. Varies on different comps - -  Velocidad de copos 

//End. 

var y = []; 
var x = []; 
var fall = []; 
var theFlakes = []; 
var sfs = []; 
var step = []; 
var currStep = []; 
var h,w,r; 
var d = document; 
var pix = "px"; 
var domWw = (typeof window.innerWidth == "number"); 
var domSy = (typeof window.pageYOffset == "number"); 
var idx = d.getElementsByTagName('div').length; 

if (d.documentElement.style &&  
typeof d.documentElement.style.MozOpacity == "string") 
num = 12; 

for (i = 0; i < num; i++){ 
sfs[i] = Math.round(2 + Math.random() * 1); 

document.write('<div id="flake'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:' 
+sfs[i]+'px;height:'+sfs[i]+'px;background-color:#ffffff;font-size:'+sfs[i]+'px"><\/div>'); 

currStep[i] = 0; 
fall[i] = (sfs[i] == 1)? 
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2); 
step[i] = (sfs[i] == 1)? 
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ; 
} 


if (domWw) r = window; 
else{  
  if (d.documentElement &&  
  typeof d.documentElement.clientWidth == "number" &&  
  d.documentElement.clientWidth != 0) 
  r = d.documentElement; 
 else{  
  if (d.body &&  
  typeof d.body.clientWidth == "number") 
  r = d.body; 
 } 
} 


function winsize(){ 
var oh,sy,ow,sx,rh,rw; 
if (domWw){ 
  if (d.documentElement && d.defaultView &&  
  typeof d.defaultView.scrollMaxY == "number"){ 
  oh = d.documentElement.offsetHeight; 
  sy = d.defaultView.scrollMaxY; 
  ow = d.documentElement.offsetWidth; 
  sx = d.defaultView.scrollMaxX; 
  rh = oh-sy; 
  rw = ow-sx; 
 } 
 else{ 
  rh = r.innerHeight; 
  rw = r.innerWidth; 
 } 
h = rh - 2;   
w = rw - 2;  
} 
else{ 
h = r.clientHeight - 2;  
w = r.clientWidth - 2;  
} 
} 


function scrl(yx){ 
var y,x; 
if (domSy){ 
 y = r.pageYOffset; 
 x = r.pageXOffset; 
 } 
else{ 
 y = r.scrollTop; 
 x = r.scrollLeft; 
 } 
return (yx == 0)?y:x; 
} 


function snow(){ 
var dy,dx; 

for (i = 0; i < num; i++){ 
 dy = fall[i]; 
 dx = fall[i] * Math.cos(currStep[i]); 

 y[i]+=dy; 
 x[i]+=dx;  

 if (x[i] >= w || y[i] >= h){ 
  y[i] = -10; 
  x[i] = Math.round(Math.random() * w); 
  fall[i] = (sfs[i] == 1)? 
  Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2); 
  step[i] = (sfs[i] == 1)? 
  0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ; 
 } 
  
 theFlakes[i].top = y[i] + scrl(0) + pix; 
 theFlakes[i].left = x[i] + scrl(1) + pix; 

 currStep[i]+=step[i]; 
} 
setTimeout(snow,timer); 
} 


function init(){ 
winsize(); 
for (i = 0; i < num; i++){ 
 theFlakes[i] = document.getElementById("flake"+(idx+i)).style; 
 y[i] = Math.round(Math.random()*h); 
 x[i] = Math.round(Math.random()*w); 
} 
snow(); 
} 


if (window.addEventListener){ 
 window.addEventListener("resize",winsize,false); 
 window.addEventListener("load",init,false); 
}   
else if (window.attachEvent){ 
 window.attachEvent("onresize",winsize); 
 window.attachEvent("onload",init); 
}  

})(); 
}//End.

2.A este archivo lo llamaremos "snow.js" , y lo subes al root de tu foro
3.ve a Estilos y Plantillas / Buscar Dentro de Plantillas / y buscas "headinclude"
4.Una ves dentro de la plantilla headinclude buscamos

PHP:

                       <!-- / CSS Stylesheet -->

y debajo colocamos

PHP:

                       <SCRIPT src="snow.js" type=text/javascript></SCRIPT>

Eso es todo , si algo esta mal corrijanme :saludo:

imported_Ryuk · 3 Dic 2009

Una pregunta este codigo funciona en todos los navegadores? ya que muchos solo funcionan en el Explorer.

Lectro · 3 Dic 2009

Hades dijo:
Una pregunta este codigo funciona en todos los navegadores? ya que muchos solo funcionan en el Explorer.

Debería funcionar en todos los navegadores, pues lo probé y a mi me funviona con Google Chrome, Mozilla Firefox, Internet Explorer. En Opera no probé.

P.D Yo también iba a poner este tuto xD Gracias ppues está bien elaborado

imported_Ryuk · 3 Dic 2009

Lectro dijo:
Debería funcionar en todos los navegadores, pues lo probé y a mi me funviona con Google Chrome, Mozilla Firefox, Internet Explorer. En Opera no probé.

P.D Yo también iba a poner este tuto xD Gracias ppues está bien elaborado

Asi, entonces lo voy a instalar para probarlo.

Pd. Y la imagen de los copos?

EspeackE · 3 Dic 2009

Hades dijo:
Asi, entonces lo voy a instalar para probarlo.

Pd. Y la imagen de los copos?

Es opcional, le puedes poner copos de nieve o la imagen que gustes, pruebalo y luego comentas.
Saludos.

barcraft · 3 Dic 2009

y cual es el efecto? no entiendo

Andrés Durán · 3 Dic 2009

Es un efecto muy disimulado, en skins claros pasa desapercibido:

Ver el archivo adjunto 2063

Ver el archivo adjunto 2064

tecnoanimex · 3 Dic 2009

alguna forma de aumentar la cantidad y tamaño de la nieve?

barcraft · 3 Dic 2009

Chuta dijo:
Es un efecto muy disimulado, en skins claros pasa desapercibido:

Ver el archivo adjunto 2063

Ver el archivo adjunto 2064

hahahahhaha... jamas en la vida imagine que era pa algo asi! hahahaha...

Lizard · 3 Dic 2009

Para el que lo haya montado. ¿notais lentitud y relentización en el foro? muchos de mis users se han quejado de que el foro va muy lento cuando activo los copos, al final lo tuve que desactivar.

Loiss1989 · 4 Dic 2009

Hola que bueno que le ayas gustado mi tuto XD bueno estos copos funcionan en todos los navegadores de todos los copos de nieve que e montado en mi web este es el mas liviano los demas ponian lenta la pagina

se puede aumentar el numero de copos la velocidad solo aumentan el numero de copos ahora si le kieren poner una imagen a los copos Pues tambien se puede pero no se como XD saludos a todos amigos

Lizard · 4 Dic 2009

Loiss1989 una pregunta, al aumentar el numero de copos en ie se ve correctamente pero en firefox no aumenta, ¿sabes porque y como se puede solucionar?

http://www.vbhispano.com/foros/u12803.html

Lectro · 4 Dic 2009

Me acabo de dar cuenta que no hace falta subir eso vía FTP, dejo esto por si alguien no tiene permisos sobre el FTP, o por si prefiere hacerlo así:

1º Ir al Panel de Administración --> Estilos y Plantillas --> Buscar Dentro de Plantillas --> y buscas head

2º Al final del todo de la plantilla Head ponéis el código que pone en el primer mensaje:

PHP:

//Snow

if  ((document.getElementById) &&  
window.addEventListener || window.attachEvent){ 

(function(){ 

//Configuracion. 

var num = 40;   //Numero de copos 
var timer = 30; //setTimeout speed. Varies on different comps - -  Velocidad de copos 

//End. 

var y = []; 
var x = []; 
var fall = []; 
var theFlakes = []; 
var sfs = []; 
var step = []; 
var currStep = []; 
var h,w,r; 
var d = document; 
var pix = "px"; 
var domWw = (typeof window.innerWidth == "number"); 
var domSy = (typeof window.pageYOffset == "number"); 
var idx = d.getElementsByTagName('div').length; 

if (d.documentElement.style &&  
typeof d.documentElement.style.MozOpacity == "string") 
num = 12; 

for (i = 0; i < num; i++){ 
sfs[i] = Math.round(2 + Math.random() * 1); 

document.write('<div id="flake'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:' 
+sfs[i]+'px;height:'+sfs[i]+'px;background-color:#ffffff;font-size:'+sfs[i]+'px"><\/div>'); 

currStep[i] = 0; 
fall[i] = (sfs[i] == 1)? 
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2); 
step[i] = (sfs[i] == 1)? 
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ; 
} 


if (domWw) r = window; 
else{  
  if (d.documentElement &&  
  typeof d.documentElement.clientWidth == "number" &&  
  d.documentElement.clientWidth != 0) 
  r = d.documentElement; 
 else{  
  if (d.body &&  
  typeof d.body.clientWidth == "number") 
  r = d.body; 
 } 
} 


function winsize(){ 
var oh,sy,ow,sx,rh,rw; 
if (domWw){ 
  if (d.documentElement && d.defaultView &&  
  typeof d.defaultView.scrollMaxY == "number"){ 
  oh = d.documentElement.offsetHeight; 
  sy = d.defaultView.scrollMaxY; 
  ow = d.documentElement.offsetWidth; 
  sx = d.defaultView.scrollMaxX; 
  rh = oh-sy; 
  rw = ow-sx; 
 } 
 else{ 
  rh = r.innerHeight; 
  rw = r.innerWidth; 
 } 
h = rh - 2;   
w = rw - 2;  
} 
else{ 
h = r.clientHeight - 2;  
w = r.clientWidth - 2;  
} 
} 


function scrl(yx){ 
var y,x; 
if (domSy){ 
 y = r.pageYOffset; 
 x = r.pageXOffset; 
 } 
else{ 
 y = r.scrollTop; 
 x = r.scrollLeft; 
 } 
return (yx == 0)?y:x; 
} 


function snow(){ 
var dy,dx; 

for (i = 0; i < num; i++){ 
 dy = fall[i]; 
 dx = fall[i] * Math.cos(currStep[i]); 

 y[i]+=dy; 
 x[i]+=dx;  

 if (x[i] >= w || y[i] >= h){ 
  y[i] = -10; 
  x[i] = Math.round(Math.random() * w); 
  fall[i] = (sfs[i] == 1)? 
  Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2); 
  step[i] = (sfs[i] == 1)? 
  0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ; 
 } 
  
 theFlakes[i].top = y[i] + scrl(0) + pix; 
 theFlakes[i].left = x[i] + scrl(1) + pix; 

 currStep[i]+=step[i]; 
} 
setTimeout(snow,timer); 
} 


function init(){ 
winsize(); 
for (i = 0; i < num; i++){ 
 theFlakes[i] = document.getElementById("flake"+(idx+i)).style; 
 y[i] = Math.round(Math.random()*h); 
 x[i] = Math.round(Math.random()*w); 
} 
snow(); 
} 


if (window.addEventListener){ 
 window.addEventListener("resize",winsize,false); 
 window.addEventListener("load",init,false); 
}   
else if (window.attachEvent){ 
 window.attachEvent("onresize",winsize); 
 window.attachEvent("onload",init); 
}  

})(); 
}//End.

Pero en vez de ponerlo así, lo ponéis entre las etiquetas <script> </script> es decir, quedaría así:

PHP:

<script>//Snow

if  ((document.getElementById) &&  
window.addEventListener || window.attachEvent){ 

(function(){ 

//Configuracion. 

var num = 40;   //Numero de copos 
var timer = 30; //setTimeout speed. Varies on different comps - -  Velocidad de copos 

//End. 

var y = []; 
var x = []; 
var fall = []; 
var theFlakes = []; 
var sfs = []; 
var step = []; 
var currStep = []; 
var h,w,r; 
var d = document; 
var pix = "px"; 
var domWw = (typeof window.innerWidth == "number"); 
var domSy = (typeof window.pageYOffset == "number"); 
var idx = d.getElementsByTagName('div').length; 

if (d.documentElement.style &&  
typeof d.documentElement.style.MozOpacity == "string") 
num = 12; 

for (i = 0; i < num; i++){ 
sfs[i] = Math.round(2 + Math.random() * 1); 

document.write('<div id="flake'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:' 
+sfs[i]+'px;height:'+sfs[i]+'px;background-color:#ffffff;font-size:'+sfs[i]+'px"><\/div>'); 

currStep[i] = 0; 
fall[i] = (sfs[i] == 1)? 
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2); 
step[i] = (sfs[i] == 1)? 
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ; 
} 


if (domWw) r = window; 
else{  
  if (d.documentElement &&  
  typeof d.documentElement.clientWidth == "number" &&  
  d.documentElement.clientWidth != 0) 
  r = d.documentElement; 
 else{  
  if (d.body &&  
  typeof d.body.clientWidth == "number") 
  r = d.body; 
 } 
} 


function winsize(){ 
var oh,sy,ow,sx,rh,rw; 
if (domWw){ 
  if (d.documentElement && d.defaultView &&  
  typeof d.defaultView.scrollMaxY == "number"){ 
  oh = d.documentElement.offsetHeight; 
  sy = d.defaultView.scrollMaxY; 
  ow = d.documentElement.offsetWidth; 
  sx = d.defaultView.scrollMaxX; 
  rh = oh-sy; 
  rw = ow-sx; 
 } 
 else{ 
  rh = r.innerHeight; 
  rw = r.innerWidth; 
 } 
h = rh - 2;   
w = rw - 2;  
} 
else{ 
h = r.clientHeight - 2;  
w = r.clientWidth - 2;  
} 
} 


function scrl(yx){ 
var y,x; 
if (domSy){ 
 y = r.pageYOffset; 
 x = r.pageXOffset; 
 } 
else{ 
 y = r.scrollTop; 
 x = r.scrollLeft; 
 } 
return (yx == 0)?y:x; 
} 


function snow(){ 
var dy,dx; 

for (i = 0; i < num; i++){ 
 dy = fall[i]; 
 dx = fall[i] * Math.cos(currStep[i]); 

 y[i]+=dy; 
 x[i]+=dx;  

 if (x[i] >= w || y[i] >= h){ 
  y[i] = -10; 
  x[i] = Math.round(Math.random() * w); 
  fall[i] = (sfs[i] == 1)? 
  Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2); 
  step[i] = (sfs[i] == 1)? 
  0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ; 
 } 
  
 theFlakes[i].top = y[i] + scrl(0) + pix; 
 theFlakes[i].left = x[i] + scrl(1) + pix; 

 currStep[i]+=step[i]; 
} 
setTimeout(snow,timer); 
} 


function init(){ 
winsize(); 
for (i = 0; i < num; i++){ 
 theFlakes[i] = document.getElementById("flake"+(idx+i)).style; 
 y[i] = Math.round(Math.random()*h); 
 x[i] = Math.round(Math.random()*w); 
} 
snow(); 
} 


if (window.addEventListener){ 
 window.addEventListener("resize",winsize,false); 
 window.addEventListener("load",init,false); 
}   
else if (window.attachEvent){ 
 window.attachEvent("onresize",winsize); 
 window.attachEvent("onload",init); 
}  

})(); 
}//End.  </script>

Ahora le dais a guardar, vais a vuestro Foro y se verá el efecto de copos de nieve

Loiss1989 · 4 Dic 2009

Lizard hola si tienes razon en firefox no funka si aumentas el numero de copos alguna solucion???

Lectro muy buena idea asi la el script funcionaria dentro de la misma plantilla saludos

Devil-Ghost · 4 Dic 2009

Si funciona pero son demasiado chicos los copos y casi no se miran x_X

EspeackE · 6 Dic 2009

Te Propongo los que tengo instalados en mi WEB la nieve es Gruesa, se acumula debajo del monitor, y se mueve con el movimiento del MOUSE.

Tambien es totalmente personalizable en velocidad y en numero de copos.
NO NECESITAS IMAGEN EXTRA.
Si te gusta te POSTEO el JAVA SCRIPT.
Saludos.

Andrés Durán · 6 Dic 2009

Sería muy amable de tu parte EspeackE si lo publicas como una guía por aparte

imported_Ryuk · 6 Dic 2009

EspeackE esta muy bueno, seria bueno de tu que lo compartas!

EspeackE · 6 Dic 2009

Hola, aca les dejo el enlace del script que piden.

http://www.vbhispano.com/foros/f6/vbh_efecto_nieve_personalizada_vbulletin-15776/#post83152

Saludos.