<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="header">
<h1>Smooth Ken Burns Effect Using the Transition Property</h1>
<p><a href="http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/">Paul Irish</a> on why translate is better than positioning to move elements. The same is true for a lot of transition values and their counterparts. The first image shows a Ken Burns effect using transition:scale;. The second uses zoom; notice how at the very end of the animation the image is pixel fit, causing a stuttering effect on the bottom.</p>
</section>
<div class="imageWrapper"><div class="image">
<img src="http://static.squarespace.com/static/4fb50a18e4b0f2fffeb51dda/4fb50a19e4b0f2fffeb51ddf/50255b3184ae111bdb329ce6/1344625457128/sqspc2-1.jpg?format=1500w" />
</div></div>
</div>
<div class="imageWrapperZoom"><div class="imageZoom">
<img src="http://static.squarespace.com/static/4fb50a18e4b0f2fffeb51dda/4fb50a19e4b0f2fffeb51ddf/50255b3184ae111bdb329ce6/1344625457128/sqspc2-1.jpg?format=1500w" />
</div></div>
/**
* 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++;
}
})();
