MozillaZine

[SOLVED] Help needed with a CSS3 fullscreen slideshow

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

Post Posted July 16th, 2017, 3:59 pm

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: 146
Joined: June 12th, 2012, 7:59 am

Post Posted July 19th, 2017, 8:26 am

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: 1276
Joined: October 14th, 2003, 7:53 am

Post Posted July 19th, 2017, 9:33 pm

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: 146
Joined: June 12th, 2012, 7:59 am

Post Posted July 20th, 2017, 3:13 am

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: 1276
Joined: October 14th, 2003, 7:53 am

Post Posted July 21st, 2017, 9:30 am

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...

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 3 guests