Vegas Background es un plugin jQuery muy atractivo que nos permite animar fondos, es pocas palabras podríamos definirlo como un slider de imágenes que corre como fondo. Una alternativa muy simple y original para darle vida a sitios simples y minimalistas.
El plugin cuenta con distintas opciones de configuración, una de ellas y muy interesante, es la que nos permite crear un visor de diapositivas, en donde las imágenes se cargan directamente en el background de nuestro sitio. una excelente manera de aprovechar al máximo las dimensiones del navegador de nuestros visitantes.
Otro detalle importante es que las imágenes se escalan automáticamente según la resolución del navegador, inclusive se autoescalan si modificamos manualmente el tamaño de la ventana.
El plugin contempla perfectamente que las imágenes de alta resolución son de por si bastante pesadas, razón por la cual el autor de este plugin incorporo un cargando, que se muestra en el momento preciso en que las imágenes son cargadas, evitando de esta forma que se vea la carga parcial de las distintas fotografías.
Ejemplo de instalación:
$.vegas('slideshow', { backgrounds:[ { src:'/img/background1.jpg' }, { src:'/img/background2.jpg' }, { src:'/img/background3.jpg' } ] })('overlay');
Les recomiendo que prueben la demostración online.
Web: Vegas Background
Fran Jiménez
13 años ago
me parece muy interesante lo que has compartido. No tengo mucha idea de programación, lo básico, me gustaría aplicar lo que expones pero no sé cómo hacerlo. No sé si es muy engorroso de explicar o existe algún tutorial que pueda usar. Gracias por anticipado
Imágenes de fondo en tamaño completo y animadas con Vegas Background | SummArg
13 años ago
[…] Su documentación es muy completa y pueden descargarlo de su sitio oficial. Nos enteramos de este plugin gracias a Kabytes. […]
jquery interesante
13 años ago
[…] http://www.kabytes.com/programacion/…#comment-96759 […]
Jquery interesante | Da Webmasters
11 años ago
[…] parece muy interesante el jquery sigguiente http://www.kabytes.com/programacion/…#comment-96759 No tengo mucha idea de programación, lo básico, me gustaría aplicar lo que se expone pero no sé […]
Pablo
8 años ago
backgrounds:[
{ src:’/img/background1.jpg’ },
{ src:’/img/background2.jpg’ },
{ src:’/img/background3.jpg’ }
]
si quisiera que esta parte trajera las imagens de html es decir de una lista se podria hacer, o como puedo traer imagenes de una base de datos mysql y colarlo en el backgroung, te agradeceria mucho por la ayuda