Efecto copos de nieve para tu foro[TUTO]

**Loiss1989** · 03/12/2009 16:22

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

Código 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

Código PHP:


                       <!-- / CSS Stylesheet -->

y debajo colocamos

Código PHP:


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

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

**Ryuk** · 03/12/2009 16:33

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

**Lectro** · 03/12/2009 16:57

Iniciado por Hades

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

**Ryuk** · 03/12/2009 17:18

Iniciado por Lectro

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** · 03/12/2009 18:05

Iniciado por Hades

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** · 03/12/2009 20:55

y cual es el efecto? no entiendo

**Andrés Durán** · 03/12/2009 21:10

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

dsgdfh.PNG

fhgfh.PNG

**tecnoanimex** · 03/12/2009 21:25

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

**barcraft** · 03/12/2009 21:43

Iniciado por Chuta

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

dsgdfh.PNG

fhgfh.PNG

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

**Lizard** · 03/12/2009 23:44

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** · 04/12/2009 01:32

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** · 04/12/2009 03:12

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?

**Lectro** · 04/12/2009 14:31

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:

Código 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í:

Código 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** · 04/12/2009 14:51

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** · 04/12/2009 19:05

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

Efecto copos de nieve para tu foro[TUTO]

LinkBack

Herramientas

Califica este tema

Visualizar

Temas similares

Como hacer efectos copos de nieve Respuestas: 20

efecto de nieve en el foro Respuestas: 2

Necesito tuto para ingresar publicidad Respuestas: 1

Efecto de nieve en mi foro... Respuestas: 7

Amigo Charlie tuto para instalar Skin Respuestas: 1

Efecto copos de nieve para tu foro[TUTO]

Re: Efecto copos de nieve para tu foro[TUTO]

Re: Efecto copos de nieve para tu foro[TUTO]

Re: Efecto copos de nieve para tu foro[TUTO]

Re: Efecto copos de nieve para tu foro[TUTO]

Re: Efecto copos de nieve para tu foro[TUTO]

Re: Efecto copos de nieve para tu foro[TUTO]

Re: Efecto copos de nieve para tu foro[TUTO]

Re: Efecto copos de nieve para tu foro[TUTO]

Re: Efecto copos de nieve para tu foro[TUTO]

Re: Efecto copos de nieve para tu foro[TUTO]

Re: Efecto copos de nieve para tu foro[TUTO]

Re: Efecto copos de nieve para tu foro[TUTO]

Re: Efecto copos de nieve para tu foro[TUTO]

Re: Efecto copos de nieve para tu foro[TUTO]

Sobre vBHispano

Links

Patrocinadores