Imprimir
PDF

Fondo web animado mediante un plugin para jQuery

Fondo web animado mediante un plugin para jQuery

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:

Efecto de superposición de capas

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

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.


votar

COMENTARIOS:

Hosting
Asesoramiento

Asesoramiento

Aproveche nuestra experiencia como guía en el desarrollo de cualquier proyecto web. Somos parte activa en la creación de contenidos, en la mejora de la usabilidad y las buenas prácticas en general.

Compromiso

Compromiso

Desarrollamos de principio a fin todos nuestros proyectos y facilitamos un continuo seguimiento de su desarrollo hasta conseguir su satisfacción.

Calidad

Calidad

Garantizamos la mayor calidad, eficiencia y aprovechamiento de las tecnologías en el desarrollo de todos nuestros proyectos.

Experiencia

Experiencia

Contamos con más de 10 años de experiencia en el desarrollo de aplicaciones web para grandes y medianas empresas.

Innovación

Innovación

Para poner a disposición de nuestros clientes las últimas tecnologías desarrolladas.