[SOLVED] Help needed with a CSS3 fullscreen slideshow

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Post Reply
tomdkat
Posts: 1410
Joined: October 14th, 2003, 7:53 am

[SOLVED] Help needed with a CSS3 fullscreen slideshow

Post by tomdkat »

Hi! I found a tutorial on making a fullscreen CSS3 slideshow here:

https://tympanus.net/codrops/2012/01/02 ... with-css3/

The CSS3 style rules used in the demo work fine for me _except_ if I add more images to the slideshow. On that site, the slideshow has 5 or 6 images. I intend to have about 11 or 12 images in my slideshow. All of the images in my slideshow appear fine but when the last slide appears, it stays displayed for longer than it should. Then, when the first slide fades in again, it appears for a fraction of a second before slide #2 appears.

Here's a link to a stripped-down test case:

http://www.leonadarnell.com/test/css3-s ... -case.html

I would like each slide to be displayed for 5 or 6 seconds. The page above is set to display the slides for 6 seconds.

Any ideas on why the first slide doesn't fade in properly when the last slide has been displayed? Any help would be greatly appreciated!

Thanks in advance!

Peace...
Last edited by tomdkat on July 21st, 2017, 9:32 am, edited 2 times in total.
Lnwdz
Posts: 173
Joined: June 12th, 2012, 7:59 am

Re: Help needed with a CSS3 fullscreen slideshow

Post by Lnwdz »

I don't really understand most of it, but I see that the keyframes percentages need to be recalculated because of the longer duration (66s). It seems to work correctly with
0% 4% 9% 15% 100% instead of 0% 8% 17% 25% 100%.
tomdkat
Posts: 1410
Joined: October 14th, 2003, 7:53 am

Re: Help needed with a CSS3 fullscreen slideshow

Post by tomdkat »

Lnwdz wrote:I don't really understand most of it, but I see that the keyframes percentages need to be recalculated because of the longer duration (66s). It seems to work correctly with
0% 4% 9% 15% 100% instead of 0% 8% 17% 25% 100%.
Wow, thanks for that info! How did you conclude the keyframes percentages needed to be adjusted? I re-read the tutorial and the math applied to the 6 images for a 36s duration seemed to remain the same when applied to the 66s duration slideshow, so I'm clearly confused. ](*,) :P

I'll give this a try and will let you know how it goes! Thanks! =D>

Peace...
Lnwdz
Posts: 173
Joined: June 12th, 2012, 7:59 am

Re: Help needed with a CSS3 fullscreen slideshow

Post by Lnwdz »

I was confused until I started playing with keyframes opacity. Then it became apparent that each image is its own animation that begins after a delay and continues for 66 seconds (rather than the expected 6 seconds per image). Opacity has to be reduced to zero after about 6s (calculated as 6s divided by 66s equals 9%). Otherwise two or more images will be visible at the same time.
tomdkat
Posts: 1410
Joined: October 14th, 2003, 7:53 am

Re: Help needed with a CSS3 fullscreen slideshow

Post by tomdkat »

Thanks again! Your keyframes percentages work perfectly! =D> =D> =D>

Now, I'm off to wrap my head around this more so I can understand it. :)

Peace...
Post Reply