mtn/minimal_scroll_demo.html

## minimal_scroll_demo.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Scroll demo</title>

    <style>
      #canvas {
        height: 1200px;
        background-color: rgb(69, 111, 225)
      }
      #it {
        height: 100px;
        width: 100px;
        position: fixed;
        top: 0px;
        left: 0px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="canvas"></div>
    <div id="it"></div>
  </body>

  <script defer>
    const [canvasRed, canvasGreen, canvasBlue] = [69, 111, 225];
    const [itRed, itGreen, itBlue] = [255, 0, 0];
    const canvas = document.querySelector('#canvas');
    const it = document.querySelector('#it');

    window.addEventListener('scroll', () => {
      const y = 1 + (window.scrollY || window.pageYOffset) / 150;
      const [cR, cG, cB] = [canvasRed/y, canvasGreen/y, canvasBlue/y].map(Math.round);
      const [itR, itG, itB] = [itRed/y, itGreen/y, itBlue/y].map(Math.round);
      canvas.style.backgroundColor = `rgb(${cR}, ${cG}, ${cB})`;
      it.style.backgroundColor = `rgb(${itR}, ${itG}, ${itB})`;
    })
  </script>
</html>
	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<meta charset="utf-8">
	<title>Scroll demo</title>

	<style>
	#canvas {
	height: 1200px;
	background-color: rgb(69, 111, 225)
	}
	#it {
	height: 100px;
	width: 100px;
	position: fixed;
	top: 0px;
	left: 0px;
	background-color: red;
	}
	</style>
	</head>
	<body>
	<div id="canvas"></div>
	<div id="it"></div>
	</body>

	<script defer>
	const [canvasRed, canvasGreen, canvasBlue] = [69, 111, 225];
	const [itRed, itGreen, itBlue] = [255, 0, 0];
	const canvas = document.querySelector('#canvas');
	const it = document.querySelector('#it');

	window.addEventListener('scroll', () => {
	const y = 1 + (window.scrollY \|\| window.pageYOffset) / 150;
	const [cR, cG, cB] = [canvasRed/y, canvasGreen/y, canvasBlue/y].map(Math.round);
	const [itR, itG, itB] = [itRed/y, itGreen/y, itBlue/y].map(Math.round);
	canvas.style.backgroundColor = `rgb(${cR}, ${cG}, ${cB})`;
	it.style.backgroundColor = `rgb(${itR}, ${itG}, ${itB})`;
	})
	</script>
	</html>