If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Cycle through images with fade effect.

Hello all,

I found the following script that is close to what I was looking for. However I was hoping that someone could help me figure out how to have the image simply fade into the next image instead of fading to white then displaying the next image. Any help would be greatly appreciated!

That's a very helpful source. Thank you! Now, I'm a novice at CSS (at best), so perhaps you could help me a little...if you could.

How can I combine these two codes to achieve the effect that I'm going for?

Here is the full effect that I'm looking to achieve. I want to have images cycle through with the fade effect (these are a link). When you hover over the image area it allows for a dimming effect. All I need to do is have the background image(s) cycle with the fade. I have the other part figured out. It seems like a lot of work, but not so much now that you provided that link. I'm just not proficient enough in CSS yet to make it happen.

Thanks to Pafson's comment, this is finally working as expected! He proposes the following algorithm to determine the percentages and timings:

For "n" images You must define:
a=presentation time for one image
b=duration for cross fading
Total animation-duration is of course t=(a+b)*n

animation-delay = t/n or = a+b

Percentage for keyframes:

0%
a/t*100%
(a+b)/t*100% = 1/n*100%
100%-(b/t*100%)
100%

Just as an example:

If I want each image to display for 3 seconds, a 1 second transition time, and six total images, what would the calculations be? I will probably end up adding a couple more images, but that will at least give me an understanding of what those calculation mean.