regenbogen_underline.php

Quell Code

<style>
  h1 {
  --offset: 400px;
}
h1 span {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/spectrum.svg);
  background-repeat: repeat-x;
  background-size: 100vw 0.2em;
  background-position: left bottom 5px;
  background-position-x: var(--scrollPos);
}
h1 span:nth-of-type(2) {
  background-position-x: calc(var(--offset) + var(--scrollPos));
}

p {
  margin-bottom: 8rem;
}

body {
  font: 900 40px system-ui, -apple-system, sans-serif;
  letter-spacing: -1px;
  margin: 1rem;
  min-height: 200vh;
}
</style>
<p>Scroll down. </p>
<h1 aria-label="Rainbows are cool at any time.">
  <span>Rainbows are cool</span>
  <br>
  <span>at any time.</span>
</h1>
<p>Cool.</p>
<script>
  window.addEventListener("scroll", e => {
  // Dealing with Safari difference.
  // look into scrollingElement https://caniuse.com/#feat=document-scrollingelement
  let scrollTop = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop; 
  let newPos = scrollTop + "px";
  document.documentElement.style.setProperty('--scrollPos', newPos);
});
</script>