Ken Burns effect?

[jan1980]

Hello guys, do you know if it's possible to give to the opened images a "Ken Burns" effect? (that kind of 'travelling' across the static image)? With an autoPlay set to 'true' and this effect, the result could be really awesome.

I've been searching for several tweaks using CSS (http://www.css-101.org/articles/ken-burns_effect/css-transition.php), jQuery animate (http://runnable.com/UfbUV5SHvmZ3AAAG/how-to-make-a-ken-burns-effect-on-an-image-using-jquery-animate) or combining it with another script (like Slideshowify http://www.subchild.com/slideshowify/) but without success (limited coding skills).

Thanks for your insights. Jan,

[jan1980]

Hi guys, did someone try it out succesfully?? Best,

I'm using CSS and I do have "some" results doing this:

.fancybox-inner img { transition-duration: 5s; transform: scale(1.2); transform-origin: 50% 50%; }

.fancybox-inner img:hover { transform: scale(1.5); transform-origin: 50% 0%; /* pan towards top of image */ }

I'll try to add it into a callback somehow.

source: http://fhtr.blogspot.com.es/2011/08/ken-burns-effect-using-css.html

[jan1980]

Not an ideal solution, but I'm adding CSS3 animations to create a zoom effect on my images. Somehow I have a small jump as they zoom in (don't know why), but I'm stille exploring. Excuse my newbie and hacky level, I'm just trying to find my way out :)

I'll create a jsfiddle soon guys as I'm sure I'll encounter more issues.

.fancybox-inner img { animation-name:myfirst; animation-duration:50s; animation-timing-function:linear; animation-delay:0; animation-iteration-count:1; animation-direction:normal; animation-play-state:running; /* Safari and Chrome: */ -webkit-animation-name:myfirst; -webkit-animation-duration:50s; -webkit-animation-timing-function:linear; -webkit-animation-delay:0; -webkit-animation-iteration-count:1; -webkit-animation-direction:normal; -webkit-animation-play-state:running; }

@keyframes myfirst { 0% { transform: scale(1.2); transform-origin: 50% 0%; } 25% { transform: scale(1.3); transform-origin: 50% 0%; } 50% { transform: scale(1.4); transform-origin: 50% 0%; } 75% { transform: scale(1.5); transform-origin: 50% 0%; } 100% { transform: scale(1.6); transform-origin: 50% 0%; } }

@-webkit-keyframes myfirst /* Safari and Chrome */ { 0% { transform: scale(1.2); transform-origin: 50% 0%; } 25% { transform: scale(1.3); transform-origin: 50% 0%; } 50% { transform: scale(1.4); transform-origin: 50% 0%; } 75% { transform: scale(1.5); transform-origin: 50% 0%; } 100% { transform: scale(1.6); transform-origin: 50% 0%; } }