Streaming live at 10am (PST)

How to make a (background) full screen image be replaced by a second after few seconds


#1

Hi

I'm new to Webflow. I need some help, hope you can give me this?

What I want is a one-page website with a full screen image in the background (below that, some static items like text and logo's);
after 3 seconds a second full screen background image covers (or replaces) the first image (with a 500 ms fade in), and again after 3 seconds a third image replaces the second, after 3 a fourth image and again after 3 seconds the very first one fades back in.
It must no be background images, but I will want to place a header and a logo on top that will fade in but stay there.

I'm stuck, although I've seen all the instruction videos smile

Could you guys please help me? I'm sure all of the rest will be easy compared to this one…

Kind regards
Tom


#2

You could try using a slider set to auto. Put it at the bottom of your first fullscreen section (height:100% and body height 100% as well). You'd select the arrows containers and pass them to display:none, same for the elment containing the dots on the bottom. You'd have to edit the height of the Slider element (default is 300px, pass to 100% height).

Other solution requires Interactions: pile up several 100% divs on the back of your fullscreen section, then give each an interaction to affect their opacity in time.

Other solution is googling for a JS. Such a JS could be extremely simple to use, but the 2 first solutions don't require code at all.


#3

EDIT: @vincent answered this far better than myself!

100% agree - the easiest solution is just to use the slider and set arrows etc to display none smile


#4

Well thanks, am gonna try your solution tomorrow. I saw this in a template (Contemplate) also after I typed my post so I'll try this one, keep you posted!


#5