Bonito Efecto Puffing Smoke para el Blog con jQuery

Es impresionante ver la cantidad y calidad de los efectos que se pueden realizar con jQuery, en este post veremos un efecto el cual se llama "Smoke Puff Effect" y ha sido creado por Gaya de Gayadesign.

El nombre del efecto traducido al español es "Efecto soplo de humo" y puedes verlo funcionando en mi blog de pruebas.

Para ponerlo en tu ve a Diseño > Edición de HTML > ahora nos aseguraremos de tener en nuestra plantilla la librería jQuery v1.3.2, es posible que la tengas si has realizado otro efecto con esta librería, si la tienes salta este paso, de lo contrario con la ayuda de (Ctrl + F) busca la etiqueta </head> y justo antes pega el siguiente código que corresponde a la librería jQuery v1.3.2:

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/jQuery1.3.2.min.js' type='text/javascript'/>

Ya tenemos la librería en nuestra plantilla, ahora tenemos que añadir el Script que animará al efecto, para ello copia el siguiente código y pégalo después del anterior código que pegaste justo antes de la etiqueta </head>:

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/smokeEffect.js' type='text/javascript'/>

Ahora toca añadir la hoja de estilo CSS, con la ayuda de (Ctrl + F) busca la etiqueta ]]></b:skin> y justo antes pega el siguiente código:

.puff {
position: absolute;
width: 0px;
height: 0px;
}

Por último ve a Diseño > Añadir gadget > elije > HTML/Javascript > pega el siguiente código para llamar al efecto:

<div id="smokeSpawnPoint">
<img src='../url/de/tu/imagen1.png' alt='Chimenea' />
</div>

<script type='text/javascript'>
SmokeEffect.makeEffect("smokeSpawnPoint", 24, 12);
SmokeEffect.imgLocation = "../url/de/tu/imagen2.png";
SmokeEffect.smokeWidth = 100;
SmokeEffect.smokeHeight = 100;
</script>

Cambia donde dice url de tu imagen1 por la dirección de la imagen de la que quieres que salga el efecto, y en imagen2  por la dirección de la imagen que quieres que saldrá expulsada con la animación.
Lo que está en color verde son los valores para utilizar en una imagen de chimenea como la que pueden ver el ejemplo, para que el humo salga por el orificio de la chimenea el valor es 24,12 pero si utilizan otra imagen pueden jugar con esos valores ajustarlo hasta que les salga bien.

No les dejo las imágenes del ejemplo por que no tengo permiso para compartir dichas imágenes.


Descargar Script