Dramatic opening
This commit is contained in:
Ruben van de Ven
parent
7e0f414c66
commit
6d0ae9d21d
2 changed files with 65 additions and 17 deletions
|
|
@ -1,7 +1,12 @@
|
|||
<script lang="ts">
|
||||
import { fade , draw } from "svelte/transition";
|
||||
</script>
|
||||
|
||||
<g
|
||||
id="APM"
|
||||
transform="translate(298.72484444444126, 433.0485336906215)"
|
||||
class="s-vynWWFEzB3Z5"
|
||||
in:fade={{duration: 2000, delay: 3000}}
|
||||
>
|
||||
<circle r="5" class="s-vynWWFEzB3Z5" id="circle484" />
|
||||
<circle r="20" class="s-vynWWFEzB3Z5" id="circle486" />
|
||||
|
|
@ -27,12 +32,19 @@
|
|||
id="BC"
|
||||
transform="translate(298.72484444444126, 393.0485336906215)"
|
||||
class="s-vynWWFEzB3Z5"
|
||||
>
|
||||
in:fade={{duration: 2000, delay: 3500}}
|
||||
>
|
||||
<circle r="5" class="s-vynWWFEzB3Z5" id="circle498" />
|
||||
<circle r="20" class="s-vynWWFEzB3Z5" id="circle500" />
|
||||
<text class="nodeTitle s-vynWWFEzB3Z5" y="13" x="35" id="text502"
|
||||
>Handbibliotheek</text
|
||||
>
|
||||
</g>
|
||||
<g
|
||||
transform="translate(298.72484444444126, 393.0485336906215)"
|
||||
class=""
|
||||
in:fade={{duration: 2000, delay: 0}}
|
||||
>
|
||||
<text
|
||||
class="nodeTitle s-vynWWFEzB3Z5"
|
||||
y="38"
|
||||
|
|
@ -40,10 +52,31 @@
|
|||
id="text1097">Allard Pierson</text
|
||||
>
|
||||
</g>
|
||||
|
||||
<path
|
||||
style=""
|
||||
d="M 593.04204,421.82772 V 442.57506 L 579.95449,442.42775"
|
||||
id="path1093"
|
||||
in:draw={{duration: 2000, delay: 2500}}
|
||||
/>
|
||||
|
||||
<path
|
||||
style=""
|
||||
d="M 593.04204,421.82772 V 401.08039 L 492.42998,401.08039"
|
||||
id="path1093"
|
||||
in:draw={{duration: 800, delay: 2500}}
|
||||
/>
|
||||
<path
|
||||
style=""
|
||||
d="M 604.96062,421.82773 593.04204,421.82772"
|
||||
id="path1095"
|
||||
in:draw={{duration: 500, delay: 2000}}
|
||||
/>
|
||||
<g
|
||||
id="ARTIS"
|
||||
transform="translate(807.0959555555783, 551.9470916540013)"
|
||||
class="s-vynWWFEzB3Z5"
|
||||
in:fade={{duration: 2000, delay: 1500}}
|
||||
>
|
||||
<circle r="5" class="s-vynWWFEzB3Z5" id="circle505" />
|
||||
<circle r="20" class="s-vynWWFEzB3Z5" id="circle507" />
|
||||
|
|
@ -55,6 +88,7 @@
|
|||
id="BHBPU"
|
||||
transform="translate(408.1404000000112, 307.58142297433403)"
|
||||
class="s-vynWWFEzB3Z5"
|
||||
in:fade={{duration: 2000, delay: 2500}}
|
||||
>
|
||||
<circle r="5" class="s-vynWWFEzB3Z5" id="circle512" />
|
||||
<circle r="20" class="s-vynWWFEzB3Z5" id="circle514" />
|
||||
|
|
@ -66,6 +100,7 @@
|
|||
id="CEDLA"
|
||||
transform="translate(710.2181777777914, 820.5062916831351)"
|
||||
class="s-vynWWFEzB3Z5"
|
||||
in:fade={{duration: 2000, delay: 500}}
|
||||
>
|
||||
<circle r="5" class="s-vynWWFEzB3Z5" id="circle519" />
|
||||
<circle r="20" class="s-vynWWFEzB3Z5" id="circle521" />
|
||||
|
|
@ -76,6 +111,7 @@
|
|||
id="UBGW"
|
||||
transform="translate(160.2826222222393, 520.1182633671162)"
|
||||
class="s-vynWWFEzB3Z5"
|
||||
in:fade={{duration: 2000, delay: 1500}}
|
||||
>
|
||||
<circle r="5" class="s-vynWWFEzB3Z5" id="circle526" />
|
||||
<circle r="20" class="s-vynWWFEzB3Z5" id="circle528" />
|
||||
|
|
@ -87,6 +123,7 @@
|
|||
id="IVIR"
|
||||
transform="translate(730.9048444444488, 682.295035560214)"
|
||||
class="s-vynWWFEzB3Z5"
|
||||
in:fade={{duration: 2000, delay: 2500}}
|
||||
>
|
||||
<circle r="5" class="s-vynWWFEzB3Z5" id="circle533" />
|
||||
<circle r="20" class="s-vynWWFEzB3Z5" id="circle535" />
|
||||
|
|
@ -96,6 +133,7 @@
|
|||
id="IWO"
|
||||
transform="translate(1775.5955555555554, 3553.1193459656633)"
|
||||
class="s-vynWWFEzB3Z5"
|
||||
in:fade={{duration: 2000, delay: 100}}
|
||||
>
|
||||
<circle r="5" class="s-vynWWFEzB3Z5" id="circle540" />
|
||||
<circle r="20" class="s-vynWWFEzB3Z5" id="circle542" />
|
||||
|
|
@ -107,6 +145,7 @@
|
|||
id="JB"
|
||||
transform="translate(740.9048444444488, 750.295035560214)"
|
||||
class="s-vynWWFEzB3Z5"
|
||||
in:fade={{duration: 2000, delay: 0}}
|
||||
>
|
||||
<circle r="5" class="s-vynWWFEzB3Z5" id="circle547" />
|
||||
<circle r="20" class="s-vynWWFEzB3Z5" id="circle549" />
|
||||
|
|
@ -118,6 +157,7 @@
|
|||
id="REC"
|
||||
transform="translate(699.5315111111087, 623.2141384588231)"
|
||||
class="s-vynWWFEzB3Z5"
|
||||
in:fade={{duration: 2000, delay: 2500}}
|
||||
>
|
||||
<circle r="5" class="s-vynWWFEzB3Z5" id="circle554" />
|
||||
<circle r="20" class="s-vynWWFEzB3Z5" id="circle556" />
|
||||
|
|
@ -129,6 +169,7 @@
|
|||
id="AMC"
|
||||
transform="translate(1767.38706666667, 3460.8911949512853)"
|
||||
class="s-vynWWFEzB3Z5"
|
||||
in:fade={{duration: 2000, delay: 1500}}
|
||||
>
|
||||
<circle r="5" class="s-vynWWFEzB3Z5" id="circle561" />
|
||||
<circle r="20" class="s-vynWWFEzB3Z5" id="circle563" />
|
||||
|
|
@ -140,6 +181,7 @@
|
|||
id="PCHH"
|
||||
transform="translate(222.92706666665254, 150.79690464423038)"
|
||||
class="s-vynWWFEzB3Z5"
|
||||
in:fade={{duration: 2000, delay: 800}}
|
||||
>
|
||||
<circle r="5" class="s-vynWWFEzB3Z5" id="circle568" />
|
||||
<circle r="20" class="s-vynWWFEzB3Z5" id="circle570" />
|
||||
|
|
@ -151,6 +193,7 @@
|
|||
id="BETA"
|
||||
transform="translate(1687.8959555555593, 1008.3027457312287)"
|
||||
class="s-vynWWFEzB3Z5"
|
||||
in:fade={{duration: 2000, delay: 2000}}
|
||||
>
|
||||
<circle r="5" class="s-vynWWFEzB3Z5" id="circle575" />
|
||||
<circle r="20" class="s-vynWWFEzB3Z5" id="circle577" />
|
||||
|
|
@ -165,6 +208,7 @@
|
|||
id="UBB"
|
||||
transform="translate(220.2826222222393, 630.1182633671162)"
|
||||
class="s-vynWWFEzB3Z5"
|
||||
in:fade={{duration: 2000, delay: 0}}
|
||||
>
|
||||
<circle r="5" class="s-vynWWFEzB3Z5" id="circle582" />
|
||||
<circle r="20" class="s-vynWWFEzB3Z5" id="circle584" />
|
||||
|
|
@ -172,16 +216,6 @@
|
|||
>UB Singel</text
|
||||
>
|
||||
</g>
|
||||
<path
|
||||
style=""
|
||||
d="M 492.42998,401.08039 H 593.04204 V 442.57506 L 579.95449,442.42775"
|
||||
id="path1093"
|
||||
/>
|
||||
<path
|
||||
style=""
|
||||
d="M 593.04204,421.82772 604.96062,421.82773"
|
||||
id="path1095"
|
||||
/>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
|
|
|
|||
|
|
@ -160,13 +160,22 @@
|
|||
occurences: occurences,
|
||||
};
|
||||
|
||||
let tease_title = writable(true); //.filter((m, i) => i < 100);
|
||||
let tease_title = writable(false); //.filter((m, i) => i < 100);
|
||||
let drawn_motions = writable(<Motion[]>[]); //.filter((m, i) => i < 100);
|
||||
$: opacity = Math.max(0.055, Math.min(0.3, 70 / $drawn_motions.length));
|
||||
let overlay_motions = writable(<Motion[]>[]); //.filter((m, i) => i < 100);
|
||||
let events = writable(<Log[]>[]); //.filter((m, i) => i < 100);
|
||||
let current_item = writable(<Item | null>null); //.filter((m, i) => i < 100);
|
||||
|
||||
// when teasing the title, trigger fading out and in of the libraries
|
||||
let hide_libraries = true;
|
||||
tease_title.subscribe((value) => {
|
||||
if(value) {
|
||||
hide_libraries = true;
|
||||
setTimeout(()=> hide_libraries = false, 3000);
|
||||
}
|
||||
})
|
||||
|
||||
const viz_data: VizData = {
|
||||
tease_title: tease_title,
|
||||
drawn_motions: drawn_motions,
|
||||
|
|
@ -222,7 +231,7 @@
|
|||
</script>
|
||||
|
||||
{#if $tease_title}
|
||||
<h1 in:fade={{duration: 3000}}>library of <span id="motiontitle">motions</span></h1>
|
||||
<h1 in:fade={{ delay: 10000, duration: 3000}}>library of <span id="motiontitle">motions</span></h1>
|
||||
{/if}
|
||||
<div id="about">
|
||||
<span
|
||||
|
|
@ -253,7 +262,9 @@
|
|||
{/each}
|
||||
</g>
|
||||
<g id="libraries">
|
||||
{#if !hide_libraries}
|
||||
<LibrariesSvg />
|
||||
{/if}
|
||||
<!-- {#each locations.values() as node}
|
||||
<g id={node.code} transform="translate({node.x}, {node.y})">
|
||||
<circle r="5"></circle>
|
||||
|
|
@ -269,7 +280,7 @@
|
|||
|
||||
<div id="events">
|
||||
{#each $events as e}
|
||||
<div class="entry" in:slide={{ duration: 200 }}>
|
||||
<div class="entry" in:slide={{ duration: 200 }} out:fade={{duration: 2000}}>
|
||||
<!-- {m['Title (Complete)']} -->
|
||||
<span class="date" in:typewriter={{ delay: 1000, speed: 10 }}>
|
||||
<h3>
|
||||
|
|
@ -306,7 +317,7 @@
|
|||
{/each}
|
||||
</div>
|
||||
{#if $current_item}
|
||||
<div id="current">
|
||||
<div id="current" in:fade={{duration: 2000}} out:fade={{duration: 2000}}>
|
||||
<h3>Logbook of</h3>
|
||||
<h2>{$current_item.title}</h2>
|
||||
<p>{[$current_item.Date, $current_item.Publisher, $current_item.Place].filter((e) => e).join(', ')}</p>
|
||||
|
|
@ -331,6 +342,8 @@
|
|||
bottom: 20px;
|
||||
left: 20px;
|
||||
|
||||
width: 800px;
|
||||
|
||||
#events{
|
||||
position: relative;
|
||||
// max-height: 200px;
|
||||
|
|
@ -348,6 +361,7 @@
|
|||
|
||||
.date {
|
||||
width: 180px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.divider {
|
||||
display: flex;
|
||||
|
|
@ -396,7 +410,7 @@
|
|||
animation: fadeout;
|
||||
animation-duration: 3s;
|
||||
animation-delay: 10s;
|
||||
animation-timing-function: ease-in;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation-iteration-count: 1;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue