Commit 5eeb9897 authored by gijs's avatar gijs

Added parallax for the dialogue scroll

parent 15cb2ec5
...@@ -151,7 +151,7 @@ of a place to be, than a well studied research question. ...@@ -151,7 +151,7 @@ of a place to be, than a well studied research question.
exciting waves of new discoveries about movement. At a certain point the body withdrew and the conceptualisation exciting waves of new discoveries about movement. At a certain point the body withdrew and the conceptualisation
of movement entered the field. I ask myself if there is something new to find about movement through looking of movement entered the field. I ask myself if there is something new to find about movement through looking
for it within digital processes and if yes, can it maybe generate a new way of thinking body and of making dance? for it within digital processes and if yes, can it maybe generate a new way of thinking body and of making dance?
</p>en fait </p>
<p> <p>
<span class="name">Adva</span> I read once a Kabalah text about the letter . Sometimes this letter is used to indicate the name <span class="name">Adva</span> I read once a Kabalah text about the letter . Sometimes this letter is used to indicate the name
of god. In that case, it should be written, but not pronounced. Its not because it represents god, but because of god. In that case, it should be written, but not pronounced. Its not because it represents god, but because
...@@ -175,13 +175,13 @@ is still coming in. Equiped with different coloured technical tapes, each one co ...@@ -175,13 +175,13 @@ is still coming in. Equiped with different coloured technical tapes, each one co
to place the different markers. The installation of the tape uses walking techniques inspired by the performance to place the different markers. The installation of the tape uses walking techniques inspired by the performance
of Esther Ferrer of Esther Ferrer
<sup> <sup>
<a href="#note1">[1]</a> <a href="#note1">[1]</a>
</sup> or measured movements, rolled developed for the occasion. In the background we listen to Laurie Anderson </sup> or measured movements, rolled developed for the occasion. In the background we listen to Laurie Anderson
- O Superman. - O Superman.
</p> </p>
<ol class="footnotes"> <ol class="footnotes">
<li id="note1">Esther Ferrer, <li id="note1">Esther Ferrer,
<a href="https://www.youtube.com/watch?v=S6KflUAhQXI">Le chemin se fait en marchant</a> <a href="https://www.youtube.com/watch?v=S6KflUAhQXI">Le chemin se fait en marchant</a>
</li> </li>
</ol> </ol>
...@@ -347,12 +347,13 @@ font-style: normal; ...@@ -347,12 +347,13 @@ font-style: normal;
body { body {
margin: 21px; margin: 21px;
padding-right: 30em;
} }
/** Hiding default visual culture elements */ /** Hiding default visual culture elements */
.right-1 { .right-1 {
display: none; display: none;
} }
/** Page styles */ /** Page styles */
...@@ -381,6 +382,13 @@ margin-bottom: 9pt !important; ...@@ -381,6 +382,13 @@ margin-bottom: 9pt !important;
} }
#project-detail #project-detail-readme article #dialogue {
position: fixed;
right: 2em;
top: 0;
width: 20em;
}
#project-detail #project-detail-readme article #dialogue p { #project-detail #project-detail-readme article #dialogue p {
line-height: 1.4em; line-height: 1.4em;
font-family: "Ume"; font-family: "Ume";
...@@ -439,7 +447,7 @@ vertical-align: top; ...@@ -439,7 +447,7 @@ vertical-align: top;
#project-detail #project-detail-readme article .narrative { #project-detail #project-detail-readme article .narrative {
float: left; /* float: left; */
font-family: "Ume"; font-family: "Ume";
max-width: 25em; max-width: 25em;
letter-spacing: 0.03em; letter-spacing: 0.03em;
...@@ -459,7 +467,7 @@ color: forestgreen; ...@@ -459,7 +467,7 @@ color: forestgreen;
} }
#project-detail #project-detail-readme article .introduction:nth-child(n+2) { #project-detail #project-detail-readme article .introduction:nth-child(n+2) {
margin-left: 3%;#project-detail #project-detail-readme pp margin-left: 3%;
} }
#project-detail #project-detail-readme article .panel { #project-detail #project-detail-readme article .panel {
...@@ -490,11 +498,13 @@ margin-left: 1em; ...@@ -490,11 +498,13 @@ margin-left: 1em;
} }
#project-detail #project-detail-readme article iframe { #project-detail #project-detail-readme article iframe {
width: calc(90vw - 20em); width: calc(90vw - 25em);
height: calc((9 / 16) * (90vw - 20em)); height: calc((9 / 16) * (90vw - 25em));
} }
.video, .content {
display: block;
}
#one .content { #one .content {
background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/1.svg"); background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/1.svg");
...@@ -531,18 +541,19 @@ background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/8. ...@@ -531,18 +541,19 @@ background-image: url("http://osp.kitchen/api/osp.live.up-pen-down/raw/panels/8.
<script src="http://osp.kitchen/api/osp.live.up-pen-down/raw/player.js"></script> <script src="http://osp.kitchen/api/osp.live.up-pen-down/raw/player.js"></script>
<script> <script>
function autoStartPlayer(selector) { function autoStartPlayer(selector) {
var video = document.querySelector(selector); var video = document.querySelector(selector),
var player = new Vimeo.Player(video); player = new Vimeo.Player(video),
var windowHeight = window.innerHeight; auto = true,
var auto = true; disableAuto = function () { auto = false },
var disableAuto = function () { auto = false }; minVisible = (1 / 3);
var minVisible = (1 / 3);
player.on('play', disableAuto); player.on('play', disableAuto);
document.addEventListener('scroll', function () { document.addEventListener('scroll', function () {
var rect = video.getBoundingClientRect(); var windowHeight = window.innerHeight,
var top = rect.top; rect = video.getBoundingClientRect(),
var visible = Math.min(1, ((top <= 0) ? rect.top + rect.height : windowHeight - top) / rect.height); top = rect.top,
visible = Math.min(1, ((top <= 0) ? rect.top + rect.height : windowHeight - top) / rect.height);
if (auto) { if (auto) {
if (visible < minVisible) { if (visible < minVisible) {
...@@ -571,7 +582,51 @@ autoStartPlayer('#eight iframe'); ...@@ -571,7 +582,51 @@ autoStartPlayer('#eight iframe');
autoStartPlayer('#two iframe'); autoStartPlayer('#two iframe');
autoStartPlayer('#six iframe'); autoStartPlayer('#six iframe');
function parallax() {
var scrollY, element = document.querySelector('#dialogue');
var draw = function draw(force) {
if (window.scrollY != scrollY || force) {
scrollY = window.scrollY;
var speed = parseFloat(element.getAttribute('data-speed')),
distance = speed * scrollY;
element.style.transform = 'translate3d(0, -' + parseInt(distance) + 'px, 0)';
}
}
var drawer = function() {
draw();
requestAnimationFrame(drawer);
}
drawer();
return draw;
}
function updateScrollSpeed() {
var contentHeight = document.querySelector('html').getBoundingClientRect().height,
windowHeight = window.innerHeight,
windowScrollDistance = contentHeight - windowHeight,
element = document.querySelector('#dialogue'),
elementHeight = element.getBoundingClientRect().height,
elementScrollDistance = elementHeight - windowHeight,
elementScrollSpeed = elementScrollDistance / windowScrollDistance;
element.setAttribute('data-speed', elementScrollSpeed);
}
updateScrollSpeed();
var draw = parallax();
window.addEventListener('resize', function () {
updateScrollSpeed();
draw(true);
});
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment