AlexRatmansky · October 28, 2020 13:42
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @import url("https://fonts.googleapis.com/css?family=Merriweather:400,900&display=swap");

      html {
        background: #eee;
        overflow-y: auto;
      }

      body {
        min-height: 150vh;
        font-family: "Merriweather", serif;
        line-height: 1.5;
        font-size: 3vmin;
        @media (min-width: 600px) {
          font-size: 18px;
        }
      }

      p {
        max-width: 25em;
        margin: 2em auto;
        padding: 0 1em;
        color: rgba(25, 25, 25, 0.5);
      }

      p strong {
        display: block;
        text-align: center;
        color: #000;
      }
    </style>
  </head>
  <body>
    <p><strong>Enjoy the scroll 👇</strong></p>

    <p>
      Inspired by
      <a
        href="https://www.nytimes.com/interactive/2019/07/22/us/politics/elizabeth-warren-selfies.html"
        >this article</a
      >. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
      bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a
      bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet
      est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus.
      Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a
      bibendum est. Mauris vehicula cursus risus id luctus. Curabitur accumsan
      venenatis nibh, non egestas ipsum vulputate ac. Vivamus consectetur dolor
      sit amet enim aliquet eu scelerisque ipsum hendrerit. Donec lobortis
      suscipit vestibulum. Nullam luctus pellentesque risus in ullamcorper. Nam
      neque nunc, mattis vitae ornare ut, feugiat a erat. Ut tempus iaculis
      augue vel pellentesque.
    </p>

    <p>
      Vestibulum nunc massa, gravida quis porta nec, feugiat id metus. Nunc ac
      arcu dolor, quis vestibulum leo. Cras viverra mollis ipsum, non rhoncus
      lectus aliquam et. Morbi faucibus purus sit amet lacus aliquet elementum.
      Donec sit amet posuere enim. Cras in eros id tortor fringilla ultricies.
      Mauris faucibus ullamcorper velit, pulvinar varius odio eleifend eu.
      Quisque id odio metus. Morbi adipiscing ultricies posuere. Pellentesque
      elementum porttitor eros in molestie. Maecenas ut leo quis nisi tempor
      tincidunt.
    </p>

    <svg
    id="text-container"
    viewBox="0 0 1000 200"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      id="text-curve"
      d="M0 100s269.931 86.612 520 0c250.069-86.612 480 0 480 0"
      fill="none"
      stroke="red"
    />

    <text y="40" font-size="32">
      <textPath id="text-path" href="#text-curve">
        * Keyframers really know animation.
      </textPath>
    </text>
  </svg>

    <p>
      Donec nunc ligula, vulputate quis mollis eu, interdum quis libero. Donec
      nulla ante, facilisis sit amet vulputate at, tincidunt a velit. Maecenas
      vestibulum, nulla sed tincidunt viverra, lorem turpis aliquam urna, ut
      pretium orci purus consequat augue. Etiam a enim orci, vitae pulvinar
      odio. In elit urna, tincidunt a pellentesque et, scelerisque at nibh. Sed
      nec est sapien. Aliquam ullamcorper eros eu quam ultrices vel faucibus
      eros interdum. Etiam mattis eleifend sapien, eu iaculis massa feugiat sed.
      Aliquam erat volutpat. Vivamus facilisis ultricies eros, a pretium purus
      mollis id. Sed dapibus elit ut neque rutrum dignissim. Nulla eros nisl,
      venenatis quis rhoncus sit amet, molestie nec nisl. Pellentesque vel neque
      sapien, et sagittis nulla.
    </p>

    <p>
      Aliquam eu iaculis mauris. Etiam arcu lectus, imperdiet sit amet volutpat
      vitae, commodo sed nibh. Fusce faucibus tempor cursus. Donec ut ligula
      tortor. Maecenas malesuada, diam vitae pharetra dictum, erat ante iaculis
      risus, sed sollicitudin nisl nisl vel metus. Nulla libero augue, convallis
      nec luctus id, iaculis nec urna. Cras vitae mi ut augue ultricies tempus.
    </p>

    <p>
      Vestibulum euismod vehicula sollicitudin. Duis nibh justo, rhoncus ac
      ullamcorper nec, rutrum sit amet leo. Pellentesque habitant morbi
      tristique senectus et netus et malesuada fames ac turpis egestas.
      Vestibulum varius posuere nisi sed aliquet. Etiam dolor nisi, placerat vel
      congue tempus, posuere sed erat. Phasellus turpis eros, molestie sed
      consequat in, pretium at erat. In sed faucibus metus. Vestibulum fermentum
      libero nec eros fermentum dapibus. Duis nec libero eros. Pellentesque
      magna ligula, sagittis dictum fringilla at, posuere porttitor sem. Donec
      aliquam, ipsum quis pulvinar dapibus, augue sem viverra sapien, nec tempus
      odio nulla ac metus. Nunc ut augue mi, nec consequat urna.
    </p>

    <script>
      var textPath = document.getElementById("text-path");

      var textContainer = document.getElementById("text-container");

      var path = document.querySelector(textPath.getAttribute("href"));

      var pathLength = path.getTotalLength();

      updateTextPathOffset(pathLength);

      window.addEventListener("scroll", onScroll);

      function onScroll() {
        requestAnimationFrame(() => {
          var rect = textContainer.getBoundingClientRect();
          var scrollPercent = rect.y / window.innerHeight;
          updateTextPathOffset(scrollPercent * 2 * pathLength);
        });
      }

      function updateTextPathOffset(offset) {
        textPath.setAttribute("startOffset", offset);
      }
    </script>

    <!-- <script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script> -->
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<style>
	@import url("https://fonts.googleapis.com/css?family=Merriweather:400,900&display=swap");

	html {
	background: #eee;
	overflow-y: auto;
	}

	body {
	min-height: 150vh;
	font-family: "Merriweather", serif;
	line-height: 1.5;
	font-size: 3vmin;
	@media (min-width: 600px) {
	font-size: 18px;
	}
	}

	p {
	max-width: 25em;
	margin: 2em auto;
	padding: 0 1em;
	color: rgba(25, 25, 25, 0.5);
	}

	p strong {
	display: block;
	text-align: center;
	color: #000;
	}
	</style>
	</head>
	<body>
	<p><strong>Enjoy the scroll 👇</strong></p>

	<p>
	Inspired by
	<a
	href="https://www.nytimes.com/interactive/2019/07/22/us/politics/elizabeth-warren-selfies.html"
	>this article</a
	>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
	bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a
	bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet
	est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus.
	Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a
	bibendum est. Mauris vehicula cursus risus id luctus. Curabitur accumsan
	venenatis nibh, non egestas ipsum vulputate ac. Vivamus consectetur dolor
	sit amet enim aliquet eu scelerisque ipsum hendrerit. Donec lobortis
	suscipit vestibulum. Nullam luctus pellentesque risus in ullamcorper. Nam
	neque nunc, mattis vitae ornare ut, feugiat a erat. Ut tempus iaculis
	augue vel pellentesque.
	</p>

	<p>
	Vestibulum nunc massa, gravida quis porta nec, feugiat id metus. Nunc ac
	arcu dolor, quis vestibulum leo. Cras viverra mollis ipsum, non rhoncus
	lectus aliquam et. Morbi faucibus purus sit amet lacus aliquet elementum.
	Donec sit amet posuere enim. Cras in eros id tortor fringilla ultricies.
	Mauris faucibus ullamcorper velit, pulvinar varius odio eleifend eu.
	Quisque id odio metus. Morbi adipiscing ultricies posuere. Pellentesque
	elementum porttitor eros in molestie. Maecenas ut leo quis nisi tempor
	tincidunt.
	</p>

	<svg
	id="text-container"
	viewBox="0 0 1000 200"
	xmlns="http://www.w3.org/2000/svg"
	>
	<path
	id="text-curve"
	d="M0 100s269.931 86.612 520 0c250.069-86.612 480 0 480 0"
	fill="none"
	stroke="red"
	/>

	<text y="40" font-size="32">
	<textPath id="text-path" href="#text-curve">
	* Keyframers really know animation.
	</textPath>
	</text>
	</svg>

	<p>
	Donec nunc ligula, vulputate quis mollis eu, interdum quis libero. Donec
	nulla ante, facilisis sit amet vulputate at, tincidunt a velit. Maecenas
	vestibulum, nulla sed tincidunt viverra, lorem turpis aliquam urna, ut
	pretium orci purus consequat augue. Etiam a enim orci, vitae pulvinar
	odio. In elit urna, tincidunt a pellentesque et, scelerisque at nibh. Sed
	nec est sapien. Aliquam ullamcorper eros eu quam ultrices vel faucibus
	eros interdum. Etiam mattis eleifend sapien, eu iaculis massa feugiat sed.
	Aliquam erat volutpat. Vivamus facilisis ultricies eros, a pretium purus
	mollis id. Sed dapibus elit ut neque rutrum dignissim. Nulla eros nisl,
	venenatis quis rhoncus sit amet, molestie nec nisl. Pellentesque vel neque
	sapien, et sagittis nulla.
	</p>

	<p>
	Aliquam eu iaculis mauris. Etiam arcu lectus, imperdiet sit amet volutpat
	vitae, commodo sed nibh. Fusce faucibus tempor cursus. Donec ut ligula
	tortor. Maecenas malesuada, diam vitae pharetra dictum, erat ante iaculis
	risus, sed sollicitudin nisl nisl vel metus. Nulla libero augue, convallis
	nec luctus id, iaculis nec urna. Cras vitae mi ut augue ultricies tempus.
	</p>

	<p>
	Vestibulum euismod vehicula sollicitudin. Duis nibh justo, rhoncus ac
	ullamcorper nec, rutrum sit amet leo. Pellentesque habitant morbi
	tristique senectus et netus et malesuada fames ac turpis egestas.
	Vestibulum varius posuere nisi sed aliquet. Etiam dolor nisi, placerat vel
	congue tempus, posuere sed erat. Phasellus turpis eros, molestie sed
	consequat in, pretium at erat. In sed faucibus metus. Vestibulum fermentum
	libero nec eros fermentum dapibus. Duis nec libero eros. Pellentesque
	magna ligula, sagittis dictum fringilla at, posuere porttitor sem. Donec
	aliquam, ipsum quis pulvinar dapibus, augue sem viverra sapien, nec tempus
	odio nulla ac metus. Nunc ut augue mi, nec consequat urna.
	</p>

	<script>
	var textPath = document.getElementById("text-path");

	var textContainer = document.getElementById("text-container");

	var path = document.querySelector(textPath.getAttribute("href"));

	var pathLength = path.getTotalLength();

	updateTextPathOffset(pathLength);

	window.addEventListener("scroll", onScroll);

	function onScroll() {
	requestAnimationFrame(() => {
	var rect = textContainer.getBoundingClientRect();
	var scrollPercent = rect.y / window.innerHeight;
	updateTextPathOffset(scrollPercent * 2 * pathLength);
	});
	}

	function updateTextPathOffset(offset) {
	textPath.setAttribute("startOffset", offset);
	}
	</script>

	<!-- <script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script> -->
	</body>
	</html>