Elegant Cross-Fade and Zoom Effect for Banner Rotators and Image Galleries

[B2rana]

I have converted Flash banner created by @carl schooff into JS version.

I think you peoples like this [ http://02cbcf1.netso...demos/zoomFade/ ].

 

I have a question, is there is any solution to reduce HTML file size? Because HTML file size in this demo is 560.6 KB (including all files such as html, js & images) but in Flash version, SWF size is 131 KB.

 

Once again thanks @carl schooff for wonderful tutorials.

 

You can find @carl schooff's Flash version here http://www.snorkl.tv...-and-tweenlite/

[Carl]

I can't tell you how pleased I am to see that. Fantastic!

It runs silky smooth.

 

I don't think it needs to be nearly that big. I'll take a look under the hood in a little bit.

 

Thanks again.

 

Carl

[Carl]

I think you could get away with compressing the images much more, down to 40kb each as jpgs. Right now they are 60-80kb.

 

The second biggest optimization you could do is use a gzipped version of jquery which ways only 32kb as opposed to 92kb. You can reliably load it off the google's server: http://code.jquery.com/jquery-1.7.2.min.js

 

You can also gzip the TweenMax.min.js file down to 16kb.

Do a google for "how to gzip js" to see if your server supports it.

 

Again, awesome job with that flash to javascript conversion.

[B2rana]

Thanks Carl, for these great tips...

 

One more question is can we maintain same level of smooth animation in IE7 & IE8 without any jerk?

[GreenSock]

Unfortunately, IE7 and IE8 are just plain slow browsers, especially when it comes to transforms (x, y, rotation, scaleX, scaleY, skewX, skewY) and there's virtually nothing we can do to resolve that. It's not related to the tweening engine itself. If you want optimal performance on those older versions, I'd recommend avoiding transforms altogether and if you need to animate position, just use "left" and "top" properties instead of "x" and "y" transforms.

[B2rana]

Thanks @GreenSock for your tips...D