Nice. I sugest to add a link, so people can compare. Also, the author may be glad. From the page:
> Attribution is not required. Giving credit to the photographer or Pexels is not necessary but always appreciated.
Why does it take too long to load? Are you procecing the video each time the page is loaded?
cousin_it · 2d ago
Yeah, the video is decoded in js and converted to frames every time.
First I tried making a <video> element and synchronizing it with page scrolling. But changing video time is asynchronous, so the relative positions of video and html content got wobbly. The only way to achieve perfect sync and "glue" the content to the background is to draw frames manually on scroll. And also round off the scrollY of the html content to the position of the nearest frame, so that there's no subpixel wobble either.
gus_massa · 2d ago
I think it would help to have a counter or progress bar while loading.
Id the original video available?
> Attribution is not required. Giving credit to the photographer or Pexels is not necessary but always appreciated.
Why does it take too long to load? Are you procecing the video each time the page is loaded?
First I tried making a <video> element and synchronizing it with page scrolling. But changing video time is asynchronous, so the relative positions of video and html content got wobbly. The only way to achieve perfect sync and "glue" the content to the background is to draw frames manually on scroll. And also round off the scrollY of the html content to the position of the nearest frame, so that there's no subpixel wobble either.