Colocar efecto nieve en el foro con java script
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 ...

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,

Código PHP:
<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
Código PHP:
.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,
Código:
<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

Código:
<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
Código:
http://foro.prodescargas.com/index.php

eso es todo cualquier duda consulten
Lo malo que da mucho lag :S
por eso solo lo puse en el portal, jejeje
lo puse en mi foro en noviembre como inovacion y esta en todos lados este año XD
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.
@Anubis
Eso lo tienes que colocar en:
Global.css/Edición avanzada
Bajas hasta el final y lo pegas.
(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
Código PHP:
.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)