Exemple d'un effet de sélection avec JavaScript

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
        font-family: sans-serif;
        font-weight: 700;
        height: 600vh;
        background: #d66d75;
        background: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
      }
      .marquee {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
      }
      .marquee .inner {
        position: relative;
        width: 100%;
        display: flex;
        color: white;
        font-size: 8rem;
      }
      .marquee .inner > * {
        white-space: nowrap;
        padding: 0 4rem;
      }
    </style>
  </head>
  <body>
    <div class="marquee">
      <div class="inner">
        <p>Bonjour, le monde des gens.</p>
      </div>
    </div>
    <script>
      function handleMarquee() {
        const marquee = document.querySelectorAll(".marquee");
        let speed = 4;
        let lastScrollPos = 0;
        let timer;

marquee.forEach(function (el) {
          const container = el.querySelector(".inner");
          const content = el.querySelector(".inner > *");
          //Get total width
          const elWidth = content.offsetWidth;

//Duplicate content
          let clone = content.cloneNode(true);
          container.appendChild(clone);

let progress = 1;
          function loop() {
            progress = progress - speed;
            if (progress <= elWidth * -1) {
              progress = 0;
            }
            container.style.transform = "translateX(" + progress + "px)";
            container.style.transform += "skewX(" + speed * 0.4 + "deg)";

window.requestAnimationFrame(loop);
          }
          loop();
        });

window.addEventListener("scroll", function () {
          const maxScrollValue = 12;
          const newScrollPos = window.scrollY;
          let scrollValue = newScrollPos - lastScrollPos;

if (scrollValue > maxScrollValue) scrollValue = maxScrollValue;
          else if (scrollValue < -maxScrollValue) scrollValue = -maxScrollValue;

speed = scrollValue;

clearTimeout(timer);
          timer = setTimeout(handleSpeedClear, 10);
        });

function handleSpeedClear() {
          speed = 4;
        }
      }

handleMarquee();
    </script>
  </body>
</html>