Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

71
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda