Will there be a way of having elements visible and hidden according to scheduled times?
For an example, a photo or video appearing at noon as background, and than changing to another at night. So two elements, one will be hidden while the other visible, and vice versa?
Im want to do it for a video background element that will change videos at night and day.
If there is an Amazon server where i host the videos to stream, there should not be a problem with timing i believe because the server is set on local time.
<script>
var now = new Date();
var hours = now.getHours();
if(hours >= 8 && hours <= 22){
$('.that-background-class').addClass('night');
}
else{
$('.that-background-class').removeClass('night');
}
</script>
Just have a background for a day and add a new class in Webflow (nested class) to that background that will be called night and change the background-image in webflow editor.
If you want to show a video you will need to show or hide it with javascript as well. $('.video-class').fadeIn(); and $('.video-class').fadeOut();
Notice!
That script will check on a current client time, so if you are in US and it's 6am you will see nightly background. I am from Poland so I'm +6/+9 hours from you so I'll see daily background.
I thinks its working, i just need to add 2 more for sunrise and sunset or anything in between
The only thing im wondering about is the fade in and fade out option, can there be another option to have the element hidden and visible (block, show none)? So the site wont be too “heavy”, the embed element will become - block when needed so all the other videos wont need to load also, only when they are being called to appear?
Also i will be able to give them a “show-none” property in the webflow designer platform which will make it easier to work on the rest of the site.