Jquery fire plugin: generador de animaciones y texturas de fuego
Jquery fire plugin es un plugin de Jquery para crear animaciones e imágenes de fuego en tu página, o para generarlas, copiarlas y usarlas independientemente de este plugin. Si usas la primera opción, las imágenes no ocuparán nada (sólo los 4.5kb que ocupa el plugin comprimido en gzip y lo que ocupe la librería de Jquery). El único problema, es que al usar el nuevo elemento canvas de HTML5, no funciona en Internet Explorer 7 o cualquier versión inferior, pero en estos casos puedes hacer que aparezca una imagen directamente con los comentarios condicionales de IE. Para generar la imagen de la textura de fuego puedes usar el siguiente formulario:
Funcionamiento
Debes incluir la librería de Jquery y la del plugin, la última versión es la 0.62, la cual puedes descargar en este enlace o en los siguientes ejemplos de uso:
Descargar ejemplo simple con varios elementos
La funcionalidad sobre Internet Explorer 8 está limitada sólo al modo imagen y además tienes que incluir un archivo Javascript adicional que se incluye en el ejemplo siguiente:
Descargar ejemplo simple que funciona también en Internet Explorer 8
Código Javascript para llamar al plugin, con algunos parámetros de ejemplo:
$(document).ready(function() {
$('#fire').fire({
speed:20,
maxPow:5,
gravity:0,
flameWidth:3,
flameHeight:0,
fadingFlameSpeed:8
});
});
Podemos asignar el efecto a cualquier tipo de elemento, preferiblemente un div:
El ancho y el alto del efecto se puede especificar en los parámetros anteriores o en el código CSS:
#fire{width:150px;height:100px;}
Código HTML:
<div id="fire"></div>
También podemos usarlo directamente sobre un objeto canvas:
<canvas id="fire" width="150" height="100"></canvas>
Parámetros:
El parámetro más importante es el parámetro mode, que se explica a continuación, para entender y poder probar el resto de parámetros se recomienda usar el formulario de arriba.
mode String Por defecto:'anim'
Establece el modo de funcionamiento del plugin, los posibles valores son:
'anim': Modo animación. El fuego es una animación.
'background': Modo fondo. El fuego es una imagen fija (establecida mediante la propiedad background-image de CSS). Si el tamaño del elemento sobre el que se aplica tiene un ancho mayor que el establecido con el parámetro width, entonces el fuego se dibuja como una textura que se puede repetir sin cortes en el eje X (apreciable sólo si el parámetro 'burnBorders' es true).
'image': Modo imagen. El fuego es una imagen fija que se crea dentro de un nuevo elemento img.
Establecer el modo:
$(document).ready(function() {
$('#fire').fire({mode:'anim'});
});
Parámetros globales
Estos parámetros afectan a todos los modos de funcionamiento ('anim','image' y 'background').
Ancho de la imagen o animación.
Si no se establece en la inicialización se cogerá el ancho del elemento HTML. Si no se establece el ancho ni en la inicialización ni en el elemento HTML, arrojará una excepción.
height Entero Por defecto:null
Alto de la imagen o animación.
Si no se establece en la inicialización se cogerá el alto del elemento HTML. Si no se establece el alto ni en la inicialización ni en el elemento HTML, arrojará una excepción.
Valor entre 0 y 10 que determina la máxima potencia de fuego.
Cambiando este valor haremos que el fuego sea más o menos intenso y llegue más o menos alto.
Valor entre 0 y el valor del parámetro 'maxPow' que determina la mínima potencia de fuego.
Este valor sólo es apreciable si el parámetro maxPowZone no tiene el valor 'uniform', ya que determina la mínima intensidad del fuego en el resto de modos de dicho parámetro.
maxPowZone String Por defecto:'uniform'
Establece en que parte del ancho del efecto, estará la máxima y mínima potencia del fuego, establecidas con los parámetros maxPow y minPow, respectivamente.
Posibles valores:
- 'uniform': Todas las partes aparecen a la máxima potencia.
- 'left': La parte izquierda aparece a máxima potencia y la derecha a la mínima.
- 'right': La parte derecha aparece a máxima potencia y la izquierda a la mínima.
- 'center': La parte central aparece a máxima potencia y los lados a la mínima.
- 'sides': La parte central aparece a mínima potencia y los lados a la máxima.
- 'random': Cambia de modo aleatoriamente cada vez que se dibuja el fuego.
Valor entre 0 y 10 que determina la gravedad del planeta.
Afecta a la altura del fuego y a la forma de las llamas.
fireTransparency Entero Por defecto:0
Valor entre 0 y 100.
Incrementarlo permite que el nivel de transparencia de las llamas aumente conforme se van desvaneciendo. Este parametro no funciona en Internet Explorer 8.
Un valor de 0 deja el fondo totalmente negro.
globalTransparency Entero Por defecto:0
Valor entre 0 y 100.
El nivel de transparencia global asigna un nivel de transparencia a todo el efecto de fuego.
flameWidth Entero Por defecto:2
Valor entre 0 y 4.
Modifica el ancho de las llamas
flameHeight Entero Por defecto:2
Valor entre 0 y 4
Modifica la altura de las llamas.
fadingFlameSpeed Entero Por defecto:2
Valor entre 0 y 20.
La velocidad de desvanecimiento del fuego produce que las llamas se desvanezcan antes conforme se aumenta este valor.
Recorta el fuego por debajo de la altura que se especifique.
plasm Booleano Por defecto:false
Cuando es true activa el modo plasma que hace que las llamas tengan un aspecto más granulado que en el modo normal.
Este modo consume ligeramente menos CPU.
cartoon Booleano Por defecto:false
Activado da aspecto de dibujo animado al fuego.
burnBorders Booleano Por defecto:true
Si establecemos el parámetro burnBorders a false, no aparecerá fuego en los bordes derecho e izquierdo.
Parámetros exclusivos del modo animación
mode:'anim'
Valor mínimo 1.
Imágenes por segundo a las que se desea que trabaje.
Dependiendo principalmente del navegador, el tamaño establecido y el equipo en el que se ejecuta, puede que el valor real no alcance el deseado.
showFps Boolean Por defecto:false
Muestra, en la esquina superior derecha, el número real de imágenes por segundo a las que está funcionando.
mouseEffect Boolean Por defecto:true
Si está activado, aparece una llama cuando se mueve el ratón por encima.
mouseId String Por defecto:nada
Aquí puedes asignar un bloque que escuche los eventos del ratón diferente al del efecto de fuego, especificando el identificador. Esto es util cuando tienes un bloque semi-transparente sobre el efecto de fuego y quieres que funcione el efecto del ratón. Ejemplo:
<div id="mouseListener" style="position:absolute;width:100px;height:100px;z-index:2">
Texto sobre el efecto de fuego
</div>
<div id="fireEffect" style="position:absolute;width:100px;height:100px;z-index:1"></div>
<script language="javascript">
$('#fireEffect').fire({mouseId:mouseListener});
</script>
Parámetros exclusivos de los modos imagen y fondo
mode:'image'
mode:'background'
steps Entero Por defecto:120
Cuando se inicializa el efecto en el modo animación, el fuego aparece desde abajo hasta que alcanza su máxima altura. Este parámetro indica el número de pasos que deben transcurrir antes de coger la imagen que se mostrará en el navegador.
Dependiendo de la configuración del resto de parámetros puede ser necesario modificar este valor para obtener la imagen deseada.
Cuanto más alto sea este valor, más tardará en aparecer el resultado.
showLoad Boolean Por defecto:true
Muestra el porcentaje de renderizado de la imagen, mientras ésta se calcula.
Opcionalmente se puede añadir un mensaje al lado de este porcentaje con el parámetro loadMessage.
LoadMessage String Por defecto:''
Establece el mensaje que se mostrará al lado del porcentaje de renderizado mientras se calcula la imagen. El parámetro showLoad debe ser true para que se muestre.
Funciones:
change
En el modo animación podemos cambiar cualquier parámetro del mismo, mientras se está visualizando mediante la función change. Ejemplo:
$('#fire').fire('change',{plasm:true});
play
En el modo animación, hace que esta continue si previamente se ha parado con la función stop. Ejemplo:
$('#fire').fire('play');
stop
En el modo animación, hace que esta se pare si se está moviendo.
$('#fire').fire('stop');
playStop
En el modo animación, hace que se pare si se está moviendo o que continue si está parada. Ejemplo:
$('#fire').fire('playStop');
getDataURI
En cualquiero modo, devuelve la imagen que está mostrando actualmente códificada con el esquema data:uri
$('#fire').fire('getDataURI');