Background video playing on scroll
I'm trying to figure out how to get a short video clip to play in the background as the page is scrolled. I want to replicate something like what is on the ESE Agency home page, but I'm having trouble even figuring out what terms to search for.
https://www.eseagency.ch/en
ESE Agency – Deine Werbeagentur aus Zürich
We are an advertising agency and digital agency from Zurich focused on websites with Webflow, content marketing, social media, campaigning and branding.
6 Replies
i didn't go through the code, but my guess is that they load a video in the background. but do not play it. and change the timestamp of the "play" video when scrolling
after looking at the network... it's even more simple... it's just a background image
Thanks @Doksuri! That helps focus my efforts in digging up a solution.
If you have a recommendation on where to start (CSS, JS), please feel free to add that! 😁
smoothly scrubbing video is highly dependent on how you encode your video (frame rate, codec, fps, and...most importantly...keyframe placement/frequency).https://gsap.com/community/forums/topic/32782-video-scroll-animation/?do=findComment&comment=191527 That website uses GSAP+BarbaJS
Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
i coded this fast... but this would be the path i chose
it needs tweaks and use rAF... but it's basically the concept i'd use