Gitlab will be down on Friday 25th May (from 9:00 am to 12:00 )

Commit 5eeb9897 by gijs

Added parallax for the dialogue scroll

parent 15cb2ec5
......@@ -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
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?
</p>en fait
</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
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
to place the different markers. The installation of the tape uses walking techniques inspired by the performance
of Esther Ferrer
<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
- O Superman.
</p>
<ol class="footnotes">
<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>
</ol>
......@@ -347,12 +347,13 @@ font-style: normal;
body {
margin: 21px;
padding-right: 30em;
}
/** Hiding default visual culture elements */
.right-1 {
display: none;
display: none;
}
/** Page styles */
......@@ -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 {
line-height: 1.4em;
font-family: "Ume";
......@@ -439,7 +447,7 @@ vertical-align: top;
#project-detail #project-detail-readme article .narrative {
float: left;
/* float: left; */
font-family: "Ume";
max-width: 25em;
letter-spacing: 0.03em;
......@@ -459,7 +467,7 @@ color: forestgreen;
}
#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 {
......@@ -490,11 +498,13 @@ margin-left: 1em;
}
#project-detail #project-detail-readme article iframe {
width: calc(90vw - 20em);
height: calc((9 / 16) * (90vw - 20em));
width: calc(90vw - 25em);
height: calc((9 / 16) * (90vw - 25em));
}
.video, .content {
display: block;
}
#one .content {
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.
<script src="http://osp.kitchen/api/osp.live.up-pen-down/raw/player.js"></script>
<script>
function autoStartPlayer(selector) {
var video = document.querySelector(selector);
var player = new Vimeo.Player(video);
var windowHeight = window.innerHeight;
var auto = true;
var disableAuto = function () { auto = false };
var minVisible = (1 / 3);
var video = document.querySelector(selector),
player = new Vimeo.Player(video),
auto = true,
disableAuto = function () { auto = false },
minVisible = (1 / 3);
player.on('play', disableAuto);
document.addEventListener('scroll', function () {
var rect = video.getBoundingClientRect();
var top = rect.top;
var visible = Math.min(1, ((top <= 0) ? rect.top + rect.height : windowHeight - top) / rect.height);
var windowHeight = window.innerHeight,
rect = video.getBoundingClientRect(),
top = rect.top,
visible = Math.min(1, ((top <= 0) ? rect.top + rect.height : windowHeight - top) / rect.height);
if (auto) {
if (visible < minVisible) {
......@@ -571,7 +582,51 @@ autoStartPlayer('#eight iframe');
autoStartPlayer('#two 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>
</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