vizchange-animation-story
Version:
beta testing story tool for vizchange.net
270 lines (243 loc) • 13.2 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_fishes.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()
})
})("fishes")
</script>
<div class="content" id=fishes>
<div id=char-scene class="segment">
<!--TODO rename to type_github -->
<div class="captions">
<p class="caption-left" id=char-scene-text 1>
<strong>
</strong>
arctic char (salvelinus alpinus): loves the cold winter, but struggles in the heat average size / 30 - 50 cm
</p>
</div> </div>
<div id=barbel-scene class="segment">
<!--TODO rename to type_github -->
<div class="captions">
<p class="caption-left" id=barbel-scene-text 1>
<strong>
</strong>
barbel (barbus barbus): is a culinary archaeologist; will always dig for food!
average size / 40 - 60 cm
</p>
</div> </div>
<div id=trout-scene class="segment">
<!--TODO rename to type_github -->
<div class="captions">
<p class="caption-left" id=trout-scene-text 1>
<strong>
</strong>
brown trout (salmo trutta): has trouble seeing where it’s going, making it easy prey
average size / 30 - 50 cm
</p>
</div> </div>
<div id=grayling-scene class="segment">
<!--TODO rename to type_github -->
<div class="captions">
<p class="caption-left" id=grayling-scene-text 1>
<strong>
</strong>
grayling (Thymallus thumallus): is social among fellow grayling, but is not a team player when it comes to other species
average size / 30 - 50 cm
</p>
</div> </div>
<div id=minnow-scene class="segment">
<!--TODO rename to type_github -->
<div class="captions">
<p class="caption-left" id=minnow-scene-text 1>
<strong>
</strong>
minnow (phoxinus phoxinus): has a tiny body but a big appetite, adapting its prey as needed
average size / 4 - 8 cm
</p>
</div> </div>
<div id=perch-scene class="segment">
<!--TODO rename to type_github -->
<div class="captions">
<p class="caption-left" id=perch-scene-text 1>
<strong>
</strong>
perch (perca fluviatilis): is able to find food in the dark!
average size / 10 - 25 cm
</p>
</div> </div>
<div id=pike-scene class="segment">
<!--TODO rename to type_github -->
<div class="captions">
<p class="caption-left" id=pike-scene-text 1>
<strong>
</strong>
pike (esox lucius): enjoys a warm bath—even big predators like luxury
average size / 40 - 60 cm
</p>
</div> </div>
<div id=salmon-scene class="segment">
<!--TODO rename to type_github -->
<div class="captions">
</div> </div>
<div id=fishes-outro class="segment">
<!--TODO rename to type_github -->
<div class="captions">
<p class="caption-left" id=fishes-outro-text>
<strong>
</strong>
During winter, food is rarer and the lake temperature is generally quite low—but it’s a bit warmer at the bottom, so fish tend to move low and slow. During summer, the food is back and the temperatures are warmer at the top, so fish move up and get around.
</p>
</div> </div>
<div class="image-container">
<image class="image-block ground-front " style="z-index: ground-front" id=char src=/vizchange-animation/res/browning/fishes/arctic_char.png></image>
</div>
<div class="image-container">
<image class="image-block ground-front " style="z-index: ground-front" id=barbel src=/vizchange-animation/res/browning/fishes/barbel.png></image>
</div>
<div class="image-container">
<image class="image-block ground-front " style="z-index: ground-front" id=trout src=/vizchange-animation/res/browning/fishes/brown_trout.png></image>
</div>
<div class="image-container">
<image class="image-block ground-front " style="z-index: ground-front" id=grayling src=/vizchange-animation/res/browning/fishes/grayling.png></image>
</div>
<div class="image-container">
<image class="image-block ground-front " style="z-index: ground-front" id=minnow src=/vizchange-animation/res/browning/fishes/minnow.png></image>
</div>
<div class="image-container">
<image class="image-block ground-front " style="z-index: ground-front" id=perch src=/vizchange-animation/res/browning/fishes/perch.png></image>
</div>
<div class="image-container">
<image class="image-block ground-front " style="z-index: ground-front" id=pike src=/vizchange-animation/res/browning/fishes/pike.png></image>
</div>
<div class="image-container">
<image class="image-block ground-front " style="z-index: ground-front" id=salmon src=/vizchange-animation/res/browning/fishes/salmon.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/browning-imersive">Immersion</a>
<a class="button" href="/vizchange-animation/browning-discovery">Discovery Dive</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>