I have two layout images that I'd like to "fade" between, as described below:
Main Idea
When the user first hits the page, image #1 should display, but after 15-20 seconds, I would like image #2 to fade in slowly in its place. Then, after 15-20 seconds of image #2 being displayed, fade image #1 back in, and so on.
How to Achieve This?
I'm pretty sure this involves some JavaScript acrobatics...most of the tutorials I've found so far just allow for the second image to replace the first and never change back, though, so I'm a little stuck. (I might just not be using the right search terms because of Thanksgiving brain, LOL) I don't want to resort to an animated .gif unless absolutely necessary, because it would result in grainy color.
Any tips would be greatly appreciated! :D :D
Fading Layout Images Back and Forth
Re: Fading Layout Images Back and Forth
Do you mean something like this? http://trendmedia.com/news/infinite-rot ... avascript/
THE FATE OF DESTRUCTION IS ALSO THE JOY OF REBIRTH.
-
- Events Staffer
- Posts: 3072
- Joined: Thu Aug 07, 2014 3:15 pm
- Location: North Carolina, USA
- Contact:
Re: Fading Layout Images Back and Forth
AWESOME!! I think that one will work! (I will try it on my layout in let y'all know how it functions)
-
- Administrator
- Posts: 2535
- Joined: Thu Jun 21, 2012 5:49 pm
- Contact:
Re: Fading Layout Images Back and Forth
By the way, there's about a billion different scripts to achieve this (mostly jquery as far as I know), so if that doesn't work for you, what you're looking for is called an image carousel :)
-
- Events Staffer
- Posts: 3072
- Joined: Thu Aug 07, 2014 3:15 pm
- Location: North Carolina, USA
- Contact:
Re: Fading Layout Images Back and Forth
@Masao: it worked! Thank you sooo much for the link :D
@Dubs: thank you for the terminology! When I was searching, I wasn't sure if the "image carousel" term referred only to stuff like the Bootstrap carousel module, or whether it was a more generic dev phrase. (The layout I'm making is definitely not mobile first, LOL!). That helps clear the confusion ^_^
@Dubs: thank you for the terminology! When I was searching, I wasn't sure if the "image carousel" term referred only to stuff like the Bootstrap carousel module, or whether it was a more generic dev phrase. (The layout I'm making is definitely not mobile first, LOL!). That helps clear the confusion ^_^
Re: Fading Layout Images Back and Forth
I agree, there are lots of different ways to do this. I've used JS intervals before though it can also be done with CSS.
-
- Events Staffer
- Posts: 3072
- Joined: Thu Aug 07, 2014 3:15 pm
- Location: North Carolina, USA
- Contact:
Re: Fading Layout Images Back and Forth
@Mikari: ooo there's a CSS-only solution? That sounds intriguing! :D
Re: Fading Layout Images Back and Forth
For the CSS version, basically you place images on top of each other via positioning and sync set their opacity keyframes. I have a small example at the bottom of this page http://azurelight.net/code22.php (the fruit pixels) in this case, there's a moment when the image area is empty during transition, but you can also set it so that the next image begins to fade in as soon as the previous fades away. If for example, you have 10 images and want to display each for 1 second, your animation would last 10 seconds with each opacity setting changing every 10% in the keyframe list.
-
- Administrator
- Posts: 2535
- Joined: Thu Jun 21, 2012 5:49 pm
- Contact:
Re: Fading Layout Images Back and Forth
Oh right, there's also the animation! Omg how could I have forgotten that, I've made layouts with that technique XD
Thank you Mikari for adding it! (Personally the pure-CSS is my favorite technique :D)
Thank you Mikari for adding it! (Personally the pure-CSS is my favorite technique :D)
-
- Events Staffer
- Posts: 3072
- Joined: Thu Aug 07, 2014 3:15 pm
- Location: North Carolina, USA
- Contact:
Re: Fading Layout Images Back and Forth
@Mikari: Oooo awesome! That is a new webdesign toy I must play with now :D :D :D