Add fadein and fadeout to css and java slideshow

Question

I found and slide show using java and css only. I need this because I also use background blend mode in my css script and that is not working on img src.

here is the code:

http://jsfiddle.net/xdUBZ/749/

also here:

    function run(interval, frames) {
    var int = 1;

    function func() {
        document.body.id = "b"+int;
        int++;
        if(int === frames) { int = 1; }
    }

    var swap = window.setInterval(func, interval);
}

run(6000, 10); //milliseconds, frames

And this is the css code:

#b1 { background: hsl(10, 50%, 50%); }
#b2 { background: hsl(30, 50%, 50%); }
#b3 { background: hsl(60, 50%, 50%); }
#b4 { background: hsl(90, 50%, 50%); }
#b5 { background: hsl(120, 50%, 50%); }
#b6 { background: hsl(150, 50%, 50%); }
#b7 { background: hsl(180, 50%, 50%); }
#b8 { background: hsl(210, 50%, 50%); }
#b9 { background: hsl(240, 50%, 50%); }
#b10 { background: hsl(270, 50%, 50%); }

Is there a way to add fadein and fadeout effect? Also I noticed you can change the time in milliseconds. The first Milliseconds there is no image loaded after the the milliseconds will end for the forst time than the first image will load. Is there a way to come up with the first image instantly

Kind regards, Justin

Bálint Bálint · Accepted Answer · 2016-07-22T00:46:06

If you add

body {
    transition-duration: 1s;
}

Then the colors will fade into each other. If you use images, then they will fade in-out

Add fadein and fadeout to css and java slideshow

1 Answers