Ken Burns effect with Vegas 2

index.html

<div class="container">
  <h1>Vegas <strong>2</strong></h1>
  <h2>Background slideshow</h2>
  <p>Ken Burns effect</p>
</div>

<a href="http://vegas.jaysalvat.com">
  Download VEGAS
</a>

ken-burns-effect-with-vegas-2.markdown

Ken Burns effect with Vegas 2

Ken Burns effects with Vegas Background SlideShow V2, a jQuery/Zepto plugin.

A Pen by Terron Johnson on CodePen.

License.

script.js

$('body').vegas({
  overlay: true,
  transition: 'fade', 
  transitionDuration: 4000,
  delay: 10000,
  color: 'red',
  animation: 'random',
  animationDuration: 20000,
  slides: [
    { src: 'https://ununsplash.imgix.net/reserve/RONyPwknRQOO3ag4xf3R_Kinsey.jpg?fit=crop&fm=jpg&h=700&q=75&w=1600' },
    { src: 'https://unsplash.imgix.net/photo-1414438992182-69e404046f80?fit=crop&fm=jpg&h=625&q=75&w=1600' },
    { src: 'https://unsplash.imgix.net/photo-1414490929659-9a12b7e31907?fit=crop&fm=jpg&h=800&q=75&w=1600' },
    { src: 'https://unsplash.imgix.net/uploads/14129863345840df499fc/0165574c?fit=crop&fm=jpg&h=600&q=75&w=1600' }
  ]
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//jaysalvat.github.io/vegas/releases/latest/vegas.js"></script>

styles

<link href="//jaysalvat.github.io/vegas/releases/latest/vegas.min.css" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Raleway:400,900" rel="stylesheet" />