• Anuncio

Efecto de lluvia

Aquí podrás encontrar algunos script y estas invitado a publicar los que consideres interesantes.

Moderadores: Joelo13, dBer, JTole, vikerweb

Efecto de lluvia

Notapor JTole » 28 Dic 2009 20:00

¿Quieres que sobre tu web empiece a llover? Pues simplemente copia y pega este código justo detrás de la etiqueta <body>:

<SCRIPT LANGUAGE="JavaScript">
var no = 50;
var speed = 1;
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var s, x, y, sn, cs;
var a, r, cx, cy;
var i, doc_width = 800, doc_height = 600;

function initRain() {
a = 6;
r[i] = 1;
sn = Math.sin(a);
cs = Math.cos(a);
cx[i] = Math.random() * doc_width + 1;
cy[i] = Math.random() * doc_height + 1;
x[i] = r[i] * sn + cx[i];
y[i] = cy[i];
}

function makeRain() {
r[i] = 1;
cx[i] = Math.random() * doc_width + 1;
cy[i] = 1;
x[i] = r[i] * sn + cx[i];
y[i] = r[i] * cs + cy[i];
}

function updateRain() {
r[i] += s;
x[i] = r[i] * sn + cx[i];
y[i] = r[i] * cs + cy[i];
}

function raindropNS() {
for (i = 0; i < no; ++ i) {
updateRain();
if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {
makeRain();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
document.layers["dot"+i].top = y[i];
document.layers["dot"+i].left = x[i];
}
setTimeout("raindropNS()", speed);
}

function raindropIE() {
for (i = 0; i < no; ++ i) {
updateRain();
if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {
makeRain();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
document.all["dot"+i].style.pixelTop = y[i];
document.all["dot"+i].style.pixelLeft = x[i];
}
setTimeout("raindropIE()", speed);
}


if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

x = new Array();
y = new Array();
r = new Array();
cx = new Array();
cy = new Array();
s = 8;

for (i = 0; i < no; ++ i) {
initRain();
if (ns4up) {
if (i == 0) {
document.write("<layer name='dot"+i+"' left='1' top='1' visibility='show'><font color='blue'>,</font></layer>");
}
else {
document.write("<layer name='dot"+i+"' left='1' top='1' visibility='show'><font color='blue'>,</font></layer>");
}
}
else if (ie4up) {
if (i == 0) {
document.write("<div id='dot"+i+"' style='POSITION: absolute; Z-INDEX: "+i+"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;'><font color='blue'>,</font></div>");
}
else {
document.write("<div id='dot"+i+"' style='POSITION: absolute; Z-INDEX: "+i+"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;'><font color='blue'>,</font></div>");
}
}
}

if (ns4up) {
raindropNS();
}
else if (ie4up) {
raindropIE();
}

// End -->
</SCRIPT>


Puedes especificar el número de gotas de lluvia que desea ver caer sobre su sitio (var no = 50;) y la velocidad a la que caen (var speed = 1;).

Ya que no llueve de verdad últimamente que por lo menos lo haga por la red :lol: .

---.Saludos.---
Imagen
Avatar de Usuario
JTole
Administrador oletusWEBos
Administrador oletusWEBos
 
Mensajes: 276
Registrado: 08 Oct 2009 22:59
Ubicación: Madrid

Anuncio

Re: Efecto de lluvia

Notapor dBer » 29 Dic 2009 01:02

Que efecto mas extraño para una web jaja
dBer
Moderador oletusWEBos
Moderador oletusWEBos
 
Mensajes: 301
Registrado: 12 Oct 2009 01:29

Re: Efecto de lluvia

Notapor Jose » 09 Ene 2010 00:44

jeje que chulo :D . Funciona perfectamente, esque vi varios efectos para la web, y ninguno me iva bien.
Jose
Quiere aprender
Quiere aprender
 
Mensajes: 52
Registrado: 28 Oct 2009 21:26

Re: Efecto de lluvia

Notapor zyd_7 » 05 Abr 2010 04:03

Hola que tal, me gustaria saber si de esta misma forma es que se le puede agregar efectos a los hipervinculos, veran en el tutorial de dreamweaver de esta misma web (excelente por cierto) viene un efecto simple de que al poner el cursor sobre el texto del hypervinculo se cambie el color de la fuente, entonces queria ver si por medio de scripts tambien puedo hacer esto; pero un efecto mas complejo, bueno mas bien mas detallado (no solo cambiar el color), por otra parte me gustaria mencionar en que parte o como puedo insertar algo en hecho en flash (todo usando dreamwaever claro), ya que tengo por idea hacer una animacion en mi index, en si necesito que algunas fotos esten orbitando al rededor de una esfera, me gustaria saber si pueden decirme como puedo hacer algo por el estilo (obviamente no encontrare un tutorial en especifico) pero algo que me oriente lo agradeceria mucho, gracias de antemano
zyd_7
Esta de paso
Esta de paso
 
Mensajes: 1
Registrado: 05 Abr 2010 03:31

Re: Efecto de lluvia

Notapor JTole » 05 Abr 2010 13:26

Hola zyp_7 y bienvenido a OTW.
Efectivamente puedes usar scripts para aplicarles efectos a tus hipervinculos, por ejemplo con este script le pones un color de fondo a tus links para hacerlos mas llamativos:

Código: Seleccionar todo
<script>
<!--Asi lo llamamos al Script dentro del Body-->
function highlight(which,color){
if (document.all||document.getElementById)
which.style.backgroundColor=color}
</script>

<!--Asi pones los links dentro del body-->
<a href="http://www.oletuswebos.es" onmouseover="highlight(this,'yellow')" onmouseout="highlight(this,document.bgColor)">oletusWEBos</a>
<a href="http://www.oletuswebos.es" onmouseover="highlight(this,'#00FF00')" onmouseout="highlight(this,document.bgColor)">oletusWEBos</a>
<a href="http://www.oletuswebos.es" onmouseover="highlight(this,'#FF00FF')" onmouseout="highlight(this,document.bgColor)">oletusWEBos</a>


Por otro lado no puedo asesorarte para hacer lo de las fotos orbitando alrededor de una esfera por que de flash no tengo ni idea :(
Imagen
Avatar de Usuario
JTole
Administrador oletusWEBos
Administrador oletusWEBos
 
Mensajes: 276
Registrado: 08 Oct 2009 22:59
Ubicación: Madrid


Volver a Scripts

¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 2 invitados

  • Anuncio
cron