Jump to content

Question

Posted

Hi,
I have been looking for the best way to provide simple animations in a website, the animations should be part of a rotating "banner" showcasing featured items on the homepage, I'm using a simple "slider" right now with static images but I'm trying to add a little more eye candy to it.

I have googled that question already, but didn't find an exact answer for my specific needs, what in these 3 solutions can provide:
1- Graceful degradation (Progressive enhancement)
2- Most compatibility
3- Best performance

The first item is the most important, as the website owner (well, my brother :p) wanted a flash slider at first, which I completely hate as I feel flash content has plenty of disadvantages and I wanted a better solution that doesn't depend on a plugin, having a way to do animations that would still allow users with disabled javascript or even disabled images to be able to read the content normally would be great.

Please also note that the animations has to fire only when the "slide" is changed, and if an item is shown first with an animated fade-in for example, it shouldn't show up before completely loading the page (something that drove me crazy with jquery, flash of the content before it disappear again and then show with the animation).

Thank you for reading all of this! :)

Share this post


Link to post
Share on other sites

3 answers to this question

  • 0

Posted

you probably want a CSS3 primary solution, then check what it breaks in, and use JS compatibility hacks for them.

Share this post


Link to post
Share on other sites
  • 0

Posted

You will need to use all 3 technology to get it working right if it's really complex. If it's really simple don't care if it works in older browsers then CSS3 and HTML5 is okay.
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted

[quote name='Mamoun' timestamp='1357836369' post='595445244']
I have googled that question already, but didn't find an exact answer for my specific needs, what in these 3 solutions can provide:
1- Graceful degradation (Progressive enhancement)
2- Most compatibility
3- Best performance

[/quote]

Javascript. Canvas and javascipt are essentially the same answer, except you have even less support for canvas. CSS3 can do transitions, yes, but support isn't great and I think that in terms of how CSS should be used, it's a bad idea.

Javascript, however, should degrade perfectly well if the HTML behind it is fundamentally sound, will be the most contemptible, and for something simple like a slider, has no real performance issues.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.