colorlab
clone your own copy | download snapshot

Snapshots | iceberg

Inside this repository
sticky.html
text/html

Download raw (2.2 KB)

<!DOCTYPE html>
<html>

<head>
  <style>
    .spacer {
      width: 200px;
      height: 800px;
    }

    header {
      position: sticky;
      top: 50px;
      background: repeating-linear-gradient(17deg, black, black 1px, transparent 1px, transparent 6px);
      padding: 50px;
      z-index: 1;
    }

    header h1 {
      background: white;
      padding: 10px;
      text-align: center;
    }

    .colors {
      position: sticky;
      top: 0;
      right: 0;
      left: 0;
      height: 50vh;
    }

    .colors div {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    .colors div:nth-of-type(1) {
      background: repeating-linear-gradient(17deg, black, black 1.5px, transparent 1.5px, transparent 6px);
    }

    .colors div:nth-of-type(2) {
      background: repeating-linear-gradient(17deg, black, black 1.5px, transparent 1.5px,transparent 6px);
    }
  </style>
</head>

<body>
    <div class="colors">
    <div></div>
  </div>
  <div class="spacer"></div>
  <div class="colors">
    <div></div>
  </div>
  <div class="spacer"></div>
  <header>
    <h1>Test</h1>
  </header>
  <div class="spacer"></div>
  <div class="colors">
    <div></div>
  </div>
  <div class="spacer"></div>
  <script>

    function gradient(rot, gradient) {
      return gradient.replace(/\(\-?[\d\.]+deg/, '(' + rot + 'deg');
    }

    function initBackgrounds() {
      // document.querySelectorAll('#menu, li, #left-menu').forEach(el => {
      document.querySelectorAll('header, .colors div').forEach(el => {
        var rotation = parseInt(Math.random() * 90);
        el.dataset.rotation = rotation;
        el.dataset.speed = (Math.random() * 3) - 1.5;
        el.style.backgroundImage = gradient(rotation, window.getComputedStyle(el).backgroundImage);
      });
    }

    function updateBackgrounds() {
      document.querySelectorAll('[data-rotation]').forEach(el => {
        var rotation = (((window.scrollY) % 360) + parseInt(el.dataset.rotation)) / parseFloat(el.dataset.speed);
        el.style.backgroundImage = gradient(rotation, window.getComputedStyle(el).backgroundImage);
      });
    }

    document.addEventListener('scroll', updateBackgrounds);

    initBackgrounds();

  </script>
</body>

</html>