Randomly generate background GIFs

Design help Custom code
1

Hello,
So, in the long run I want to be able to randomly generate different background videos upon refresh. I am of the understanding Weblog doesn’t have that function yet. In the meantime is there a way to randomly generate background GIFs?

Thanks in advance for the help!

2

If you can setup at least two layers of backgrounds and post your published link here, I can help you with the code.

3

Cool.
Can you be a bit more specific as to what you need from me? I’m a novice at this stuff.
Thanks for the help!

4

Make a container to hold the backgrounds.

Make at least two divs with backgrounds as shown.

1396×707 2.2 MB

Instead of jpg, you can use gif.

1 Like
5

Cool.
Is there a way to make it so a different GIF is randomly generated upon refresh?

6

Once you have done that, paste this in Page Settings > Custom Code > Footer Code:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  var bg = $('.background-wrap').children();
  bg.eq( Math.floor(Math.random() * bg.length) ).show().siblings().remove();
});
</script>
2 Likes
7

This worked great. Thanks.
Why couldn’t you do the same thing with video? It seems like you could, no?

8

Yes, why not? The setup is the same.

9

but remember. whenever you put a background video, all videos will load. so your load time could be longer.

10

They will start streaming, but it will almost immediately stop as the script will remove the element from the page.