I’m designing a site that has a video in background and 5 sections.
The video has 5 minutes.
I’d like that when the page loads the video starts playing and shows the content of each section when it reach a certain time. For instance, a section is shown in the first minute, then when the video reach one minute the section 2 is shown, and so on.
My main doubt is how to trigger the video when it reach one minute, two minutes, etc, …
I’ve seen this Scrollwheel -> Video playback controls!, but it’s not exactly what I want.
Can anyone help me on this? Tutorials, anything!
Thanks in advance
custom code issue (With API of video player X or html5 video). No way by webflow interaction to control videos (Yet). Also, this is not scrolling wheel effect (But by some timer and events - and section scroll trick like https://alvarotrigo.com/fullPage/).
No way to find a tutorial about something so so so specific. Do you have any site reference use this trick/idea?
What about the user? (If the user scroll to next section before one minute?).
There’s one excellent example here: https://kopke1638.com/
My client saw it and asked me to do something like that.
This is “full job/project” front-end designer with story-board and a lot of work (aaawards site style). With a budget you can do everything
In general if you put background video (autoplay) and create webflow delay animation it could ± work (But in your reference thier is a lot more).
on time (by delay)
2:05 show section X on time
3:05 hide. Maybe try this idea (Sync manually - like subtitles for movie).
Yes, certainly that with money a lot is possible
I was searching some html5 video players and thinking of using them via embed html, but your idea it’s a nice workaround for a small budget
I think that the future will be this time of interactions and more immersive experiences.
Probably a video player that could be used with interactions, would be a nice feature for webflow!