Streaming live at 10am (PST)

Randomly generate background GIFs


#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.

Instead of jpg, you can use gif.


#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>

http://sandbox-903b9c.webflow.io


#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.


#11