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.
