5

When creating an image slider, using a cross fade is one of more popular effects. Various sliders use differing techniques to create such an effect. Major techniques I've found so far are:

  • Method 1: Use an overlay and underlay <div> and fade in and out each other's visibility.
  • Method 2: Create a <div> matching the exact size of the slider during initialization, play with its z-index property, and then fade each other.

Using method-1, it needs creating two unneeded and over exploited block elements most commonly a div. First the background property is applied to the underlayed-div then the overlayed-div is faded out and subsequently changed in z-index property to be positioned lower that other one.

Using method-2, it creates only one extra div and now container's background is changed and the overlay div is faded out. Implementing this effect now limits the transition effect that can be build (but this is not the question in hand).

The reason why I believe this could be better is because extra elements will always have to be added to give the effect. Due to this reason, creating effects like that of nivo-slider requires creating 12 to 15+ divs to give the effect.

Adding up to number of elements to create the element does not seem to be the right way.

Are the methods I mentioned above used so much, because there aren't any other ways? There has to be better ways that to create the cross-fade effect.

So my question is simple, Is there a better way to create this effect? If yes, What are they?

Improve this question
3
  • 5
    Why exactly do you want to disregard those solutions? They work reasonably well for most needs. Most other solutions would need to directly access the pixel data (after putting the image in a canvas element), which would be slow and a lot of work to implement. (That at least if it needs to be done within a web site)
    – thorsten müller
    Oct 11, 2012 at 8:11
  • @thorstenmüller, Using canvas and fading between different object is a much better approach that using a separate layer to virtually fake the effect. But since it is not supported by most browsers it cannot be relied upon. I am not disregarding them, my plugins are based the very same techniques but I want to know what different approach can give the same effect and in a better way.
    – Starx
    Oct 11, 2012 at 9:55
  • This question is being discussed on the meta-discussion site.
    – user8
    Oct 12, 2012 at 9:28

1 Answer 1

Reset to default
1

The truth of the matter is, the web wasn't designed for that. It wasn't designed for 90% of what it does today. Hacks and web development are closely tied. The best solution is almost always the one that works.

The web is moving towards standardizing the dynamic nature of what's already out there (HTML5, canvas in your case like thorston mentioned) but it's not there yet and won't be for a long time.

Is there a better way to create this effect? Yes, a video editing software would be vastly superior and easier for what you're trying to do. But you are trying to make a website not a video, albeit with properties analogous to video, so not really. Go with what works, even if it isn't 100% intuitive.

Improve this answer
1
  • Well, Thanks for the extra information. But not quite What I am looking for.
    – Starx
    Oct 12, 2012 at 16:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.