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...
[SOLVED] Help needed with a CSS3 fullscreen slideshow
-
- Posts: 1410
- Joined: October 14th, 2003, 7:53 am
[SOLVED] Help needed with a CSS3 fullscreen slideshow
Last edited by tomdkat on July 21st, 2017, 9:32 am, edited 2 times in total.
-
- Posts: 173
- Joined: June 12th, 2012, 7:59 am
Re: Help needed with a CSS3 fullscreen slideshow
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%.
0% 4% 9% 15% 100% instead of 0% 8% 17% 25% 100%.
-
- Posts: 1410
- Joined: October 14th, 2003, 7:53 am
Re: Help needed with a CSS3 fullscreen slideshow
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.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%.
I'll give this a try and will let you know how it goes! Thanks!
Peace...
-
- Posts: 173
- Joined: June 12th, 2012, 7:59 am
Re: Help needed with a CSS3 fullscreen slideshow
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.
-
- Posts: 1410
- Joined: October 14th, 2003, 7:53 am
Re: Help needed with a CSS3 fullscreen slideshow
Thanks again! Your keyframes percentages work perfectly!
Now, I'm off to wrap my head around this more so I can understand it.
Peace...
Now, I'm off to wrap my head around this more so I can understand it.
Peace...