Skip to content

Instantly share code, notes, and snippets.

@thierryk

thierryk/ken-burns.css

Created November 28, 2011 20:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save thierryk/1401846 to your computer and use it in GitHub Desktop.
Save thierryk/1401846 to your computer and use it in GitHub Desktop.
Download ZIP
Ken Burns effect (styling images with panning and zooming effects)
Raw
ken-burns.css
/**
* 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:240px;
height:160px;
overflow:hidden;
border:8px solid #fff;
}
/**
* 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:360px;
height:240px;
top:50%;
left:50%;
margin-left:-180px;
margin-top:-120px;
opacity:0;
-webkit-transition-property: opacity, -webkit-transform;
-webkit-transition-duration: 3s, 8s;
-moz-transition-property: opacity, -moz-transform;
-moz-transition-duration: 3s, 8s;
-ms-transition-property: opacity, -ms-transform;
-ms-transition-duration: 3s, 8s;
-o-transition-property: opacity, -o-transform;
-o-transition-duration: 3s, 8s;
transition-property: opacity, transform;
transition-duration: 3s, 8s;
}
/**
* 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 (see the 'fx' class further below).
*/
#slideshow img {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
}
#slideshow :nth-child(2n+1) {
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-ms-transform-origin: top right;
-o-transform-origin: top right;
transform-origin: top right;
}
#slideshow :nth-child(3n+1) {
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-ms-transform-origin: top left;
-o-transform-origin: top left;
transform-origin: top left;
}
#slideshow :nth-child(4n+1) {
-webkit-transform-origin: bottom right;
-moz-transform-origin: bottom right;
-ms-transform-origin: bottom right;
-o-transform-origin: bottom right;
transform-origin: bottom right;
}
/**
* Because of the stacking context, we need to make sure that the first image (in source) is not hidden by the last one.
* The rule below moves all images past the second one down the stack.
* This is because the second image needs to show on top of the first one when it transitions in.
*/
#slideshow .fx:first-child + img ~ img {
z-index:-1;
}
/**
* Because images are styled with a different point of origin, the following rule will create different panning effects.
*/
#slideshow .fx {
opacity:1;
-webkit-transform: scale(1.5) translate(30px);
-moz-transform: scale(1.5) translate(30px);
-ms-transform: scale(1.5) translate(30px);
-o-transform: scale(1.5) translate(30px);
transform: scale(1.5) translate(30px);
}
Raw
ken-burns.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Ken Burns effect</title>
<link rel="stylesheet" href="ken-burns.css">
</head>
<body>
<!--
The name and number of images do not matter, but their container must have this id (#slideshow).
-->
<div id="slideshow">
<img src="img/01.jpg" alt="">
<img src="img/02.jpg" alt="">
<img src="img/03.jpg" alt="">
<img src="img/04.jpg" alt="">
<img src="img/05.jpg" alt="">
<img src="img/06.jpg" alt="">
</div>
<script src="ken-burns.js"></script>
</body>
</html>
Raw
ken-burns.js
/**
* 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, 4000);
// 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++;
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment