Cielo estrellado

Me pregunta Corina administradora del blog Hogar Crecer por la entrada de Efecto meteorito.

"Me podrás decir si los cuadraditos de este efecto, son caracteres unicode? Se pueden cambiar por una estrella o algo así?"

Me anime y modifique el código.

Ahora en lugar de los cuadraditos va a mostrar una imagen.

En el ejemplo puse una imagen de una pequeña estrella, la que se puede cambiar por otra.

Acá te dejo el código modificado.

Ir a Diseño, Edición de HTML y justo arriba de </head>

Poner el siguiente código:

<script type="text/javascript">
//http://loseasi.blogspot.com
//<![CDATA[
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){

(function(){

//Configure here.

var numberOfStars = 20;

var starSpeed = 0.9;

var inTheFace = 5;

var setTimeOutSpeed = 30;

//End config.

var h,y,cy,cx,sy,sx,ref,field,oy1,oy2,ox1,ox2,iy1,iy2,ix1,ix2;
var d = document;
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var pi1 = 180/3.14;
var pi2 = 3.14/180;
var y = [];
var x = [];
var strs = [];
var gro = [];
var dim = [];
var dfc = [];
var vel = [];
var dir = [];
var acc = [];
var dtor = [];
var xy2 = [];
var idx = document.getElementsByTagName('div').length;
var zip = [];
var pix = "px";

//Floor or round anything possible for Netscape.
//Slashes CPU strain in Opera too.

for (i = 0; i < numberOfStars; i++){
document.write('<div id="stars'+(idx+i)+'"style="position:absolute;top:0px;left:0px;z-index:99999999999999999;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigKDwAWfbu2O0yCrtk3idG01z7zSWG6yNTrtFzy3rV8m8hyphenhyphenpBBJ2LLfqo6WfeZ7PKfBN_7gDB2Lt2TgqEHl0k7ScC7g9zmb_JxBrO1bP7YAWQ_GjEv1sjWHZ3xFacJlEJ8jyo4iKx0Jkc/s1600/star.png" class="stars" /></div>');
}
if (domWw) ref = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
ref = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
ref = d.body;
}
}

function win(){
var mozBar = ((domWw) &&
ref.innerWidth != d.documentElement.offsetWidth)?20:0;
h = (domWw)?ref.innerHeight:ref.clientHeight;
w = (domWw)?ref.innerWidth - mozBar:ref.clientWidth;
cy = Math.floor(h/2);
cx = Math.floor(w/2);

oy1 = (75 * h / 100);
oy2 = (oy1 / 2);
ox1 = (75 * w / 100);
ox2 = (ox1 / 2);

iy1 = (18 * h / 100);
iy2 = (iy1 / 2);
ix1 = (18 * w / 100);
ix2 = (ix1 / 2);

field = (h > w)?h:w;
}

function rst(s){
var cyx;
sy = (domSy)?ref.pageYOffset:ref.scrollTop;
sx = (domSy)?ref.pageXOffset:ref.scrollLeft;
acc[s] = 0;
dim[s] = 1;
xy2[s] = 0;
cyx = Math.round(Math.random() * 2);
if (cyx == 0){
y[s] = (cy - iy2) + Math.floor(Math.random() * iy1);
x[s] = (cx - ix2) + Math.floor(Math.random() * ix1);
}
else{
y[s] = (cy - oy2) + Math.floor(Math.random() * oy1);
x[s] = (cx - ox2) + Math.floor(Math.random() * ox1);
}
dy = y[s] - cy;
dx = x[s] - cx;
dir[s] = Math.atan2(dy,dx) * pi1;
dfc[s] = Math.sqrt(dy*dy + dx*dx) ;
zip[s] = 50 * (dfc[s] + inTheFace) / 100;
vel[s] = starSpeed * dfc[s] / 100;
dtor[s] = (field - dfc[s]);
if (dtor[s] < 1) dtor[s] = 1;
gro[s] = 0.003 * dtor[s] / 100;
}

function animate(){
for (i = 0; i < numberOfStars; i++){
y[i] += vel[i] * Math.sin(dir[i] * pi2);
x[i] += vel[i] * Math.cos(dir[i] * pi2);
acc[i] = (vel[i] / (dfc[i] + (vel[i] * zip[i])) * vel[i]);
vel[i] += (acc[i]);
dim[i] += gro[i] + acc[i] / zip[i];
xy2[i] = dim[i] / 2;
if (y[i] < 0 + xy2[i] ||
x[i] < 0 + xy2[i] ||
y[i] > h - xy2[i] ||
x[i] > w - xy2[i]){
rst(i);
}
strs[i].top = (y[i] - xy2[i]) + sy + pix;
strs[i].left = (x[i] - xy2[i]) + sx + pix;
strs[i].width = (strs[i].height = (Math.round(dim[i])) + pix);
}
setTimeout(animate,setTimeOutSpeed);
}

function init(){
win();
for (i = 0; i < numberOfStars; i++){
strs[i] = document.getElementById("stars"+(idx+i)).style;
rst(i);
}
animate();
}

if (window.addEventListener){
window.addEventListener("resize",win,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",win);
window.attachEvent("onload",init);
}
})();
}
document.documentElement.style.overflowX="hidden";
//]]>
</script>

Cambiar la cantidad de imágenes donde dice: (var numberOfStars = 20;)

Cambiar las velocidades en: (var starSpeed = 0.9;) y (var setTimeOutSpeed = 30;)

Cambiar la imagen: (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigKDwAWfbu2O0yCrtk3idG01z7zSWG6yNTrtFzy3rV8m8hyphenhyphenpBBJ2LLfqo6WfeZ7PKfBN_7gDB2Lt2TgqEHl0k7ScC7g9zmb_JxBrO1bP7YAWQ_GjEv1sjWHZ3xFacJlEJ8jyo4iKx0Jkc/s1600/star.png)

Ver Ejemplo: