I need a code for automatic scrolling

I don’t know how to do it and would like help from friends with this issue.
I need to scroll the site, from start to finish, but I need it to be done in 45 seconds automatically.
I have to record the whole site on video and I don’t know how to do the scroll command in that time.
Can anybody help me?
Note, I need it to work on the mobile version of the site.

body {
   animation: scroll 45s linear;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

https://shiny-flower-7499.bss.design/

3 Likes

Thank you very much, I will test it, will it work with manual override? Example by clicking a button?

1 Like

Tomorrow I will look at the code in this example. Thanks.

I will use the code to make videos promoting my work like the one in the link below.

https://vm.tiktok.com/ZMYXLhXyL/

@gilmar

This is the script in the example above

(function (document) {
  'use strict';
  const ready = (callback) => {
    if (document.readyState != 'loading') callback();
    else document.addEventListener('DOMContentLoaded', callback);
  };
  ready(() => {
    // definir a posição de rolagem de destino na parte inferior da página
    const target = document.body.scrollHeight - window.innerHeight;

    // tempo em milissegundos
    const duration = 45000;

    // calcule a distância e o intervalo de tempo para cada etapa da rolagem
    const distance = target / Math.floor(duration / 50); // intervalo de 50ms
    const interval = setInterval(function () {
      // verifique se a posição de rolagem atual atingiu o alvo
      if (window.pageYOffset >= target) clearInterval(interval);
      else window.scrollBy(0, distance);
    }, 50);
  });
})(document);

If you don’t want the page to scroll at once when loaded, then you can do like this

(function (document) {
  'use strict';
  const ready = (callback) => {
    if (document.readyState != 'loading') callback();
    else document.addEventListener('DOMContentLoaded', callback);
  };
  ready(() => {
    const target = document.body.scrollHeight - window.innerHeight;
    const duration = 45000;
    const distance = target / Math.floor(duration / 50);
    let interval;
    document.addEventListener('keydown', scrollOnKey);
    function scrollOnKey(e) {
      if (e.code === 'ArrowDown') {
        clearInterval(interval);
        interval = setInterval(function () {
          if (window.pageYOffset >= target) clearInterval(interval);
          else window.scrollBy(0, distance);
        }, 50);
      }
      if (e.code === 'ArrowUp') {
        clearInterval(interval);
        interval = setInterval(function () {
          if (window.pageYOffset == 0) clearInterval(interval);
          else window.scrollBy(0, -distance);
        }, 50);
      }
      if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {
        clearInterval(interval);
        interval = null;
      }
    }
  });
})(document);

Then you can start the scrolling with the arrow key down to scroll down, the arrow key up to scroll up the left and right keys to stop the scrolling

3 Likes

Thanks a lot for the help.

@gilmar

I asked your question to chatGPT this is the answer I got

You can achieve this by using a browser extension such as “Auto Scroll” for Google Chrome or “Page Scroller” for Mozilla Firefox. These extensions allow you to customize the scrolling speed and duration, which will help you achieve your desired scroll time of 45 seconds.

Here are the steps you can follow to use Auto Scroll Extension in Google Chrome:

  1. Open Google Chrome and go to the Chrome Web Store.
  2. Search for “Auto Scroll” and click on the “Add to Chrome” button to install the extension.
  3. Once the installation is complete, go to the website you want to record and start playing the video recording software.
  4. Click on the Auto Scroll icon in the top right corner of your browser window and select “Start”.
  5. Adjust the scrolling speed and duration based on your needs, and then click on “Start”.
  6. The extension will start scrolling the site automatically from top to bottom, which you can record using your video recording software.

With this method, you should be able to scroll the entire site in 45 seconds, ensuring that you capture everything you need without missing anything.

it is maybe something for you to test as well

1 Like

Thanks a lot for the help everyone. Testing the options from our friend @richards , it was the one that best met my needs, it would be great to be able to activate it with a click on the website, would that be possible?

This will allow you to click the body (you can change this to suit) then will start scrolling after 2 seconds.

CSS:

.scrollMe {
  animation: scroll 45s linear;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

JS

const body = document.body;

body.addEventListener('click', function() {
  setTimeout(function() {
    body.classList.add('scrollMe');
  }, 2000);
});
2 Likes

Thank you very much.

https://apresentacao.bss.design/

If you don’t want the page to scroll below the end of the page and stop scrolling when the scrolling has reached the end of the page, you can change @richards css to this

.scrollMe {
  --scroll: calc(-100% + 100vh);
  animation: scroll 45s linear forwards;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(var(--scroll));
  }
}
3 Likes