SummArg | Cursos y recursos para webmasters

09/06/2011

Imágenes de fondo en tamaño completo y animadas con Vegas Background

Vegas Background es un plugin jQuery que nos permite colocar imágenes para el fondo de nuestra web sin importar la medida en que será visualizada ya que se adapta a todas las resoluciones automáticamente. Además nos permite configurar el modo slideshow, en el que las imágenes de fondo cambiarán con un efecto fade.


Para colocarlo en una web primero debemos adjuntar los archivos del plugin.

<script type="text/javascript" src="/jquery.js"> </script>
<script type="text/javascript" src="/vegas/jquery.vegas.js"> </script>
<link rel="stylesheet" type="text/css" href="/vegas/jquery.vegas.css" />

Luego pasamos la configuración del plugin indicando una ruta de imágenes y, en este caso, el tiempo que tendrá el efecto fade en cada una (en milisegundos).

<script>
$.vegas('slideshow', {
backgrounds:[
{ src:'/img/bg1.jpg', fade:1000 },
{ src:'/img/bg2.jpg', fade:1000 },
{ src:'/img/bg3.jpg', fade:1000 }
]
})('overlay', {
src:'/vegas/overlays/11.png'
});
</script>

Su documentación es muy completa y pueden descargarlo de su sitio oficial. Nos enteramos de este plugin gracias a Kabytes.

Dejar un comentario