vizchange-animation-story
Version:
beta testing story tool for vizchange.net
159 lines (138 loc) • 8.13 kB
HTML
<!-- extends default-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/browning.css">
<link rel="stylesheet" type="text/css" href="css/z-axis.css">
<link rel="stylesheet" type="text/css" href="css/speechbubbles.css">
<script src="client/bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
</head> <body>
<script type="text/javascript">
((acts) => {
gsap.registerPlugin(ScrollTrigger);
acts = acts.split(",");
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
window.addEventListener('load', function () {
/*
const headings = gsap.utils.toArray(".caption");
const sections = gsap.utils.toArray(".segment")
headings.forEach((title, i) => {
gsap.to(title,
{
ease: 'power1.inOut',
scrollTrigger: {
trigger: sections[i],
start: 'top top',
end: 'bottom top',
scrub: true,
pin: true
},
})
});
*/
acts.forEach(each => {
switch (each) {
case 'imersion':
new Imersive();
break;
case 'discovery':
new Discovery();
break;
case 'fishes':
new Fishes();
break;
default:
}
})
ScrollTrigger.refresh()
})
})("imersion")
</script> <div class="content" id=imersion>
<div id=titlescreen class="segment">
<div class="header">
<h1 class="title">Browning</h1>
<div class="menu">
<a class="button" href="#high">Immersion</a>
<a class="button" href="/browning-discovery">Discovery Dive</a>
<a class="button" href="/browning-fishes">Fish Stories</a>
<a class="button" href="/browning-evidencia">Local Evidencia</a>
</div>
</div>
<div class="captions">
</div> </div>
<div id=high class="segment">
<div class="captions">
<p class="caption" id=high-text 1>
<strong>
What is this high place?
</strong>
<br>
Mountains are surrounding you, you can feel the wind from the lack of trees. It looks like the arctic. Let’s wonder a bit further.
</p>
</div> </div>
<div id=rain class="segment">
<div class="captions">
<p class="caption" id=rain-text 1>
<strong>
</strong>
Coming down was a good idea. You can now see clearer, is that a lake that you spot from afar ? Let’s hurry, it’s starting to rain heavily. It is warmer than what you expected here. +1°c = +7% more moisture in the atmosphere
</p>
</div> </div>
<div id=mud class="segment">
<div class="captions">
<p class="caption" id=mud-text 1>
<strong>
</strong>
The ground doesn’t seem very stable here but it looks quite rich. Browning and greening are happening at the same time.
</p>
</div> </div>
<div id=lake class="segment">
<div class="captions">
<p class="caption" id=lake-text 1>
<strong>
</strong>
Looks like you made it to the lake ! Let’s swim ! But the water is so brown… It looks dark, you can’t see what’s underneath, are you sure you want to venture in it ?
</p>
</div> </div>
<div>
<image class="image-block background" id=a1 src=/res/browning/imersion/a/1a.png></image>
<image class="image-block detail" id=a2 src=/res/browning/imersion/a/2a.png></image>
<image class="image-block ground" id=a3 src=/res/browning/imersion/a/3a.png></image>
<image class="image-block clouds" id=a4 src=/res/browning/imersion/a/4a.png></image>
</div>
<div>
<image class="image-block background" id=b1 src=/res/browning/imersion/b/1b-background.png></image>
<image class="image-block detail-back" id=b2 src=/res/browning/imersion/b/2b-detail.png></image>
<image class="image-block clouds" id=b3 src=/res/browning/imersion/b/3b-clouds.png></image>
<image class="image-block ground-back" id=b4 src=/res/browning/imersion/b/4b-ground.png></image>
</div>
<div>
<image class="image-block background" id=c1 src=/res/browning/imersion/c/1c-background.png></image>
<image class="image-block detail" id=c2 src=/res/browning/imersion/c/2c-detail.png></image>
<image class="image-block clouds" id=c3 src=/res/browning/imersion/c/3c-clouds.png></image>
<image class="image-block ground" id=c4 src=/res/browning/imersion/c/4c-ground.png></image>
</div>
<div>
<image class="image-block background-back" id=d1 src=/res/browning/discovery/background_far.png></image>
<image class="image-block background" id=d2 src=/res/browning/imersion/d/2d-background.png></image>
<image class="image-block ground" id=d3 src=/res/browning/imersion/d/3d-water.png></image>
</div>
</div>
<div class="segment">
<div class="fotnote">
<div class="menu">
<a class="button" href="#high">Immersion</a>
<a class="button" href="/browning-discovery">Discovery Dive</a>
<a class="button" href="/browning-fishes">Fish Stories</a>
<a class="button" href="/browning-evidencia">Local Evidencia</a>
</div>
</div>
</div>
<!--
<div class="bottom"></div>
<div class="right-side"></div>
--> </body>
</html>