/ JavaScript

Implementar Librería Vegas Background SlideShow

Vegas es una librería JavaScript que sirve para crear Background SlideShow (Presentación de diapositivas de fondo), esta librería nos permite crear diapositivas de fondo con transiciones, animaciones agradables de forma sencilla, lo cual veremos como implementarlo a continuación.

Implementación de la Librería Vegas Background SlideShow

Primero tenemos que descargar la librería Vegas Background SlideShow desde su página oficial, en esta página también podemos encontrar la documentación y más.

Código HTML

Código html esencial para que funcione correctamente la librería Vegas Background SlideShow.

<html>
 <head>
  <meta charset="UTF-8">
  <title>Vegas Background SlideShow</title>
  <!--CSS Vegas Background SlideShow-->
  <link rel="stylesheet" href="css/vegas.css">
  <style>
   .vegas_transition, .vegas_animation, #overlay{margin: 0 auto;height: 60vh;width: 80%;}
  </style>
 </head>
<body>
 <!--jQuery importante-->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <!--Librería js Vegas Background SlideShow-->
 <script src="js/vegas.min.js"></script>
 <!--Código JavaScript-->
 <script>
  //Con este código iniciamos Vegas Background SlideShow en la etiqueta body
  $('body').vegas({
   slides: [
    { src: "fondos/fondo.jpg" },
    { src: "fondos/fondo02.jpg" },
    { src: "fondos/fondo03.jpg" },
    { src: "fondos/fondo04.jpg" },
    { src: "fondos/fondo05.jpg" }
   ]
  });
</script>
</body>
</html>

Transiciones

También podemos agregar transiciones a nuestros proyectos Vegas Background SlideShow.

Código HTML

<div class="vegas_transition"></div>

Código JavaScript

<script>
//Con este código iniciamos Vegas Background SlideShow en la etiqueta que tiene la clase .vegas_transition
  $('.vegas_transition').vegas({
   slides: [
    { src: "fondos/fondo.jpg" },
    { src: "fondos/fondo02.jpg" },
    { src: "fondos/fondo03.jpg" },
    { src: "fondos/fondo04.jpg" },
    { src: "fondos/fondo05.jpg" }
   ],
   transition: 'zoomOut'
  });
</script>

Puedes utilizar estas diferentes transiciones que viene integrado con la librería Vegas Background SlideShow.

fade, fade2, slideLeft, slideLeft2, slideRight, slideRight2, slideUp, slideUp2, slideDown, slideDown2, zoomIn, zoomIn2, zoomOut, zoomOut2, swirlLef, tswirlLeft2, swirlRight, swirlRight2, burn, burn2, blur, blur2, flash, flash2

Transiciones Aleatorias

También podemos agregar una serie de transiciones para que se ejecuten de manera aleatoria a través de un arreglo [ ].

<script>
  $('.vegas_transition').vegas({
   slides: [
    ...
   ],
   //código agregado
   transition: [ 'fade', 'zoomOut', 'swirlLeft' ]
  });
</script>

Animaciones

También podemos agregar animaciones a nuestros proyectos Vegas Background SlideShow.

Código HTML

<div class="vegas_animation"></div>

Código JavaScript

<script>
//Con este código iniciamos Vegas Background SlideShow en la etiqueta que tiene la clase .vegas_animation
  $('.vegas_animation').vegas({
   slides: [
    { src: "fondos/fondo.jpg" },
    { src: "fondos/fondo02.jpg" },
    { src: "fondos/fondo03.jpg" },
    { src: "fondos/fondo04.jpg" },
    { src: "fondos/fondo05.jpg" }
   ],
   animation: 'kenburns'
  });
</script>

Puedes utilizar estas diferentes animaciones que viene integrado con la librería Vegas Background SlideShow.

kenburns, kenburnsUp, kenburnsDown, kenburnsRight, kenburnsLeft, kenburnsUpLeft, kenburnsUpRight, kenburnsDownLeft, kenburnsDownRight, random

Animaciones Aleatorias

También podemos agregar una serie de animaciones para que se ejecuten de manera aleatoria a través de un arreglo [ ].

<script>
$('.vegas_animation').vegas({
   slides: [
    ...
   ],
   //código agregado
   animation: [ 'kenburnsUp', 'kenburnsDown', 'kenburnsLeft', 'kenburnsRight' ]
  });
</script>

Superposiciones

Puedes agregar superposiciones que vendría a ser una especie de texturas con la propiedad overlay, al activar esta propiedad se activa la clase .vegas-overlay

Estas texturas son pequeñas imágenes que se encuentran en la carpeta overlay y son 9 imágenes [01.png,..,09.png]

Por defecto esta activado la imagen 02.png, para modificarlo solo hay que cambiar la ruta de la imagen en el archivo css de nombre vegas.css

/*Si deseas probar busca esta clase en el archivo vegas.css y modifica en nombre de la imagen a cargar.*/
.vegas-overlay {
    opacity: .5;
    background: transparent url("overlays/02.png") center center repeat;
}

Código HTML

<div id="overlay"></div>

Código JavaScript

<script>
  //Con este código iniciamos Vegas Background SlideShow en la etiqueta que tiene id #overlay
  $('#overlay').vegas({
   slides: [
    { src: "fondos/fondo.jpg" },
    { src: "fondos/fondo02.jpg" },
    { src: "fondos/fondo03.jpg" },
    { src: "fondos/fondo04.jpg" },
    { src: "fondos/fondo05.jpg" }
   ],
   overlay: true
  });
</script>

Te recomiendo visitar el siguiente enlace: Settings - Vegas Background SlideShow, aquí encontraras información interesante te recomiendo que lo leas.


Ver Código en GitHub

Luis Rene Mas Mas

Luis Rene Mas Mas

Soy desarrollador front-end, me encanta las nuevas tecnologías web, administrar este blog es mi pasatiempo favorito.

Leer Más