Fading Layout Images Back and Forth

[Robin]

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

[Masao]

Do you mean something like this? http://trendmedia.com/news/infinite-rot ... avascript/

[Robin]

AWESOME!! I think that one will work! (I will try it on my layout in let y'all know how it functions)

[dubiousdisc]

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 :)

[Robin]

@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 ^_^

[Mikari]

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.

[Robin]

@Mikari: ooo there's a CSS-only solution? That sounds intriguing! :D

[Mikari]

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.

[dubiousdisc]

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)

[Robin]

@Mikari: Oooo awesome! That is a new webdesign toy I must play with now :D :D :D