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)

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