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 Jay Salvat on CodePen.

License.

script.js

// VEGAS
// Background SLideShow
// Codepen Demo
// http://vegas.jatysalvat.com

// Pictures from Unsplash
// http://unsplash.com/

$('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>

style.scss

body {
  font-family: Raleway;
  font-weight: 900;
  color: #fff;
  background: #000;
}

h1, h2, p, strong {
  margin: 5px 0;
  padding: 0;
  margin-right: 130px;
  line-height: 1em;
  text-align: right;
  text-transform: uppercase;
  text-shadow: 
    -1px -1px 1px rgba(#000, .3),
     1px 1px 1px rgba(#000, .3), 
     0 0 10px #000;
}

h1 {
  font-size: 5.5em;
  letter-spacing: -10px;
  margin-bottom: -10px;
}

h1 strong {
  position: absolute;
  top: -50px;
  right: 0;
  font-size: 235px;
  opacity: .5;
  margin: 0;
}

h2 {
  opacity: .6;
  font-size: 1.7em;
}

p {
  font-size: 2em;
}

a {
  position: absolute;
  left: 1em;
  bottom: 3em;
  border: 3px solid #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px #000;
  padding: 20px 40px;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 0 5px #000;
  font-size: 13px;
  color: #fff;
  animation: pulse 4s infinite;
  
  @media screen and (max-width: 720px) { 
    display: none;
  }
}

.container {
  position: absolute;
  bottom: 2em;
  right: 2em;
}

.vegas-overlay {
  opacity: .2;
}

.vegas-timer-progress {
  background: #fff;
}

@keyframes pulse {
  0% {
    transform: scale(.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(.8);
  }
}

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" />