Tutorial de Halloween, agrega fantasmas a tu blog, ooooohh que miedo

5 Comments , , , , , Edit
Por @EVDani , desde Chile


Hola chic@s, hoy les traigo otro tutorial de halloween para sus blogs, ya queda poco así que pondremos más durante esta semana y la próxima. Es sumamente fácil, lo único que tienen que hacer es ir a Diseño y agregar un Gadget de HTML. Cuando lo agreguen pegan el siguiente código y le dan a guardar.
Este de aquí. Pueden ver como queda en este blog de prueba.
<script language="JavaScript">
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){

//Configuracion

var numberOfGhosts = 10; /* Numero de fantasmas */
var ghostSpeed = 0.9; /* Velocidad */
var inTheFace = 5;
var setTimeOutSpeed = 50; /* Velocidad a la que desaparecen */

//Fin de la configuracion

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";

for (i = 0; i < numberOfGhosts; i++){
document.write('<div id="ghosts'+(idx+i)+'"'
+' style="position:absolute;top:0px;left:0px;'
+'width:40px;height:40px;background-color:transparent;'
+'font-size:0px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyNu0mj0sg_ueudtCkPRGIndWnkeGw4jB5j71bGwGzUhdhqurHPThFEp2ICsPkuIncrLRXbSiybh23EtFKkTjcWFDtM8BiV8iU15jlPip_LL2BwOCw_pKtHE7saofYixcWWuJuoFhoY6o/s1600/ghost.gif" class="ghost" width="70"/></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] = 10 * (dfc[s] + inTheFace) / 100;
vel[s] = ghostSpeed * 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 < numberOfGhosts; 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 < numberOfGhosts; i++){
strs[i] = document.getElementById("ghosts"+(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);
}
})();
}//End.

</script>

<style>
.ghost {
filter:alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
-khtml-opacity: 0.3;
}
html {
overflow-x:hidden;
}
</style>

Ya saben, para ver el anterior tutorial para halloween visita este link, y para ver los otros tutoriales pueden ir a Todo para tus blogs.





CONVERSATION

5 ya son Blogger@s:

  1. Patricia K. Olivera20 de octubre de 2011, 22:45

    está buenísimo, me lo llevo ya!!!
    Gracias por compartir!!

    Besos!!

    ResponderEliminar
  2. areyourfantasy21 de octubre de 2011, 5:24

    es realmente bueno gracias por compartirlo me lo llevo

    ResponderEliminar
  3. Magda21 de octubre de 2011, 13:03

    Ainsssssssssssss pues a mi no me sale y me encantaria tenerlo jooooo q pena, q puedo hacer???

    ResponderEliminar
  4. Be Bloggera21 de octubre de 2011, 16:12

    prueba ahora magdalena, había un error en el código, ve si te resulta y nos avisas

    ResponderEliminar
  5. Magda24 de octubre de 2011, 4:58

    Pues parece ser q sigue sin funcionar, con lo bonito q hace en el blog :( Tranquila, no pasa nada, para otro Halloween será
    Besos

    ResponderEliminar

Todo comentario que no tenga relación con el post o sobrepase los límites de la libre expresión, será moderado y no saldrá publicado.

Suscribirse a: Enviar comentarios ( Atom )
Back
to top