Como hacer efectos copos de nieve

  • Autor Autor Freddyto13
  • Fecha de inicio Fecha de inicio
F

Freddyto13

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Buenas como todos saben la navidad ya se acerca, y me gustaría darle a mi foro un toque navideño.

Eh visto en algunos foros un efecto de copos de nieves donde una lluvia de copos de nieve adornan la pagina y le dan ese toque a la navidad.

Quisiera saber si es un mod o como podría ponerle ese efecto en estos 2 meses para mi forito

Saludos😀
 
Hola,

Hay muuuuchos métodos para hacer eso, frecuentemente con Javascript, insertar lo que deba ir antes de </head> en las plantillas del header precisamente, y lo que va en el <body>, en plantillas como Forumhome y demás.

Javascript - Efecto copos de nieve para todos los navegadores (cross browser) - Tutores.org)
scripts navideños - Foros del Web
Efecto Nieve (van cayendo copos de nieve) !!!! - Comunidades de foros - miarroba.com
Efecto Nieve con JavaScript
WebExperto.com - Efecto nieve - (Java Script)

Esos resultados salieron de una busqueda de Google que tenía como parametros de búsqueda "efecto nieve javascript" ... yo hace un año lo implementé en un foro vbulletin sin problemas... pero fui indiferente a la página que usé como referencia ya que como te dije, hay muchos métodos.

Ya si tienes un código y necesitas ayuda para insertarlo, puedes entonces decirnos 🙂

😛 igual buscando Mods:
http://www.vbulletin.org/forum/showthread.php?t=197427
http://www.vbulletin.org/forum/showthread.php?t=99991
http://www.vbulletin.org/forum/showthread.php?t=197312&page=5
http://www.vbulletin.org/forum/showthread.php?t=132475&page=3
http://www.vbulletin.org/forum/showthread.php?t=85797

Es que estaba buscando en español y así no encontré nada, jeje....

Muevo el tema a <Soporte en General>
 
Si no me equivoco el hack que hace esos efectos, se llama season, busca con ese nombre...
 
Gracias Enlace eliminado Me funciono perfecto men ya tengo nieve en mi web 😀 habia puesto varios mod que conseguí en vbulletin.org pero todos salían pequeños :S uno de los que pusiste era justo lo que buscaba xd
 
Hola Freddyto13

Me gustaría saber como lo has conseguido, he intentado poner un script en la plantilla header pero no encuentro la etiqueta </head> por ningún lado

Y si puedes, coloca aquí el script que has usado y donde lo has añadido 😉

saludos y gracias
 
</head> es elk Header, Pon el codigo a principio de la plantilla Header.
 
Hola de nuevo

Este es el script con las etiquetas html, podéis copiarlo a un bloc de notas y guardarlo como .html y lo abres con el navegador, funciona correctamente y se le pueden hacer los cambios que se deseen

Insertar CODE, HTML o PHP:
<html>
<head>
</head>
<!--- EFECTO NIEVE --->
<script>

// Numero de copos, recomendados entre 30 y 40
var nieve_cantidad=35

// Colores de los copos se mostraran de forma aleatoria
var nieve_colorr=new Array("#aaaacc","#ddddFF","#ccccDD")

// Tipo de letra de los copos
var nieve_tipo=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")

// Valor o letra de los copos
var nieve_letra="*"

// velocidad de caida
var nieve_velocidad=0.6

// tamaño mas grande de los copos
var nieve_cantidadsize=50

// tamaño mas pequeño de los copos
var nieve_chico=8

// 1 toda la pagina - 2 zona izquierda - 3 centro de pagina - 4 zona derecha
var nieve_zona=1

var nieve=new Array()
var marginbottom
var marginright
var timer
var i_nieve=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 aleatorio(range) {
rand=Math.floor(range*Math.random())
return rand
}

function initnieve() {
if (ie5 || opera) {
marginbottom = document.body.clientHeight
marginright = document.body.clientWidth
}
else if (ns6) {
marginbottom = window.innerHeight
marginright = window.innerWidth
}
var nievesizerange=nieve_cantidadsize-nieve_chico
for (i=0;i<=nieve_cantidad;i++) {
crds[i] = 0;
lftrght[i] = Math.random()*15;
x_mv[i] = 0.03 + Math.random()/10;
nieve[i]=document.getElementById("s"+i)
nieve[i].style.fontFamily=nieve_tipo[aleatorio(nieve_tipo.length)]
nieve[i].size=aleatorio(nievesizerange)+nieve_chico
nieve[i].style.fontSize=nieve[i].size
nieve[i].style.color=nieve_colorr[aleatorio(nieve_colorr.length)]
nieve[i].sink=nieve_velocidad*nieve[i].size/5
if (nieve_zona==1) {nieve[i].posx=aleatorio(marginright-nieve[i].size)}
if (nieve_zona==2) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)}
if (nieve_zona==3) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/4}
if (nieve_zona==4) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/2}
nieve[i].posy=aleatorio(2*marginbottom-marginbottom-2*nieve[i].size)
nieve[i].style.left=nieve[i].posx
nieve[i].style.top=nieve[i].posy
}
movenieve()
}

function movenieve() {
for (i=0;i<=nieve_cantidad;i++) {
crds[i] += x_mv[i];
nieve[i].posy+=nieve[i].sink
nieve[i].style.left=nieve[i].posx+lftrght[i]*Math.sin(crds[i]);
nieve[i].style.top=nieve[i].posy

if (nieve[i].posy>=marginbottom-2*nieve[i].size || parseInt(nieve[i].style.left)>(marginright-3*lftrght[i])){
if (nieve_zona==1) {nieve[i].posx=aleatorio(marginright-nieve[i].size)}
if (nieve_zona==2) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)}
if (nieve_zona==3) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/4}
if (nieve_zona==4) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/2}
nieve[i].posy=0
}
}
var timer=setTimeout("movenieve()",50)
}

for (i=0;i<=nieve_cantidad;i++) {
document.write("<span id='s"+i+"' style='position:absolute;top:-"+nieve_cantidadsize+"'>"+nieve_letra+"</span>")
}
if (browserok) {
window.onload=initnieve
}
</script>
<!--- /EFECTO NIEVE --->
<body bgcolor="#ddddee"></body>
</html>

Ya he colocado el script al principio de la plantilla Header y no hace nada
podéis orientarme como debo hacerlo? y si ese script es el adecuado?

saludos y gracias
 
Hola de nuevo

Este es el script con las etiquetas html, podéis copiarlo a un bloc de notas y guardarlo como .html y lo abres con el navegador, funciona correctamente y se le pueden hacer los cambios que se deseen

Insertar CODE, HTML o PHP:
<html>
<head>
</head>
<!--- EFECTO NIEVE --->
<script>

// Numero de copos, recomendados entre 30 y 40
var nieve_cantidad=35

// Colores de los copos se mostraran de forma aleatoria
var nieve_colorr=new Array("#aaaacc","#ddddFF","#ccccDD")

// Tipo de letra de los copos
var nieve_tipo=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")

// Valor o letra de los copos
var nieve_letra="*"

// velocidad de caida
var nieve_velocidad=0.6

// tamaño mas grande de los copos
var nieve_cantidadsize=50

// tamaño mas pequeño de los copos
var nieve_chico=8

// 1 toda la pagina - 2 zona izquierda - 3 centro de pagina - 4 zona derecha
var nieve_zona=1

var nieve=new Array()
var marginbottom
var marginright
var timer
var i_nieve=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 aleatorio(range) {
rand=Math.floor(range*Math.random())
return rand
}

function initnieve() {
if (ie5 || opera) {
marginbottom = document.body.clientHeight
marginright = document.body.clientWidth
}
else if (ns6) {
marginbottom = window.innerHeight
marginright = window.innerWidth
}
var nievesizerange=nieve_cantidadsize-nieve_chico
for (i=0;i<=nieve_cantidad;i++) {
crds[i] = 0;
lftrght[i] = Math.random()*15;
x_mv[i] = 0.03 + Math.random()/10;
nieve[i]=document.getElementById("s"+i)
nieve[i].style.fontFamily=nieve_tipo[aleatorio(nieve_tipo.length)]
nieve[i].size=aleatorio(nievesizerange)+nieve_chico
nieve[i].style.fontSize=nieve[i].size
nieve[i].style.color=nieve_colorr[aleatorio(nieve_colorr.length)]
nieve[i].sink=nieve_velocidad*nieve[i].size/5
if (nieve_zona==1) {nieve[i].posx=aleatorio(marginright-nieve[i].size)}
if (nieve_zona==2) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)}
if (nieve_zona==3) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/4}
if (nieve_zona==4) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/2}
nieve[i].posy=aleatorio(2*marginbottom-marginbottom-2*nieve[i].size)
nieve[i].style.left=nieve[i].posx
nieve[i].style.top=nieve[i].posy
}
movenieve()
}

function movenieve() {
for (i=0;i<=nieve_cantidad;i++) {
crds[i] += x_mv[i];
nieve[i].posy+=nieve[i].sink
nieve[i].style.left=nieve[i].posx+lftrght[i]*Math.sin(crds[i]);
nieve[i].style.top=nieve[i].posy

if (nieve[i].posy>=marginbottom-2*nieve[i].size || parseInt(nieve[i].style.left)>(marginright-3*lftrght[i])){
if (nieve_zona==1) {nieve[i].posx=aleatorio(marginright-nieve[i].size)}
if (nieve_zona==2) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)}
if (nieve_zona==3) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/4}
if (nieve_zona==4) {nieve[i].posx=aleatorio(marginright/2-nieve[i].size)+marginright/2}
nieve[i].posy=0
}
}
var timer=setTimeout("movenieve()",50)
}

for (i=0;i<=nieve_cantidad;i++) {
document.write("<span id='s"+i+"' style='position:absolute;top:-"+nieve_cantidadsize+"'>"+nieve_letra+"</span>")
}
if (browserok) {
window.onload=initnieve
}
</script>
<!--- /EFECTO NIEVE --->
<body bgcolor="#ddddee"></body>
</html>

Ya he colocado el script al principio de la plantilla Header y no hace nada
podéis orientarme como debo hacerlo? y si ese script es el adecuado?

saludos y gracias

Allí tampoco está en el Header, usalo en otra plantilla como forumhome, este script no especifica que sea en el header.
 
Bueno amigos, después de colocar el script en diferentes plantillas y distintos sitios, y viendo que no sucede nada, he decidido dejarlo por imposible

Quizás ese script no se puede poner, pero no se cual o como ponerlo, así que esperaré a ver si alguien postea alguno con un mini tutorial 🙂

saludos y gracias
 
Teniendo los Mods de arriba, ¿ninguno te funciona?
 
No entiendo tampoco donde vá
Saludos.


Lo hise en el FORUNHOME antes de la etiqueta <body> y no hace nada, como si no hubiera colocado nada, nos podrian dar una mejor ayuda? gracias

Bueno como que voy a tener que buscar soporte en otro lado porque sino me quedo sin nieve jejejeje, gracias de todas maneras por su ayuda.
Saludos.
 
Probar a pegar el código en el Bloc de Notas, lo guardais con el nombre de snow.js y lo subiis al root de vuestro foro, después ir a: Estilos y Plantillas --> Buscar dentro de Plantillas --> headinclude

Buscar:

PHP:
<!-- / CSS Stylesheet -->

Debajo poner:

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

Y le dais a guardar, decirme si os funcionó, pues de donde saqué esto no tienen el mismo código que habéis puesto arriba.

Créditos: Dureitor
(Downtwarez)
 
No entiendo tampoco donde vá
Saludos.


Lo hise en el FORUNHOME antes de la etiqueta <body> y no hace nada, como si no hubiera colocado nada, nos podrian dar una mejor ayuda? gracias

Bueno como que voy a tener que buscar soporte en otro lado porque sino me quedo sin nieve jejejeje, gracias de todas maneras por su ayuda.
Saludos.

Buscando por snow en vBulletin.org, puedes ver varios temas en los que se habla del asunto. Un ejemplo es este add-on, que ya Daniel B. te había puesto un enlace en su mensaje:

Snow for your site 🙂 - vBulletin.org Forum
 
Probar a pegar el código en el Bloc de Notas, lo guardais con el nombre de snow.js y lo subiis al root de vuestro foro, después ir a: Estilos y Plantillas --> Buscar dentro de Plantillas --> headinclude

Buscar:

PHP:
<!-- / CSS Stylesheet -->

Debajo poner:

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

Y le dais a guardar, decirme si os funcionó, pues de donde saqué esto no tienen el mismo código que habéis puesto arriba.

Créditos: Dureitor
(Downtwarez)
Gracias Lectro por el soporte y explicación que me has dado, se te agradece de verdad, pero ya encontré la solución por otro lado.

Buscando por snow en vBulletin.org, puedes ver varios temas en los que se habla del asunto. Un ejemplo es este add-on, que ya Daniel B. te había puesto un enlace en su mensaje:

Snow for your site 🙂 - vBulletin.org Forum
Amigo Chuta, yo no dije que no veo los links, lo que pasa es que como novato que soy y que creo que habemos muchos usuarios así, no entendemos bien "Donde y Como" va colocado estos códigos, pero ya gracias a dios me dieron soporte.
Otra cosa amigo y con el respeto que te mereces, mi mensaje anterior lo editaste y en la razón para editar colocaste "Por fuentes groseras" quiero que sepas que en esta pagina no he visto fuentes groseras como las tengo yo en mi Photoshop y si te refieres a palabras groseras, es completamente falso ya que no soy ese tipo de personas.
Lo que falta allí, que tu editaste es "Y me disculpan que sea tan sincero pero es la realidad" y no creo que esa sea una frase grosera, el poder que te da la administración de ésta hermosa página no te dá el derecho de mal poner a los usuarios como lo hiciste conmigo colocando eso en "Razón para editar" en mi post, porque de esa manera los usuarios pensaran que de verdad dije alguna "Groseria" y no es asi.

Saludos amigos, gracias por todo y que tengan una feliz navidad
 
Cuando me refería a fuente grosera, no hablaba de que hayas puesto alguna grosería en tu mensaje, me refería a esto:

Ejemplo:

"Ayuda por favor"

Creo que todos podemos leer el tamaño de fuente predeterminado del foro no?

Por cierto, me alegro que lo hayas solucionado 🙂
 
Bueno menos mal que lo aclaraste para que los usuarios no vayan a pensar mal, yo siempre he usado una fuente con tamaño #3 y cuando quiero resaltar algo lo escribo en mayúscula y ya tengo 20 años escribiendo de esa forma y no le veo nada de malo.
De todas maneras gracias por aclarar lo que tu dices que es "Groseria".
Saludos.
 
oh!!! yo pensé que esto sería más sencillo, pero se ve dificil.

No pueden hacer un tutorial?
 
Uyyyy con un tuto podria entender.
 
1º Espero que estés usando otro estilo que no sea el Default. Ése debes dejarlo limpio, para hacer comprobaciones.

2º Si estás usando otro diferente, es muy sencillo hacer lo de la nieve.

-> Entra en FORUMHOME (si no sabes cómo, pincha en "Estilos y plantillas -> Buscar dentro de plantillas") Luego, busca la palabra footer

-> Busca: {vb:raw footer} (Si no sabes buscar, pulsa las teclas Ctrl+F y te saldrá el cuadro para poner eso que te he escrito)

-> Debajo, pega éste código​

Insertar CODE, HTML o PHP:
<SCRIPT type="text/javascript">
/*
Snow Fall 1 - no images - Java Script
Visit http://rainbow.arch.scriptmania.com/scripts/
  for this script and many more
*/


// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=110


// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#aaaacc","#ddddff","#ccccdd","#f3f3f3","#f0ffff","#82B4FE","#FFF004")


// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array("Times","Arial","Times","Verdana")


// Set the letter that creates your snowflake (recommended: * )
var snowletter="•"


// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed=0.6


// Set the maximum-size of your snowflakes
var snowmaxsize=25


// Set the minimal-size of your snowflakes
var snowminsize=8


// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1


///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////




// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
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(range) {
        rand=Math.floor(range*Math.random())
    return rand
}


function initsnow() {
        if (ie5 || opera) {
                marginbottom = document.body.scrollHeight
                marginright = document.body.clientWidth-15
        }
        else if (ns6) {
                marginbottom = document.body.scrollHeight
                marginright = window.innerWidth-15
        }
        var snowsizerange=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(snowsizerange)+snowminsize
                snow[i].style.fontSize=snow[i].size+'px';
                snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
                snow[i].style.zIndex=1000
                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() {
        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=0
                }
        }
        var timer=setTimeout("movesnow()",50)
}


for (i=0;i<=snowmax;i++) {
        document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
        window.onload=initsnow
}


</SCRIPT>

Donde dice : var snowletter="" Puedes poner el símbolo que prefieras. Yo puse un punto gordo y elegí varios colores porque el fondo de mi foro es claro y así destaca la nieve más ("#aaaacc","#ddddff","#ccccdd","#f3f3f3","#f0ffff","#82B4FE","#FFF004")

Hay gente que pone asteriscos *, otros ponen ¤ y otros ٭

Tú elige el que prefieras, puedes seleccionarlo en el Mapa de caracteres de Windows o copiar alguno de los que te he dejado aquí.


Yo lo tengo puesto en mi foro 4.1.8 y funciona muy bien, no ralentiza nada, como me pasaba con otros códigos que había puesto antes. Supongo que en el 3.x.x funcionará también
 
Atrás
Arriba