Jump to content



Photo

  • Please log in to reply
3 replies to this topic

#1 Mamoun

Mamoun

    Neowinian

  • Joined: 17-June 06
  • Location: Cairo, Egypt

Posted 10 January 2013 - 16:46

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! :)


#2 primexx

primexx

    Neowinian Senior

  • Tech Issues Solved: 6
  • Joined: 24-April 05

Posted 10 January 2013 - 18:41

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

#3 ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: HTC Windows 8X

Posted 10 January 2013 - 20:21

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.

#4 threetonesun

threetonesun

    Neowinian Senior

  • Tech Issues Solved: 1
  • Joined: 26-February 02

Posted 10 January 2013 - 20:46

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


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.



Click here to login or here to register to remove this ad, it's free!