Reputation: 28174
I am building a slideshow, and I'd like to include smooth (subpixel) image transitions involving sliding and resizing, like for example a Ken Burns effect.
I see that people use various techniques. I'd be interested to know which ones are considered the best approach today, and if any of these are just urban myths that actually bring no improvement:
Note: I undertand that some of these techniques are not supported in older browsers. My question is for thwe most recent versions (IE9, Firefox 5, etc.).
Upvotes: 2
Views: 501
Reputation: 21507
See the following post on Javascript Performance Optimizations:
It outlines different performance techniques across 5 broad subjects:
The ones that apply the most to smooth image transitions are in sections 1, 3 and 4, particularly the use of pointer references to browser DOM objects (so you dont have to traverse the DOM multiple times), applying DOM changes in batches, and optimizing the efficiency of your iterations.
However all 5 sections are useful for creating a highly responsive UI
Upvotes: 1
Reputation: 1958
I think CSS transitions could be a good answer to the major parts of the effects you want.
CSS transitions are designed for changing smoothly between two states of an element.
For ken burns effect It could be accomplish by doing transitions of width on two pictures that are on absolute position for example.
Using Javascript to animate can be a bit laborious and if you want to manipulate dom on each frame it can be heavy for performance.
I also think canvas is not the best solutions because canvas element is not dynamically scalable without problem (performance particulary).
Upvotes: 1