CODEWITHSUNDEEP
javascriptcanvascssslideshowtransition
Christophe
Christophe

Reputation: 28174

Recommended techniques for smoother image transitions

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

Answers (2)

Steven de Salas
Steven de Salas

Reputation: 21507

See the following post on Javascript Performance Optimizations:

It outlines different performance techniques across 5 broad subjects:

  1. Avoiding interaction with host objects (DOM)
  2. Managing and Actively reducing your Dependencies
  3. Disciplined event binding
  4. Maximising the efficiency of your iterations
  5. Becoming friends with the JavaScript lexicon

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

Tim
Tim

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

Related Questions