JSFiddle - React, Tailwind, and code Playground

by Jordan Dayton

HTML

<div id="slideshow">
	  <img src="https://dl.dropboxusercontent.com/u/2975422/NEVER%20DELETE%20THIS%20HOSTED%20CONTENT/b2.png">
	  <img src="https://dl.dropboxusercontent.com/u/2975422/NEVER%20DELETE%20THIS%20HOSTED%20CONTENT/b2.png">
    <img src="https://dl.dropboxusercontent.com/u/2975422/NEVER%20DELETE%20THIS%20HOSTED%20CONTENT/b2.png">
    <img src="https://dl.dropboxusercontent.com/u/2975422/NEVER%20DELETE%20THIS%20HOSTED%20CONTENT/b2.png">
  </div>

<div style="margin: -135px 0px 0px 35px; z-index:1;" class="label1">
    <p style="margin-top: -10;">Where the Canvas Community comes ALIVE!</p>
  </div>

CSS

body {
    color: #58585B;
    font: 20px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    }

/**
 * See: http://www.css-101.org/articles/ken-burns_effect/css-transition.php
 */

/**
 * Styling the container (the wrapper)
 * 
 * position is used to make this box a containing block (it becomes a reference for its absolutely positioned children). overflow will hide part of the images moving outside of the box.
 */

#slideshow {
    position:relative;
    width:932px;
    height:210px;
    overflow:hidden;
}


/**
 * Styling the images
 *
 * position:absolute is to put all images in a stack. Dimensions are set to increase the size of these images so their edges do not appear in the parent box when we move them inside the said box.
 * Because the images are now larger than their parent container, we use top, left and margin values to align them in the center of the box.
 * Finally, we set the transition (property and duration). Note that duration values are different for opacity and transform as we want the "fade-in" effect to be faster than the "panning" effect.
 */

#slideshow img {
    position:absolute;
    width:1278px;
    height:288px;
    top:50%;
    left:50%;
    margin-left:-640px;
    margin-top:-144px;
    border-radius:5px;
    opacity:0;
    -webkit-transition-property: opacity, -webkit-transform;
    -webkit-transition-duration: 3s, 10s;
       -moz-transition-property: opacity, -moz-transform;
       -moz-transition-duration: 3s, 10s;
        -ms-transition-property: opacity, -ms-transform;
        -ms-transition-duration: 3s, 10s;
         -o-transition-property: opacity, -o-transform;
         -o-transition-duration: 3s, 10s;
            transition-property: opacity, transform;
            transition-duration: 3s, 10s;
}

/**
 * We change the point of origin using four corners so images do not move in the same direction. 
 * This technique allows us to create various paths while applying the same translate() values to all images...

JavaScript

/**
 * See: http://www.css-101.org/articles/ken-burns_effect/css-transition.php
 */

/**
 * The idea is to cycle through the images to apply the "fx" class to them every n seconds. 
 * We can't simply set and remove that class though, because that would make the previous image move back into its original position while the new one fades in. 
 * We need to keep the class on two images at a time (the two that are involved with the transition).
 */

(function(){

// we set the 'fx' class on the first image when the page loads
  document.getElementById('slideshow').getElementsByTagName('img')[0].className = "fx";
  
// this calls the kenBurns function every 4 seconds
// you can increase or decrease this value to get different effects
  window.setInterval(kenBurns, 6000);		
  
// the third variable is to keep track of where we are in the loop
// if it is set to 1 (instead of 0) it is because the first image is styled when the page loads
  var images          = document.getElementById('slideshow').getElementsByTagName('img'),
      numberOfImages  = images.length,
      i               = 1;

  function kenBurns() {
  if(i==numberOfImages){ i = 0;}
  images[i].className = "fx";

// we can't remove the class from the previous element or we'd get a bouncing effect so we clean up the one before last
// (there must be a smarter way to do this though)
  if(i===0){ images[numberOfImages-2].className = "";}
  if(i===1){ images[numberOfImages-1].className = "";}
  if(i>1){ images[i-2].className = "";}
  i++;

  }
})();