PNewCode Posted December 27, 2022 Share Posted December 27, 2022 I have the following script below. The fade in is working beautifully. What I want to do is make it so that 2nd image doesn't fade in untill the first image is clicked on (the first image is acting as a button) And then after the 3 seconds for the fade in, it goes to a different URL. Any thoughts? <!DOCTYPE html> <html> <head> <body bgcolor="#000000" marginwidth="0" marginheight="0"> <div class="parent"> <img class="image1" src="../trial-images/unzoomdoor.jpg" width="100%" height="887" border="0" /> <img class="image2" src="../trial-images/zoomdoor.jpg" width="100%" height="887" border="0" /> </div> <style> .parent { position: relative; top: 0; left: 0; } .image1 { position: relative; top: 0; left: 0; border: 0px solid #000000; } .image2 { position: absolute; top: 0px; left: 0px; border: 1px solid #000000; animation: fadeIn 3s; -webkit-animation: fadeIn 3s; -moz-animation: fadeIn 3s; -o-animation: fadeIn 3s; -ms-animation: fadeIn 3s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } } </style> </body> </html> Quote Link to comment Share on other sites More sharing options...
requinix Posted December 27, 2022 Share Posted December 27, 2022 Please note that you're not writing modern HTML: attributes like bgcolor and image width/height have been discouraged for a number of years now. CSS can't respond to events like Javascript can. It has limited support for things like hovering over elements, which isn't so much an event as it is a persistent state, but doesn't really do clicks. Add some simple Javascript that applies or perhaps toggles a CSS class on some element when clicked, then write your CSS around that class. Quote Link to comment Share on other sites More sharing options...
PNewCode Posted December 27, 2022 Author Share Posted December 27, 2022 @requinixI decided to just add a meta tag to have it redirect after 4 seconds to the next page so no click needs to be done, however I would like to have the animation delayed 2 or 3 seconds before it fades in the second picture. Do you know how I can alter what I have to do that? I tried adding some coding in it from what I have seen online in examples but none of them seem to work, but then again the examples I saw didn't have what I have set up either so I'm lost on how to do that. Quote Link to comment Share on other sites More sharing options...
requinix Posted December 27, 2022 Share Posted December 27, 2022 Did you try altering the animation keyframes? Have it not do anything for the first 2-3 seconds, then start changing the opacity. Quote Link to comment Share on other sites More sharing options...
Solution PNewCode Posted December 27, 2022 Author Solution Share Posted December 27, 2022 @requinixyes in a way. However I found a trick in the depth of the internet that makes it exactly how I want it (this might be what you were talking about I'm not sure). I added 66% { opacity:0; } Between the 0% and 100% and it allows a delay. I had to lengthen the time of total animation to make it work but it's perfect. Quote Link to comment Share on other sites More sharing options...
requinix Posted December 27, 2022 Share Posted December 27, 2022 Right: since the animation is based on progress (0-100%) instead of time, what you have to do is (1) increase the animation duration to include the amount of time when it isn't doing anything, then (2) figure out what percentage 2-3 seconds into the animation is and use that in the keyframes. It's not the cleanest solution possible - that would be literally making it not animate during that initial pause - but it is easy, and with an interstitial page like this, no one's going to notice. 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.