colorlab
clone your own copy | download snapshot

Snapshots | iceberg

Inside this repository
about-single.html
text/html

Download raw (5.3 KB)

<!DOCTYPE html>
<html lang="en" id="about-page">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Laboratorium</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" href="">
  <link rel="stylesheet" href="styles.css">
  <!-- <script src="scripts/jquery-1.9.1.js"></script> -->
  <!-- <script src="scripts/jquery-ui-1.9.2.custom.js"></script> -->
  <style>
    :root {
      --background-color: #9F5881;
      --blocking-background-color: white;
      --header-color-mono: darkred;

      --header-color-one: red;
      --header-color-two: darkred;
      --header-color-three: darkgreen;
      --header-color-four: darkred;
    }

    #main {
      background: transparent;
    }

    .colored-wrapper-content, #main .colored-wrapper-content {
      background: transparent;
    }

    #main h1 {
      margin-top: 0;
    }

    #menu {
      padding: 50px 70px;
      --background-color: #E1A800;
    }


  </style>
</head>

<body>
  <!-- <div id="colors">
    <div class="colored-wrapper"></div>
  </div> -->
  <nav id="menu"  class="colored-wrapper">
    <ul class="">
      <li><a href="main.html">Laboratorium</a></li>
      <li><a href="about-single.html">Colorlab</a></li>
      <li><a href="project-page.html">Projects</a></li>
      <li><a href="education-page.html">Education</a></li>
    </ul>
  </nav>
  <!-- <div id="left-menu"  class="colored-wrapper">
    <div class="colored-wrapper-content">
      <h2>Living colors</h2>
      <h3>Bacteria</h3>
      <ul>
        <li>Spirulina</li>
        <li>Chelidonium majus</li>
      </ul>
      <h3>Algae</h3>
      <ul>
        <li>Dunaliella Salina</li>
        <li>Haematococcus pluvialis</li>
        <li>Porphyridium cruentum</li>
        <li>Chlorella</li>
        <li>Fucus</li>
        <li>Isatis Galbana</li>
      </ul>
      <h2>Traditional sources</h2>
      <ul>
        <li>Murex</li>
      </ul>
    </div>
  </div> -->
  <div id="main" class="colored-wrapper">
      <div class="colored-wrapper-content">
        <h1 class="colored">Colorlab</h1>
        <p>
          The Color Biolab is a transdisciplinary research project approaching the color field from different perspectives: from sustainable
          production and application, to the use of color as a common language between art and science. Starting from traditional
          coloring, to living organisms or waste, this project aims to reflect about the possibilities of new coloring sources,
          and the implications involved.
        </p>
        <p>
          Most of the work has been developed in Laboratorium, the experimental lab for art/design and biotechnology at KASK. In Laboratorium
          microorganisms have been cultured, pigment extraction has been performed and applied as well as microbial visualization
          or chemical reactions.
        </p>
        <p>
          Some of the results generated of this research have been exhibited and presented in national and international conferences
          and art spaces. Knowledge generated is transferred by workshops, presentations and a seminar, in and out of the
          art academy.
        </p>
    </div>
  </div>
  <!-- <div id="right-tags" class="colored-wrapper">
      <div class="colored-wrapper-content"></div>
  </div> -->

  <script>

    function patt(rot) {
      return 'repeating-linear-gradient(' + rot.toString(10) + 'deg, var(--background-color),  var(--background-color) 1px, transparent 1px,transparent 4px)';
    }

    function blockingPatt(rot) {
      return 'repeating-linear-gradient(' + rot.toString(10) + 'deg, var(--blocking-background-color),  var(--blocking-background-color) 3px, transparent 3px,transparent 4px)';
    }

    function initBackgrounds() {
      document.querySelectorAll('.colored-wrapper').forEach(el => {
        var rotation = parseInt(Math.random() * 90);
        el.dataset.rotation = rotation;
        el.dataset.speed = (Math.random() * 3) - 1.5;
        el.style.backgroundImage = patt(rotation);
        el.querySelectorAll('.colored-wrapper-content').forEach(elInner => {
          elInner.style.backgroundImage = blockingPatt(rotation + 90);
        });
      });

      var lastScrollY = null;

      function updateBackgrounds () {
        if (window.scrollY !== lastScrollY) {
          document.querySelectorAll('.colored-wrapper').forEach(el => {
            var rotation = Math.round((window.scrollY * parseFloat(el.dataset.speed) + parseInt(el.dataset.rotation)) % 360);
            el.style.backgroundImage = patt(rotation);
            el.querySelectorAll('.colored-wrapper-content').forEach(elInner => {
              elInner.style.backgroundImage = blockingPatt(rotation + 90);
            });
          });
          lastScrollY = window.scrollY;
        }

        window.requestAnimationFrame(updateBackgrounds);
      }

      updateBackgrounds();
    }

    function updateBarPosition () {
      var contentHeight = document.querySelector('html').getBoundingClientRect().height,
      windowHeight = window.innerHeight,
      windowScrollDistance = contentHeight - windowHeight,
      pos = window.scrollY / windowScrollDistance;
      document.querySelector('#colors').style.top = Math.round(pos * 70).toString(10) + 'vh';
    }


    initBackgrounds();

    (function () {

    })();

  </script>
</body>

</html>