CODEWITHSUNDEEP
javascripthtmlfullscreen
CamelBlues
CamelBlues

Reputation: 3764

Choppy animated slideshow background on a web page

I'm working on a web page with an animated background. I'm using MooTools to crossfade a series of images that are of a decent size (like 1100px x 750px).

I think since the browser is having to do so much rendering work crossfading these images, when you make the page fullscreen, the crossfade animation will become choppy.

In looking for ways to overcome this, I'm already planning on rewriting the slideshow in the most efficient JavaScript I can muster.

Does anyone have any other ideas on how to have the animated background run smoothly at large browser window sizes?

Upvotes: 0

Views: 561

Answers (2)

esdot
esdot

Reputation: 578

Crossfade effect is expensive and you'll get very low frames per second at that resolution. Instead of a crossfade I'd try a slide up/down/left/right or wipe effect. I'm a big fan of the jQuery tools Scrollable plugin.

Upvotes: 1

Martin Jespersen
Martin Jespersen

Reputation: 26183

AS you said yourself, this is probably a rendering issue, and not really an issue with the speed of your javascript, especially since there is a performance difference between fullscreen and non-fuulscreen.

I doubt optimizing your js will have any real effect.

Upvotes: 1

Related Questions