innerFade.jQuery - Crear efecto fade para añadir a nuestros bloques de publicidad, para mostrar noticias, imágenes, texto o cualquier elemento HTML contenido en un DIV.

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

Si quieres darle un aspecto mas profesional a tus páginas web, y necesitas mostrar imágenes con efecto de Fade, seguramente este ejemplo en jQuery te interese probar.

El ejemplo permite añadir un efecto de desvanecimiento con transparencia, y es ideal para crear por ejemplo banners publicitarios, para mostrar un conjunto de imágenes tipo slideshow simple, o para mostrar inclusive únicamente texto con efecto.

A continuación puedes ver mas información.

Mas información sobre el programa.

Indice - Contenido.

  1. Descripción del ejemplo para aplicar efecto animado.
  2. Ejemplos del script.
  3. Cómo instalar el script en la página web.

 

1 - Descripción del ejemplo para aplicar efecto animado.

Como se mencionó antes, este ejemplo puede ser muy útil para mostrar publicidad de Banners de forma mas profesional, además el efecto suele llamar mas la atención del usuario que visita la página, que si el elemento fuese estático.

Puede ser útil para:

  • Mostrar bloques de publicidad de imágenes, imágenes mas texto, o únicamente texto.
  • Para una sección de noticias del sitio.
  • Crear portfolios.
  • Mostrar publicidad de Adsense.
  • Mostrar imágenes de un producto o servicio de un catálogo.
  • Mostrar párrafos y texto en el contenido normal de la página.
  • Simple slideshow de fotos. Nota: Si necesita crear SlideShow con mas opciones no se recomienda este script ya que carece de opciones para manipular las imágenes.
  • Muchos otros usos.

InnerFade está diseñado para que se desvanezca cualquier elemento que se encuentre dentro de un contenedor o DIV.

Estos elementos puede ser cualquier cosa que desees, por ejemplo: imágenes, elementos de lista o divs.

2 - Ejemplos del script.

En el archivo de descarga, podrás ver un archivo index.html que contiene 4 ejemplos y el código fuente junto a una descripción.

Además, incluye una carpeta llamada JS que contiene dos archivos:

  • jquery.innerfade.js: Es el script para aplicar el efecto de fade.
  • jquery.js: Es la librería jQuery que necesita el archivo anterior para poder mostrar la simple animación.

3 - Cómo instalar el script en la página web.

Al abrir el archivo de ejemplo ( el fichero index.html), dentro del código fuente podrás ver que es muy simple su instalación y uso.

Antes que nada, es necesario añadir en la página web que queremos aplicar la animación o efecto de fade, los siguientes archivos en la sección HEAD de la página web.

Por ejemplo, el siguiente código fuente, y obviamente incluir en la carpeta raíz en donde se encuentra la página web, la carpeta JS.

Luego, también en la sección HEAD de la página, esta función que aplicará el efecto.

En el bloque de código anterior, podemos ver que, antes de la función innerfade, se especifica el DIV al que queremos aplicar el efecto, por ejemplo para un bloque de publicidad o para mostrar un bloque de noticias y novedades del sitio.

El resto del bloque de código, permite ajustar cinco opciones para el efecto.

  • animationtype: El tipo de animación. Puede ser fade o slide. Si no se especifica, se utiliza, se usará el efecto fade para la animación.
  • speed: Velocidad en milisegundos para el efecto de fade o de slide.
  • timeout: Duración.
  • type: Tipo de slide. se pueden pasar los valores: random y sequence
  • containerheight: alto del contenedor.

 


Requerimientos de instalación y uso.

Requiere : Librería jQuery ( Ya se incluye en el archivo de descarga )

Compatible con la mayoría de los navegadores web

  • Internet explorer 7, 8 y 9
  • FireFox 2.0 o superior.
  • Chrome.
  • Opera
  • Safari

Videos tutoriales.

No hay video tutoriales disponibles para este script..

Cambios, actualizaciones y mejoras del programa.

Buscar programas


Introduce los términos de búsqueda ...

Enlaces patrocinados.


Detalles y descargar

Web:
http://medienfreunde.com
Licencia:
Gratis
Versión:
--
Idioma:
Inglés
Programa actualizado:


Si te ha gustado esta página, programa o artículo puedes votar haciendo clic en este botón: