samedi 5 mai 2012

Ken Burns effect using CSS



The Ken Burns effect is a special effect used in documentaries when you only have a static photograph of an interesting item. To add some movement and life to the photograph, you zoom into the photo and pan towards a point of interest. It's named the Ken Burns effect because it was used a lot by a documentary film maker named Ken Burns.



Anyhow.



You can achieve the Ken Burns effect using CSS animations. It's not even particularly difficult. Just create a div with overflow:hidden to hold the image, then change the image's CSS transform property. Or if you want to be totally retro and backwards-compatible, you could also achieve the effect by changing the image's top, left, width and height using a JS setInterval.



So, CSS:



.kenburns {

overflow: hidden;

display: inline-block;

}

.kenburns img {

transition-duration: 5s;

transform: scale(1.0);

transform-origin: 50% 50%;

}

.kenburns img:hover {

transform: scale(1.2);

transform-origin: 50% 0%; /* pan towards top of image */

}





And the corresponding HTML:



<div class="kenburns" style="width:640px; height:480px;">

<img src="image.jpg" width="640" height="480">

</div>





If you hover over the image, it will slowly zoom in and pan towards its top edge.



You can see the effect in action here. And a more complex version with a JS-driven lightbox here.



The (quick, hacky) code is on GitHub.

Aucun commentaire:

Enregistrer un commentaire

Enregistrer un commentaire