You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

143 lines
4.4 KiB
HTML

{% extends "base.html" %}
{% block head %}
{{ super() }}
<link rel="stylesheet" type="text/css" href="{{ THEME_STATIC_DIR }}/css/flyer.css" />
<!-- GRID DRAWING
------------------------------------------------------------------- -->
<script src="{{ THEME_STATIC_DIR }}/js/tools/css-grid-drawing.js"></script>
{% endblock %}
{% block scroll_content %}
<article class="flyer">
<div class="page recto">
<div class="layer recto__text">
<header>
<h2 class="phase-name font-big new-moon-fvs">New moon&nbsp;</h2>
<h2 class="font-big new-moon-slanted-fvs">walks</h2>
<h2 class="phase-name font-big full-moon-fvs">Full moon&nbsp;</h2>
<h2 class="font-big full-moon-slanted-fvs">walks</h2>
</header>
<main class="text-content recto__langs">
<div class="recto__lang">
<p class="font-up">en</p>
<div class="progressive-fvs">
{{ page.sections["en"] }}
</div>
</div>
<div class="recto__lang">
<p class="font-up">fr</p>
<div class="progressive-fvs">
{{ page.sections["fr"] }}
</div>
</div>
<div class="recto__lang">
<p class="font-up">nl</p>
<div class="progressive-fvs">
{{ page.sections["nl"] }}
</div>
</div>
</main>
<footer>
<a class="mono-big" href="http://moonwalks.be">moonwalks.be</a>
<p class="mono">
an initiative by Anaïs Berck
</p>
</footer>
</div>
</div>
<div class="page verso">
<div class="page-rotate">
<!-- <div class="layer drawing-back">
</div>
<div id="verso-drawing" class="layer drawing-grid">
</div> -->
<div class="layer svg-layer">
{% include 'inline-svg/bouleau.svg' %}
</div>
<div class="layer new-full-drawing">
<div class="new-moon-drawing"></div>
<div class="full-moon-drawing"></div>
</div>
<div id="verso-drawing" class="layer verso__text">
<footer class="mono-big">
<a href="http://moonwalks.be">moonwalks.be</a>
<p class="mono">
an initiative by Anaïs Berck
</p>
</footer>
</div>
</div>
</div>
</article>
<template id="leaf-element">
<div class="leaf">
</div>
</template>
<script>
// ___ GRID INIT ___
const CELL_SIZE = [80,80];
const GRID_ID = "verso-drawing";
mygrid = new Grid(GRID_ID, CELL_SIZE, "STRETCH");
// ___ ELEMENT INIT ___
myelement = new GridElement("leaf-element");
mygrid.addElement(myelement);
// ___ CUSTOM MOUVEMENT ___
mygrid.addMouvement(random_rot);
mygrid.addMouvement(scattered);
//mygrid.draw();
</script>
{% endblock %}
{% block js_body %}
{{ super() }}
<script>
let prog_fvs = document.getElementsByClassName("progressive-fvs");
for (let div of prog_fvs) {
// separate every words in the p as a span
let ps = div.getElementsByTagName("p");
for (let p of ps){
p.innerHTML = p.innerHTML.split(" ").map(x => "<span class='prog-fvs__span'>" + x + "</span>").join(" ");
}
}
for (let div of prog_fvs) {
let prog_spans = div.getElementsByClassName("prog-fvs__span");
let i = 0;
for (let prog_span of prog_spans){
let value = (i / (prog_spans.length - 1)) / 2;
console.log(value);
updateAxis($(prog_span), value, secondAxis=false);
i = i + 1;
}
}
</script>
{% endblock %}