2/25/2023 0 Comments Simple css based image slider![]() ![]() In this case, I’m doing a 1 second fade-in plus 2 seconds of visibility before fading out. Math: 100 ÷ animation duration = percentage for 1 second. The timing then becomes a multiple of that. If the animation is 6 seconds then each second is 16.66%. If the animation is 10 seconds long then each second is 10%. To do so, we need to break up 100% into the number of seconds of our animation. Therefore, the last piece of the puzzle is figuring out how to get the animation percentages correct. Keyframes can be a simple from or to but for more complicated animations, we have to use percentages. Math: (fade-in + visible) × (ordinal position − 1) = delay. If it’s the fourth image, the delay is 9 seconds, and so on. If it’s the third image, the delay is 6 seconds. If it’s the second image and the animation should fade in for 1 second and be visible for 2 seconds before fading out then the animation delay should be 3 seconds. Therefore, you want the animation delay to be the fade-in time plus the visible time for the previous image. The key thing is that you want to start the animation for the next image when the image before that is starting its fade-out. The animation delay is pretty straightforward. Math: (fade-in + visible) × images = duration. If you want the image to take 1 second to fade in and be visible for 1 second and you have 3 images then your animation duration is 6 seconds. To determine the animation duration, take the fade in time that you want plus the time you want the image to be visible before beginning to fade out. There are 3 sets of numbers that you need to determine: ![]() This graph visualizes how the animation duration and animation delay work. I use an animation-delay to offset the animations for each subsequent image in the slideshow. The basic premise is to have an image fade in and then fade out. I knew I was dealing with certain multiples but kept screwing up the timing. This was trickier than expected because, well, math is hard. To do so, I’ll attempt to do this with CSS animations. ![]() Yes, this has been done before by other people. Thankfully, I didn’t research this first and just went with it. In continuing my exercise of tackling a simple slideshow in different ways, this challenge attempts to make a slideshow without using any JavaScript. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |