Download raw (6.3 KB)
<!DOCTYPE html>
<html lang="en" id="about-page">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>ENGAGEMENT</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-other.css">
<!-- <script src="scripts/jquery-1.9.1.js"></script> -->
<!-- <script src="scripts/jquery-ui-1.9.2.custom.js"></script> -->
<style>
:root {
--header-color-mono: darkred;
--background-color: #9F5881;
--blocking-background-color: white;
--header-color-one: red;
--header-color-two: darkred;
--header-color-three: darkgreen;
--header-color-four: darkred;
}
#main {
--background-color: darkblue;
padding: 75px;
}
#main .patterned-background {
padding: 50px;
}
/* background: white; */
#main h1 {
margin-top: 0;
}
#menu {
padding: 50px 70px;
--background-color: #E1A800;
}
#colors {
position: fixed;
top: 0;
bottom: 0;
z-index: -1;
height: 100vh;
}
</style>
</head>
<body>
<div id="colors">
<div class="patterned" id="color-one"></div>
<!-- <div class="patterned" id="color-two"></div> -->
</div>
<nav id="menu" class="patterned">
<ul class="">
<li><a href="main.html">Colorlab</a></li>
<li><a href="about-single.html">Laboratorium</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="patterned-border">
<div class="patterned-background">
<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 src="backgrounds.js"></script>
<script src="movements.js"></script>
<script>
window.addEventListener('load', function () {
initBackgrounds();
// Move
registerMovement('#colors div', function (el, position) {
el.style.setProperty('top', Math.round(position * 65).toString() + 'vh');
el.style.setProperty('bottom', Math.round(80 - position * 80).toString() + 'vh');
});
// Collapse
// registerMovement('#colors div', function (el, position) {
// el.style.setProperty('top', Math.round(position * 45).toString() + 'vh');
// el.style.setProperty('bottom', Math.round(position * 45).toString() + 'vh');
// });
// Expand
// registerMovement('#colors div', function (el, position) {
// el.style.setProperty('top', Math.round(15 - position * 15).toString() + 'vh');
// el.style.setProperty('bottom', Math.round(75 - position * 75).toString() + 'vh');
// });
// Horizontal
// registerMovement('#colors div', function (el, position) {
// el.style.setProperty('left', Math.round(position * 80).toString() + 'vw');
// el.style.setProperty('right', Math.round(80 - position * 80).toString() + 'vw');
// });
// Combined
// registerMovement('#colors div', function (el, position) {
// el.style.setProperty('top', Math.round(position * 65).toString() + 'vh');
// el.style.setProperty('bottom', Math.round(80 - position * 80).toString() + 'vh');
// el.style.setProperty('left', Math.round(position * 80).toString() + 'vw');
// el.style.setProperty('right', Math.round(80 - position * 80).toString() + 'vw');
// });
// Two
// Also uncomment the second color div
// registerMovement('#color-one', function (el, position) {
// el.style.setProperty('top', Math.round(position * 50).toString() + 'vh');
// el.style.setProperty('bottom', Math.round(80 - position * 80).toString() + 'vh');
// });
// registerMovement('#color-two', function (el, position) {
// el.style.setProperty('top', Math.round(65 - position * 65).toString() + 'vh');
// el.style.setProperty('bottom', Math.round(position * 80).toString() + 'vh');
// });
});
/*
(function () {file:///home/gijs/Documents/osp/osp.work.colorlab/website-layout/about-single.html
var lastY, scrollDistance;
function tick() {
if (window.scrollY !== lastY) {
scrollDistance = document.body.scrollHeight - window.innerHeight,
position = window.scrollY / scrollDistance,
lastY = window.scrollY;
console.log(scrollDistance, window.scrollY, position);
var el = document.querySelector('#colors div');
}
window.requestAnimationFrame(tick);
}
tick();
})();
*/
</script>
</body>
</html>