javascript - How to properly make a Ken Burns effect using JQuery - Stack Overflow

admin管理员组

文章数量:1306063

I recently tried the Ken Burns effect with this little jQuery plugin: CrossSlide.

The problem with that plugin is that when the motion is too slow it looks really bad. This is due to the fact that the image can only move 1 pixel at the time...

I tried to do my own slideshow and I have the exact same problem. I then thought that this is normal... since we can only move an image pixel by pixel.

But I just found this slider: Estro Estro looks perfect to me. I wonder why it looks so smooth and how can I make mine look that good.

How can my Ken Burns effect be as good as Estro's one.

I recently tried the Ken Burns effect with this little jQuery plugin: CrossSlide.

The problem with that plugin is that when the motion is too slow it looks really bad. This is due to the fact that the image can only move 1 pixel at the time...

I tried to do my own slideshow and I have the exact same problem. I then thought that this is normal... since we can only move an image pixel by pixel.

But I just found this slider: Estro Estro looks perfect to me. I wonder why it looks so smooth and how can I make mine look that good.

How can my Ken Burns effect be as good as Estro's one.

• javascript
• jquery

Share Improve this question Follow asked Dec 2, 2011 at 0:46 Jean-Philippe LeclercJean-Philippe Leclerc 6,80555 gold badges4545 silver badges6666 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Without diving into the code for each one, if I were creating this I would use jQuery's animate() function. Using this function you can fine tune your slideshow by determining the distance and speed of the images' movement. For example this would move your image 50px to the up and to the left in 2 seconds:

$(".slideshow_image").animate({
    'left':     '-=50px',
    'top':      '-=50px',
    'opacity':  0
}, 2000);

JS Code which uses HTML5 Canvas : http://www.willmcgugan./blog/tech/2011/2/26/ken-burns-effect-with-javascript-and-canvas/

I know it's a relatively old post, but I thought I'd reflect on it as I'm looking for the same answer.. Thanks for the Estro slider link, it's very smooth indeed, and I think I just found out how they do it: on top of the image tag they create an HTML5 canvas that lets you do basic 2D transformations - like dynamic resizing.

This way you don't need to worry about the fact that you can only handle full pixels. Also it might work without a canvas, but not using '-=50'-type animations, but scaling.

Have a look at KenBurner as an example.

I hope it helps some of you out there..

本文标签： javascriptHow to properly make a Ken Burns effect using JQueryStack Overflow