How to fade images + content every 3 seconds?

Asked May 09 '16 at 13:22

Active May 09 '16 at 13:22

Viewed 177 times

I have a small script that changes images every 3 seconds.

I want it to change every 3 seconds but with a fade-in fade-out effect.

I also want it to display some text in the bottom of the image.

Also, can it be done with html + css only without JS?

Here is my script:

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(3000, 10); //milliseconds, frames

Here is the css:

#b1 { background: hsl(0, 50%, 50%); }
#b2 { background: hsl(30, 50%, 50%); }
#b3 { background: hsl(60, 50%, 50%); }

See it in action: JSfiddle

asked May 09 '16 at 13:22

StackBuck

http://stackoverflow.com/questions/9483364/css3-background-image-transition – BenG May 09 '16 at 13:26
Have you tried animate.css? – Stack learner May 09 '16 at 13:26
No its not duplicate. – StackBuck May 09 '16 at 13:29
2

Look at this it's pure css http://stackoverflow.com/questions/23985018/simple-css-animation-loop-fading-in-out-loading-text – Train May 09 '16 at 13:29
Are you want something like this http://stackoverflow.com/a/37013752/6213434 ? – May 09 '16 at 13:33

How to fade images + content every 3 seconds?

0 Answers0