TecnoFiccion

TecnoFiccion
TecnoFiccion

viernes, 29 de marzo de 2013

Banner Animado en HTML5



Bueno esta vez, te ensayaremos como crear un Banner Animado para una página WEB o Blog sin necesidad de Usar Pluing de Terceros
Para crear el Banner podemos Usar un Editor de Texto como Notepad++, Ultraedit o si quieren usar Dreamweaver no hay problema.
Les Mostrare paso a Paso con Imágenes
Esto sería lo Principal

Ahora Crearemos un Div con un ID, el Cual luego lo Configuraremos

Ahora crearemos un Style dentro del Head y Configuraremos el Div.

Podemos usar imágenes Vectoriales .svg, la gran ventaja es que las imágenes no se pixelan al realizarle un Zoom a la página, ya que no está basado en pixeles si no en vectores lo cual la calidad de la imagen nunca se pierde, para el ejemplo use una imagen .png.
Lo que hicimos fue configurar box-shadow con 0px de bordes y 5px de degradado, con color Negro y una transparencia de 0.5.

Se configuro una Animación de 15s

Ahora lo más importante es la configuración del KeyFrames que lo que hace es realizar unas interpolaciones entre las propiedades especificadas durante un tiempo específico, en este caso le dará la visualización del zoom a la imagen en el banner, tiene compatibilidad con Mozilla

Si lo deseas compatible con un navegador como Chrome entonces así seria

Lo que se hace es sencillo cuando carga la página al inicio La altura del banner empieza a 200px, con el tamaño de la imagen original, al 100% la imagen tendrá el doble de su tamaño y el banner un 0% de altura el cual hace que desaparezca y vuelva y cargue cumplido el tiempo.
Ahora bien si deseas que cuando se pase el puntero por la imagen realice el mismo Efecto, entonces tendrías que comentarear la animación en el #DivBanner y poner esta configuración dentro del Style.

Ahora si deseas que la animación sea infinita, simplemente al #DivBanner le agregarías lo siguiente y comentareas la animación anterior.

así seria la imagen Final

Es algo sencillo lo que se hizo y esperamos a alguien le pueda servir.
Aquí el enlace del proyecto por si lo deseas descargar

Un vídeo desde el Celular de como se ve el Efecto
Video

No hay comentarios:

Publicar un comentario