Animar y ajustar dinamicamente las imágenes de fondo con jQuery

por .

Backstretch es un plugin jQuery gratuito para animar con imágenes los fondos de nuestros sitios web, ajustando su tamaño según la resolución del navegador del visitante y de forma dinámica.

Un punto favorable de este plugin es que realiza la carga de imágenes una vez que se finalizó totalmente la carga del documento. Este punto es de vital importancia ya que las imágenes son, en general, de unas dimensiones muy importantes y cargarlas al mismo tiempo que al sitio podría afectar directamente al rendimiento y experiencia del usuario.

background animados con imagenes con jQuery

Ejemplo  de uso:

  var images = [
      "http://dl.dropbox.com/u/515046/www/outside.jpg"
    , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
    , "http://dl.dropbox.com/u/515046/www/cheers.jpg"
  ];

  $(images).each(function(){
    $("<img/>")[0].src = this;
  });

  var index = 0;

  $.backstretch(images[index], {speed: 500});

  setInterval(function() {
    index = (index >= images.length - 1) ? 0 : index + 1;
    $.backstretch(images[index]);
  }, 5000);

No olviden visitar el sitio oficial del plugin en donde van a encontrar distintos ejemplos de implementación.

Web: Backstretch

Categorizado en: