Existen multitud de plugins para jQuery, pero no son muchos los que nos permiten incorporar una imagen de fondo el cual se adapte a la ventana sea cual sea su tamaño. El plugin que os presentamos, además de permitirnos realizar diseños web con un fondo adaptable al tamaño de la ventana, nos permitirá ir cambiando la imagen de fondo como si de un slideshow se tratara.

Se trata de Vegas Background jQuery Plugin y en su página web podremos ver una demostración de su herramienta.

El plugin será muy fácil de integrar en nuestros diseños web, lo único que deberemos hacer es cargar la librería jQuery:

<script type="text/javascript" src="/vegas/jquery.js"></script>

Cargar el plugin de Vegas:

<script type="text/javascript" src="/vegas/jquery.vegas.js"></script>

Cargar los estilos:

<link rel="stylesheet" type="text/css" href="/vegas/jquery.vegas.css" />

Y finalmente inicializar el plugin:

  $.vegas({
    src:'/images/background.jpg'
  })('overlay', {
    src:'/vegas/overlays/13.png'
  });

Para conseguir un efecto slideshow deberemos añadir varias imágenes de la siguiente manera:

    $.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'
    });

Seleccionando las imágenes correctas, ¡conseguiremos unos efectos realmente buenos!

Además, este plugin tiene una particularidad que nos permitirá sobreponer una imagen con una matriz para dar diferentes efectos a las imágenes:

En la imagen anterior se puede apreciar el efecto de sobreponer ésta imagen:

Utilizando diferentes patrones, podremos conseguir buenos efectos y además podremos utilizar casi cualquier tipo de imagen ya que, con un patrón oscuro, no nos molestará para los textos de la página web que estemos desarrollando.

Esperamos que os haya gustado la explicación y no dudéis en compartirla mediante las redes sociales siguientes.