Colocar efecto nieve en el foro con java script

Himura 13 Dec, 2009, 5:36 pm

esto es para colocar un efecto de nieve caendo en el foro, si quieren ver un ejemplo click en mi firma o dirijanse http://forodarkxp.co.cc,

abir la plantilla headerinclude y agregar este codigo,

<style type="text/css">
.snow {
position:absolute;
color:lightblue;
visibility:visible;
top:-50px;
font-size:12px;
}
</style>

este codigo se encarga del estilo de los "copitos"
color:xxxx; es el color que tendran los "copitos", que caen, pueden poner el color en ingles (lightblue;) o en hexadecimal (#fff;)
font-size:xxx;el tamaño que tendran los "copitos"
este codigo alternativamente lo puedes agregar en tu global.css

.snow {
position:absolute;
color:lightblue;
visibility:visible;
top:-50px;
font-size:12px;
}

este es el codigo que se encarga de mostrar y controlar los "copitos", aqui tienen dos opciones incluir el script en el header lo cual mostrara el efecto en todas las paginas del foro o colo carlo en una pagina especifica como el portal o el index, yo lo coloque solo en el portal, ya que al cargar varias veces el script el navegador consumia bastante mas recursos,

<script language="javascript">

var snowflakes=100;          //Numero de copos callendo.
var level=5;                      //nivel de velocidad 1 a 5. 1=lento, 5=rapido.

var w3c=(document.getElementById)?true:false;
var ns4=(document.layers)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;
var t='';
var w_x, w_y;
var snow=new Array();
for(i=1;i<=snowflakes;i++)t+='<div id="snow'+i+'" class="snow">*</div>';
document.write(t);

function getstartpos(obj){
obj.size=Math.floor(Math.random()*5)+1
obj.ystep=obj.size*level;
obj.xstep=obj.ystep/5;
if(ns4)obj.clip.width=obj.clip.height=obj.size;
else obj.style.width=obj.style.height=obj.size;
moveidto(obj,Math.floor(Math.random()*w_x)-obj.size,0);
}

function movedrop(){
for(i=1;i<=snowflakes;i++){
var l=(ns4)?snow[i].left:parseInt(snow[i].style.left);
var t=(ns4)?snow[i].top:parseInt(snow[i].style.top);
var pxo=(ie4||ie5)?document.body.scrollLeft:pageXOffset;
var pyo=(ie4||ie5)?document.body.scrollTop:pageYOffset;
if( (t+snow[i].ystep+snow[i].size>=w_y+pyo) || (snow[i].xpos-snow[i].size<pxo)) getstartpos(snow[i]);
else moveidto(snow[i], l-snow[i].xstep, t+snow[i].ystep);
}}

function getwindowdims(){
w_x=(ie4||ie5)? document.body.clientWidth:window.innerWidth;
w_y=(ie4||ie5)? document.body.clientHeight:window.innerHeight;
}

function moveidto(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}

window.onresize=function(){
if(ns4)setTimeout('history.go(0)',400);
else getwindowdims();
}

window.onload=function(){
level=Math.max(Math.min(5,level),1)
getwindowdims();
for(i=1;i<=snowflakes;i++){
snow[i]=(ns4)?document.layers['snow'+i]:(ie4)?document.all['snow'+i]:document.getElementById('snow'+i);
getstartpos(snow[i]);
moveidto(snow[i],Math.floor(Math.random()*(w_x-10)),Math.floor(Math.random()*(w_y-10)));
}
setInterval('movedrop()',50);
}
</script>

si quieren que este disponible el efecto del en todo el foro abre la plantilla hedaer, y pega el codigo, por ejemplo al comienso de la plantilla,
si quieren que se vea en algunas paginas editen la plantilla correspondiente a esa pagina busque la etiqueta <body> y pegen el script a continuacion, el script si no encuentran esa etiqueta pegenlo luego de {$headerinclude},
var snowflakes=xxx; aqui se define la cantidad de "copitos" callendo
var level=x; Aqui se define la velocidad a la que caen los "copitos"

otro codigo con java script, ese es menos vistoso pero provoca menos problemas

solo coloca este codigo

<script language="JavaScript">
if  ((document.getElementById) && 
window.addEventListener || window.attachEvent){

(function(){

var num = 30;
var timer = 60;

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);
} 

})();
}</SCRIPT>

ejemplo en

http://foro.prodescargas.com/index.php

eso es todo cualquier duda consulten

Ignnacio 13 Dec, 2009, 5:45 pm

Lo malo que da mucho lag :S

Himura 13 Dec, 2009, 6:00 pm

por eso solo lo puse en el portal, jejeje

elmassi 15 Dec, 2009, 9:21 pm

lo puse en mi foro en noviembre como inovacion y esta en todos lados este año XD

Anubis 19 Dec, 2009, 9:07 am

el primero paso no lo entendi bien...donde tengo que poner:

<style type="text/css">
.snow {
position:absolute;
color:lightblue;
visibility:visible;
top:-50px;
font-size:12px;
}
</style>

explicate bien por que no te entendi en donde tengo qe poner cada cosa porfas

Última modificación: 19 Dec, 2009, 9:08 am por iNvertido.

Ignacio P. 19 Dec, 2009, 9:46 am

@UP: Colocalo en la plantilla "Header"

[Imagen: 1411605000_5000_1_EUR_1500_dark.png]

Aeroxis 19 Dec, 2009, 11:43 am

Himura 19 Dec, 2009, 6:05 pm

(19 Dec, 2009, 9:07 am)Anubis escribió: el primero paso no lo entendi bien...donde tengo que poner:

<style type="text/css">
.snow {
position:absolute;
color:lightblue;
visibility:visible;
top:-50px;
font-size:12px;
}
</style>
explicate bien por que no te entendi en donde tengo qe poner cada cosa porfas

abir la plantilla headerinclude y agregar este codigo,
si te fijas el post dice donde, si no quieres editar esa plantilla colocas el codigo en el global.css pero solo

.snow {
position:absolute;
color:lightblue;
visibility:visible;
top:-50px;
font-size:12px;

solo usa uno de los dos no ambos
el efecto es mas atractivo pero genera retardo (lageo) al mostrar la pagina
el segundo es menos llamativo pero no produce tantos problemas a mostrar la pagina (ojo hay dos codigos distintos para colocar nieve posteados)