Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

69
Views
Parallax Video Progess Scrolling

I'm looking to create a video parallax background, but I want that the progress of the video corresponds to where I am on my webpage.

For example :

  • When im on the top of the page the video is at 0 seconds,
  • in the middle at 50% of its total runtime
  • and finishes only when I reach the bottom of the page.
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

You have to break down the big problem into smaller problems.

First, you need to get your video's duration :

var vid = document.getElementById("myVideo");
duration = vid.duration;

Next, you need to get the scroll amount in percentage

function getVerticalScrollPercentage (elm) {
  var p = elm.parentNode
  return (elm.scrollTop || p.scrollTop) / (p.scrollHeight - p.clientHeight ) * 100
}

Next, you need to dynamically set your video's currentTime (in seconds), you can do it this way :

vid.currentTime = duration * percentage / 100;

And finally, you need to set the currentTime again, whenever the scroll amount changes. That is achieved by using an event listener, on the body for example.

object.addEventListener("scroll", myScript);

Now put it all together :)

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!