1

There are several questions about zooming and panning with jQuery, but they all (as far as I can tell) have to do with hooking up the zooming or panning to user behavior, such as mousing or using a slider.

I'm interested in something different: any advice on making the panning happen automatically? The sort of thing I have in mind can be seen in this video:

http://www.youtube.com/watch?v=q-2WSDtksj0

  • 1
    The effect you're looking for is called the [Ken Burns Effect](http://en.wikipedia.org/wiki/Ken_Burns_Effect). I doubt though that you'll find something that'll do that automatically. Also, zoomed in images usually looks pretty horrible on browsers – Yi Jiang Nov 04 '10 at 08:57
  • Funny that you mention Ken Burns, I was totally going to mention "an effect like they used ad nauseum in that PBS Civil War thing..." but I figured no one would know what I was talking about! –  Nov 05 '10 at 06:57

2 Answers2

2

I've whipped up a proof-of-concept demo. As pointed out in the comments, browser-powered image resizing can run into quality issues. You'd have to play with it, and decide for yourself if it looks good enough for your purposes.

Thomas
  • 2,162
  • 1
  • 13
  • 10
  • That's about as good as it'll get, I think. Watching that thing resize on Firefox is pretty painful though... – Yi Jiang Nov 04 '10 at 10:25
  • @Yi Jiang: Agreed. I haven't tried it yet, but do you know off-hand if canvas handles resizing better? Of course, that would still require a solution for IE. – Thomas Nov 04 '10 at 10:28
  • Wow, thanks to both of you. The panning step looks really good. Is it just me, or does zooming *in* look smoother than zooming *out*? –  Nov 05 '10 at 06:06
  • You should really write a blog post about this somewhere. Not only is it an interesting effect in its own right, the use of .dequeue and .queue is something I don't think too many developers are familiar with. –  Nov 05 '10 at 06:17
  • @pat: The zooms both get a "stair step" effect as soon as you define the zoom animation over a large value for `animationTime`. The reason is that positioning of elements can only happen on integer pixel values. When animation happens over a long time, the intermittent positioning changes get smaller than 1 pixel, so the picture, instead of moving diagonally, moves one up, one right, one up, one right. It's basically the effect that anti-aliasing tries to remedy in computer graphics. In this example, there are shorter animation times, making things look better: http://www.jsfiddle.net/j9KcA/3/ – Thomas Nov 05 '10 at 06:57
  • @pat: As for a blog post... Feel free to blog ahead. You've had the idea to try this effect in jQuery. The implementation itself is really nothing magical. `.queue()` and `.dequeue()` are both well documented on http://api.jquery.com . – Thomas Nov 05 '10 at 07:00
0

Check out CrossSlide: http://tobia.github.com/CrossSlide

Implements the Ken Burns effect and has a few other settings. Looks pretty nifty, but it's quite demanding on bad browsers.

Carlos Villela
  • 515
  • 5
  • 11