Efecto lluvia que cae por el blog con JavaScript


¿Cómo estuvo el día? Espero que muy bien. Sean bienvenidos a un nuevo post. Hoy les traigo un tutorial que seguro a más de uno le va a gustar. Se trata del efecto de lluvia que cae por nuestro blog o web. Es un efecto muy vistoso y lo agregaremos fácilmente con código JavaScript.

( Ver DEMO)
rain, effect, lluvia, javascript blogger, web

Post recomendado:
6 efectos para el cursor de tu web o blog
Empecemos con el tutorial.

1.§ Vamos a Diseño - Añadir un gadget.

2.§ De la ventana emergente, elegimos HTML/Javascript pegaremos el siguiente script:




<script type='text/javascript'>var hpnm092_prj_no = "92";
var hpnm092_prj_nm = "hpnm092";
var hpnm092_ball_num = 30;
var hpnm092_ball_sbt_num =1;
var hpnm092_subball_num = 5;
var hpnm092_subball_sbt_num = 3;

var hpnm092_i, hpnm092_n;
var hpnm092_obj;
var hpnm092_img;
var hpnm092_obj_sub;
var hpnm092_img_sub;

var hpnm092_preimg = new Array();
hpnm092_preimg[0] = new Image();
hpnm092_preimg[0].src = "http://www.hapinemu.net/fobp/bp092/ball1.gif";
hpnm092_preimg[1] = new Image();
hpnm092_preimg[1].src = "http://www.hapinemu.net/fobp/bp092/ball2.gif";

var hpnm092_preimg_sub = new Array();
hpnm092_preimg_sub[0] = new Image();
hpnm092_preimg_sub[0].src = "http://www.hapinemu.net/fobp/bp092/subball1.gif";
hpnm092_preimg_sub[1] = new Image();
hpnm092_preimg_sub[1].src = "http://www.hapinemu.net/fobp/bp092/subball1.gif";
hpnm092_preimg_sub[2] = new Image();
hpnm092_preimg_sub[2].src = "http://www.hapinemu.net/fobp/bp092/subball1.gif";

var hpnm092_objBody = document.getElementsByTagName("body").item(0);
var hpnm092_elem;
for(hpnm092_i = 1; hpnm092_i <= hpnm092_ball_num; hpnm092_i++) {
hpnm092_elem = document.createElement('div');
hpnm092_elem.id = hpnm092_prj_nm + '_ball' + hpnm092_i;
hpnm092_elem.innerHTML = '<img id="' + hpnm092_prj_nm + '_ball_img' + hpnm092_i + '" style="border:0;">';
hpnm092_elem.style.position = 'absolute';
hpnm092_elem.style.visibility = 'hidden';
hpnm092_elem.style.margin = '0px';
hpnm092_elem.style.padding = '0px';
hpnm092_objBody.appendChild(hpnm092_elem);
for(hpnm092_n = 1; hpnm092_n <= hpnm092_subball_num; hpnm092_n++) {
hpnm092_elem = document.createElement('div');
hpnm092_elem.id = hpnm092_prj_nm + '_subball' + hpnm092_i + hpnm092_n;
hpnm092_elem.innerHTML = '<img id="' + hpnm092_prj_nm + '_subball_img' + hpnm092_i + hpnm092_n + '" style="border:0;">';
hpnm092_elem.style.position = 'absolute';
hpnm092_elem.style.visibility = 'hidden';
hpnm092_elem.style.margin = '0px';
hpnm092_elem.style.padding = '0px';
hpnm092_objBody.appendChild(hpnm092_elem);
}
}

function hpnm092_getViewTop() {
if( window.scrollY ) return window.scrollY;
if( window.pageYOffset ) return window.pageYOffset;
if( document.documentElement && document.documentElement.scrollTop ) {
return document.documentElement.scrollTop;
}
else if( document.body && document.body.scrollTop ) {
return document.body.scrollTop;
}
return 0;
}

function hpnm092_getViewLeft() {
if( window.scrollX ) return window.scrollX;
if( window.pageXOffset ) return window.pageXOffset;
if( document.documentElement && document.documentElement.scrollLeft ) {
return document.documentElement.scrollLeft;
}
else if( document.body && document.body.scrollLeft ) {
return document.body.scrollLeft;
}
return 0;
}

function hpnm092_getViewHeight() {
if( window.innerHeight ) return window.innerHeight;
if( document.documentElement && document.documentElement.clientHeight ) {
return document.documentElement.clientHeight;
}
else if( document.body && document.body.clientHeight ) {
return document.body.clientHeight;
}
return 0;
}

function hpnm092_getViewWidth() {
if( window.innerWidth ) return window.innerWidth;
if( document.documentElement && document.documentElement.clientWidth ) {
return document.documentElement.clientWidth;
}
else if( document.body && document.body.clientWidth ) {
return document.body.clientWidth;
}
return 0;
}

function hpnm092_getViewBottom() {
return hpnm092_getViewTop() + hpnm092_getViewHeight();
}

function hpnm092_getViewRight() {
return hpnm092_getViewLeft() + hpnm092_getViewWidth();
}

function hpnm092_getRandomNum(num) {
return Math.floor( Math.random() * num );
}

function hpnm092_setOpacity(elem, op){
elem.style.filter = 'alpha(opacity=' + (op * 100) + ')';
elem.style.MozOpacity = op;
elem.style.opacity = op;
}
var hpnm092_action = new Array();
var hpnm092_actioncnt = new Array();
var hpnm092_balltop = new Array();
var hpnm092_balltop_to = new Array();
var hpnm092_ballleft = new Array();
var hpnm092_ballspeed = new Array();
var hpnm092_ballopacity = new Array();
var hpnm092_balltype = new Array();
var hpnm092_subballtop = new Array();
var hpnm092_subballleft = new Array();
var hpnm092_subballmovelr = new Array();
var hpnm092_subballspeedv = new Array();
var hpnm092_subballspeedh = new Array();

for(hpnm092_i = 1; hpnm092_i <= hpnm092_ball_num; hpnm092_i++) {
hpnm092_action[hpnm092_i] = 0;
hpnm092_subballtop[hpnm092_i] = new Array();
hpnm092_subballleft[hpnm092_i] = new Array();
hpnm092_subballmovelr[hpnm092_i] = new Array();
hpnm092_subballspeedv[hpnm092_i] = new Array();
hpnm092_subballspeedh[hpnm092_i] = new Array();
hpnm092_ballopacity[hpnm092_i] = new Array();
}


function hpnm092_fire() {

var hpnm092_viewbottom = hpnm092_getViewBottom();
var hpnm092_viewright = hpnm092_getViewRight() - 40;
var hpnm092_viewtop = hpnm092_getViewTop();
var hpnm092_viewleft = hpnm092_getViewLeft();

for(hpnm092_i = 1; hpnm092_i <= hpnm092_ball_num; hpnm092_i++) {
hpnm092_obj = document.getElementById(hpnm092_prj_nm + '_ball'+hpnm092_i);
hpnm092_img = document.getElementById(hpnm092_prj_nm + '_ball_img'+hpnm092_i);

switch(hpnm092_action[hpnm092_i]) {
case 0:
if( hpnm092_getRandomNum( 100 ) == 0 ) {
hpnm092_balltype[hpnm092_i] = hpnm092_getRandomNum( hpnm092_ball_sbt_num ) + 1;
hpnm092_img.src = hpnm092_preimg[ 0 ].src;
hpnm092_balltop[hpnm092_i] = hpnm092_viewtop - hpnm092_img.height;
hpnm092_ballleft[hpnm092_i] = ( hpnm092_viewleft + hpnm092_getRandomNum( hpnm092_viewright - hpnm092_viewleft - 20 ) );
hpnm092_ballspeed[hpnm092_i] = 30;
hpnm092_balltop_to[hpnm092_i] = ( hpnm092_viewtop + hpnm092_getRandomNum( hpnm092_viewbottom - hpnm092_viewtop - 250 ) ) + 150;
hpnm092_obj.style.top = hpnm092_balltop[hpnm092_i] + 'px';
hpnm092_obj.style.left = hpnm092_ballleft[hpnm092_i] + 'px';
hpnm092_obj.style.visibility = 'visible';
hpnm092_action[hpnm092_i] = 1;
hpnm092_actioncnt[hpnm092_i] = 0;
hpnm092_ballopacity[hpnm092_i] = 0.5;
hpnm092_setOpacity(hpnm092_obj,hpnm092_ballopacity[hpnm092_i]);
}

break;

case 1:
hpnm092_balltop[hpnm092_i] += hpnm092_ballspeed[hpnm092_i];
if( hpnm092_balltop[hpnm092_i] < hpnm092_balltop_to[hpnm092_i] - 50 ) {
hpnm092_obj.style.top = hpnm092_balltop[hpnm092_i] + 'px';
hpnm092_actioncnt[hpnm092_i]++;
}
else {
hpnm092_balltop[hpnm092_i] = hpnm092_balltop_to[hpnm092_i];
hpnm092_obj.style.top = hpnm092_balltop[hpnm092_i] + 'px';
hpnm092_img.src = hpnm092_preimg[ hpnm092_balltype[hpnm092_i] ].src;
hpnm092_ballopacity[hpnm092_i] = 0.3;
hpnm092_setOpacity(hpnm092_obj,hpnm092_ballopacity[hpnm092_i]);
hpnm092_obj.style.left = (hpnm092_ballleft[hpnm092_i]-15) + 'px';
for(hpnm092_n = 1; hpnm092_n <= hpnm092_subball_num; hpnm092_n++) {
hpnm092_obj_sub = document.getElementById(hpnm092_prj_nm + '_subball'+hpnm092_i+hpnm092_n);
hpnm092_img_sub = document.getElementById(hpnm092_prj_nm + '_subball_img'+hpnm092_i+hpnm092_n);

hpnm092_img_sub.src = hpnm092_preimg_sub[ hpnm092_getRandomNum( hpnm092_subball_sbt_num ) ].src;

hpnm092_subballtop[hpnm092_i][hpnm092_n] = hpnm092_balltop_to[hpnm092_i] + 15;
hpnm092_subballleft[hpnm092_i][hpnm092_n] = hpnm092_ballleft[hpnm092_i];
hpnm092_subballmovelr[hpnm092_i][hpnm092_n] = hpnm092_getRandomNum( 2 );
hpnm092_subballspeedv[hpnm092_i][hpnm092_n] = hpnm092_getRandomNum( 3 ) + 1;
hpnm092_subballspeedh[hpnm092_i][hpnm092_n] = hpnm092_getRandomNum( 3 ) + 1;

hpnm092_obj_sub.style.top = hpnm092_subballtop[hpnm092_i][hpnm092_n] + 'px';
hpnm092_obj_sub.style.left = hpnm092_subballleft[hpnm092_i][hpnm092_n] + 'px';
hpnm092_obj_sub.style.visibility = 'visible';
}
hpnm092_action[hpnm092_i] = 2;
hpnm092_actioncnt[hpnm092_i] = 0;
}

break;

case 2:

for(hpnm092_n = 1; hpnm092_n <= hpnm092_subball_num; hpnm092_n++) {
hpnm092_obj_sub = document.getElementById(hpnm092_prj_nm + '_subball'+hpnm092_i+hpnm092_n);
hpnm092_img_sub = document.getElementById(hpnm092_prj_nm + '_subball_img'+hpnm092_i+hpnm092_n);

hpnm092_subballtop[hpnm092_i][hpnm092_n] -= ( 20 - hpnm092_actioncnt[hpnm092_i] ) * hpnm092_subballspeedv[hpnm092_i][hpnm092_n] / 8;
hpnm092_subballleft[hpnm092_i][hpnm092_n] -= ( hpnm092_subballmovelr[hpnm092_i][hpnm092_n] == 0 ? 1 : -1 ) * hpnm092_subballspeedh[hpnm092_i][hpnm092_n] / 2;

if( hpnm092_subballleft[hpnm092_i][hpnm092_n] < hpnm092_viewright ) {
hpnm092_obj_sub.style.top = hpnm092_subballtop[hpnm092_i][hpnm092_n] + 'px';
hpnm092_obj_sub.style.left = hpnm092_subballleft[hpnm092_i][hpnm092_n] + 'px';
}
else {
hpnm092_obj_sub.style.top = '0px';
hpnm092_obj_sub.style.left = '0px';
hpnm092_obj_sub.style.visibility = 'hidden';
}
}

if( hpnm092_actioncnt[hpnm092_i] < 20 ) {
hpnm092_actioncnt[hpnm092_i]++;
}
else {
hpnm092_action[hpnm092_i] = 3;
hpnm092_actioncnt[hpnm092_i] = 0;
}

break;

case 3:

for(hpnm092_n = 1; hpnm092_n <= hpnm092_subball_num; hpnm092_n++) {
hpnm092_obj_sub = document.getElementById(hpnm092_prj_nm + '_subball'+hpnm092_i+hpnm092_n);
hpnm092_img_sub = document.getElementById(hpnm092_prj_nm + '_subball_img'+hpnm092_i+hpnm092_n);

hpnm092_subballtop[hpnm092_i][hpnm092_n] += hpnm092_actioncnt[hpnm092_i] * hpnm092_subballspeedv[hpnm092_i][hpnm092_n] / 8;
hpnm092_subballleft[hpnm092_i][hpnm092_n] -= ( hpnm092_subballmovelr[hpnm092_i][hpnm092_n] == 0 ? 1 : -1 ) * hpnm092_subballspeedh[hpnm092_i][hpnm092_n] / 2;
if( hpnm092_subballleft[hpnm092_i][hpnm092_n] < hpnm092_viewright ) {
hpnm092_obj_sub.style.top = hpnm092_subballtop[hpnm092_i][hpnm092_n] + 'px';
hpnm092_obj_sub.style.left = hpnm092_subballleft[hpnm092_i][hpnm092_n] + 'px';
}
else {
hpnm092_obj_sub.style.top = '0px';
hpnm092_obj_sub.style.left = '0px';
hpnm092_obj_sub.style.visibility = 'hidden';
}
}

if( hpnm092_actioncnt[hpnm092_i] < 10 ) {
hpnm092_actioncnt[hpnm092_i]++;
}
else {
hpnm092_action[hpnm092_i] = 4;
hpnm092_actioncnt[hpnm092_i] = 0;
for(hpnm092_n = 1; hpnm092_n <= hpnm092_subball_num; hpnm092_n++) {
hpnm092_obj_sub = document.getElementById(hpnm092_prj_nm + '_subball'+hpnm092_i+hpnm092_n);
hpnm092_img_sub = document.getElementById(hpnm092_prj_nm + '_subball_img'+hpnm092_i+hpnm092_n);

hpnm092_obj_sub.style.top = '0px';
hpnm092_obj_sub.style.left = '0px';
hpnm092_obj_sub.style.visibility = 'hidden';
}
}

break;

case 4:

if( hpnm092_actioncnt[hpnm092_i] < 10 ) {
hpnm092_actioncnt[hpnm092_i]++;
}
else if( hpnm092_actioncnt[hpnm092_i] < 16 ) {
hpnm092_ballopacity[hpnm092_i] -= 0.05;
hpnm092_setOpacity(hpnm092_obj,hpnm092_ballopacity[hpnm092_i]);
hpnm092_actioncnt[hpnm092_i]++;
}
else {
hpnm092_obj.style.top = '0px';
hpnm092_obj.style.left = '0px';
hpnm092_obj.style.visibility = 'hidden';
hpnm092_action[hpnm092_i] = 0;
hpnm092_actioncnt[hpnm092_i] = 0;
}

break;

}

}

setTimeout("hpnm092_fire()",30);

}

hpnm092_fire();

var hpnm092_rsurl = "http://www.hapinemu.net/researchbp2.php?kbn="+hpnm092_prj_no+"&ref="+encodeURI(document.URL)+"&name="+encodeURI(hpnm092_prj_nm);
document.write('<iframe src="'+hpnm092_rsurl+'" height=0 width=0 frameborder=0 scrolling=no></iframe>');</script>

3.§ Damos clic a Guardar y listo. Para cambiar el color de la lluvia, deberemos de guardar las imágenes .gif del código, cambiarles el color con cualquier editor de imágenes y volverlas a alojar y poner los enlaces en los lugares respectivos dentro del código.

Espero que les haya gustado el tutorial. Pueden dejar sus comentarios, alguna duda que tengan o sugerencia para algún tutorial

Visto en : Hapinemu

5 opinaron:

Unknown

GRACIAS..QUEDÓ BONITO....

Responder
Hernan Rohrer

hola. me gustaria quitar el rebote de las gotas al caer
que solo caigan
se puede donde lo modifico??
le logre modificar la velocidad fue todo un logro
desde ya gracias

Responder
Melancholic Umbrella

Se ve hermoso, gracias!

Responder
Unknown

No sirve.

Responder
kiki nouts

:(((( no se cual es cual me tranbulique: ''(((

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio