Fading Layout Images Back and Forth

Everything related to the visual and coding aspects of websites.
Robin
Events Staffer
Posts: 3072
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Re: Fading Layout Images Back and Forth

Post by Robin »

@Mikari: ooo there's a CSS-only solution? That sounds intriguing! :D
~ a dream is a wish your heart makes ~
withinmyworld.org
Mikari
Posts: 3159
Joined: Thu Jun 21, 2012 6:30 pm
Location: Coruscant
Contact:

Re: Fading Layout Images Back and Forth

Post by 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
Administrator
Posts: 2535
Joined: Thu Jun 21, 2012 5:49 pm
Contact:

Re: Fading Layout Images Back and Forth

Post by 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
Events Staffer
Posts: 3072
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Re: Fading Layout Images Back and Forth

Post by Robin »

@Mikari: Oooo awesome! That is a new webdesign toy I must play with now :D :D :D
~ a dream is a wish your heart makes ~
withinmyworld.org
Mikari
Posts: 3159
Joined: Thu Jun 21, 2012 6:30 pm
Location: Coruscant
Contact:

Re: Fading Layout Images Back and Forth

Post by Mikari »

@dubiousdisc: I like pure CSS too ^_^

@CuriousLittleBird: Yes play with it! :D
Post Reply