vizchange-animation-story
Version:
beta testing story tool for vizchange.net
235 lines (213 loc) • 12.5 kB
HTML
<!-- extends default-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/browning.css">
<link rel="stylesheet" type="text/css" href="css/menu.css">
<link rel="stylesheet" type="text/css" href="css/z-axis.css">
<link rel="stylesheet" type="text/css" href="css/speechbubbles.css">
<link rel="stylesheet" type="text/css" href="css/margins.css">
<link rel="stylesheet" type="text/css" href="css/browning_imersion.css"></link>
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/MotionPathPlugin.min.js"></script>
<!-- plot script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://acp.k8s.glimworks.se/client/bundle.js"></script></script>
<!-- rain drops -->
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/rainyday.js/0.1.2/rainyday.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
-->
</head> <body>
<script type="text/javascript">
let innerHeight = window.innerHeight;
let innerWidth = window.innerWidth;
/*
switch (window.name) {
case 'simulator':
innerHeight = innerHeight*window.devicePixelRatio;
innerWidth = innerWidth*window.devicePixelRatio;
default:
}
*/
let vh = innerHeight * 0.01;
document.documentElement.style.setProperty('--vh-store', `${vh}px`);
let vw = innerWidth * 0.01;
document.documentElement.style.setProperty('--vw-store', `${vw}px`);
window.addEventListener('resize', () => {
// We execute the same script as before
vh = innerHeight * 0.01;
document.documentElement.style.setProperty('--vh-store', `${vh}px`);
vw = innerWidth * 0.01;
document.documentElement.style.setProperty('--vw-store', `${vw}px`);
});
((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;
case 'evidence':
new Evidence();
break;
case 'menu':
new Menu();
break;
default:
}
})
ScrollTrigger.refresh()
})
})("imersion")
</script>
<div class="content" id=imersion>
<div id=titlescreen class="segment">
<!--TODO rename to type_github -->
<div class="header">
<h1 class="title">Browning</h1>
<div class="menu">
<a class="button" href="/vizchange-animation/browning-menu">Intro</a>
<a class="button" href="/vizchange-animation#high">Immersion</a>
<a class="button" href="/vizchange-animation/browning-discovery">Discovery Dive</a>
<a class="button" href="/vizchange-animation/browning-fishes">Fish Stories</a>
<a class="button" href="/vizchange-animation/browning-evidence">Local Evidencia</a>
</div>
</div>
<div class="captions">
</div> </div>
<div id=high class="segment">
<!--TODO rename to type_github -->
<div class="captions">
<p class="caption-left" 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">
<!--TODO rename to type_github -->
<div class="captions">
<p class="caption-left" 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">
<!--TODO rename to type_github -->
<div class="captions">
<p class="caption-left" 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">
<!--TODO rename to type_github -->
<div class="captions">
<p class="caption-left" 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 class="image-container">
<image class="image-block 10 " style="z-index: 10" id=a1 src=/vizchange-animation/res/browning/imersion/a/1a.png></image>
<image class="image-block 20 " style="z-index: 20" id=a2 src=/vizchange-animation/res/browning/imersion/a/2a.png></image>
<image class="image-block 30 " style="z-index: 30" id=a3 src=/vizchange-animation/res/browning/imersion/a/3a.png></image>
<image class="image-block 1 " style="z-index: 1" id=a4 src=/vizchange-animation/res/browning/imersion/a/4a.png></image>
</div>
<div class="image-container">
<image class="image-block 11 " style="z-index: 11" id=b1 src=/vizchange-animation/res/browning/imersion/b/1b-background.png></image>
<image class="image-block 12 " style="z-index: 12" id=b2 src=/vizchange-animation/res/browning/imersion/b/2b-detail.png></image>
<image class="image-block 1 " style="z-index: 1" id=b3 src=/vizchange-animation/res/browning/imersion/b/3b-clouds.png></image>
<image class="image-block 19 " style="z-index: 19" id=b4 src=/vizchange-animation/res/browning/imersion/b/4b-ground.png></image>
</div>
<div class="image-container">
<image class="image-block 9 " style="z-index: 9" id=c1 src=/vizchange-animation/res/browning/imersion/c/1c-background.png></image>
<image class="image-block 13 " style="z-index: 13" id=c2 src=/vizchange-animation/res/browning/imersion/c/2c-detail.png></image>
<image class="image-block 1 " style="z-index: 1" id=c3 src=/vizchange-animation/res/browning/imersion/c/3c-clouds.png></image>
<image class="image-block 14 " style="z-index: 14" id=c4 src=/vizchange-animation/res/browning/imersion/c/4c-ground.png></image>
</div>
<div class="image-container">
<image class="image-block 6 " style="z-index: 6" id=d1 src=/vizchange-animation/res/browning/discovery/background_far.png></image>
<image class="image-block 7 " style="z-index: 7" id=d2 src=/vizchange-animation/res/browning/imersion/d/2d-background.png></image>
<image class="image-block 16 " style="z-index: 16" id=d3 src=/vizchange-animation/res/browning/imersion/d/3d-water.png></image>
</div>
</div>
<div class="content transparent">
<div class="segment">
<div class="fotnote">
<div class="menu">
<a class="button" href="/vizchange-animation/browning-menu">Intro</a>
<a class="button" href="/vizchange-animation#high">Immersion</a>
<a class="button" href="/vizchange-animation/browning-discovery">Discovery Dive</a>
<a class="button" href="/vizchange-animation/browning-fishes">Fish Stories</a>
<a class="button" href="/vizchange-animation/browning-evidence">Local Evidencia</a>
</div>
</div>
</div>
</div>
<div class="bottom margin"></div>
<div class="right-side margin"></div>
<div class="bottom-right margin corner"></div>
<div class="left-side margin"></div>
<div class="bottom-left margin corner"></div>
<div class="top margin"></div>
<div class="top-left margin corner"></div>
<div class="top-right margin corner"></div>
<!--
--> </body>
<script>
let trig = function(){
document.querySelectorAll('.plot').forEach(div => {
div = div.children[0];
console.log(div)
let s = div.innerHTML
div.innerHTML = "";
//div.setAttribute("id","mark");
let test = "https://acp.k8s.glimworks.se";
//var test = "https://staging-devop-deploy-abisko-climate.k8s.glimworks.se";
let tmp = new URL(location.href+s);
nav_lang = 'en';
console.log(div.getAttribute("class"))
lib.renderSets(div,
div.getAttribute("class"),
s,
test);
})
}
window.onload = trig();
</script></html>