Trying to highlight a text using JS-CodePudding

I am trying to highlight a text when the page scrolls it gets marked underneath, and from what I've found on the net, the code goes like this. But it seems I am doing something wrong and I cannot get it right. Please note I am very new and just started learning web-development.

(function(document) {
  const markers = [...document.querySelectorAll('mark')];

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.intersectionRatio > 0) {
        entry.target.style.animationPlayState = 'running';
        observer.unobserve(entry.target);
      }
    });
  }, {
    threshold: 0.8,
  });

  markers.forEach((mark) => {
    observer.observe(mark);
  });
}(document));

.mark {
  --color1: springgreen;
  --color2: springgreen;
  --bg-height: 40%;
  all: unset;
  background-image: linear-gradient(var(--color1) var(--color2));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 var(--bg-height);
  -webkit-animation: highlight 800ms 1 ease-out;
  animation: highlight 800ms 1 ease-out;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

@-webkit-keyframes highlight {
  to {
    background-size: 100% var(--bg-height);
  }
}

@keyframes highlight {
  to {
    background-size: 100% var(--bg-height);
  }
}

<main>
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat quas asperiores ut numquam, quidem blanditiis sint explicabo qui amet reiciendis doloremque, minima illo. Repudiandae iste quis nihil itaque porro.</h2>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut aut laudantium ullam! <mark>Tempore sapiente molestiae</mark> nam amet quaerat quisquam doloremque eveniet dolores? Laborum asperiores, obcaecati minima minus qui esse ab?</p>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam sapiente ea alias unde qui mollitia earum pariatur nesciunt incidunt, <mark>tenetur nemo iure aspernatur maiores.</mark> Laboriosam placeat quae eos recusandae explicabo?</p>
</main>

CodePudding user response：

The JS code is right, you just have 2 errors in CSS code, you miss a comma inside the linear-gradient declaration, and you are styling the .mark class, while you need to style the mark elements:

const markers = [...document.querySelectorAll('mark')];

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.intersectionRatio > 0) {
      entry.target.style.animationPlayState = 'running';
      observer.unobserve(entry.target);
    }
  });
}, {
  threshold: 0.8,
});

markers.forEach((mark) => {
  observer.observe(mark);
});

p,
h2 {
  margin-bottom: 500px;
}

mark {
  --color1: springgreen;
  --color2: blue;
  --bg-height: 40%;
  all: unset;
  background-image: linear-gradient(var(--color1), var(--color2));
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: 0% var(--bg-height);
  animation: highlight 800ms 1 ease-out;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}

@-webkit-keyframes highlight {
  to {
    background-size: 100% var(--bg-height);
  }
}

@keyframes highlight {
  to {
    background-size: 100% var(--bg-height);
  }
}

<main>
  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat quas asperiores ut numquam, quidem blanditiis sint explicabo qui amet reiciendis doloremque, minima illo. Repudiandae iste quis nihil itaque porro.</h2>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut aut laudantium ullam! <mark>Tempore sapiente molestiae</mark> nam amet quaerat quisquam doloremque eveniet dolores? Laborum asperiores, obcaecati minima minus qui esse ab?</p>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam sapiente ea alias unde qui mollitia earum pariatur nesciunt incidunt, <mark>tenetur nemo iure aspernatur maiores.</mark> Laboriosam placeat quae eos recusandae explicabo?</p>
</main>

If you want a more granular control over the scroll events, for example you might want to revert animations, add additional behaviours like staggering, etc... I suggest you to try the GSAP ScrollTrigger plugin, it makes things much easier than having to manipulate css and Intersection Observer directly.