vizchange-animation-story

<!DOCTYPE html> <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_discovery.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>  <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>   </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() }) })("discovery") </script> <div class="content" id=discovery> <div id=intro class="segment">  <div class="captions"> </div> </div> <div id=dive-intro class="segment">  <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/browning-imersive">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=dive-yesterday class="segment">  <div class="captions"> <p class="caption-left" id=dive-yesterday-text 1> <strong> You decided to face your fears and jump in! Welcome to the lake. The water features lots of big algae and plants thanks to the penetrating light, and the fish seem happy here. </strong> <br> The deep wedge in the rocky ground is called permafrost: soil that has been frozen for a long time. </p> <p class="caption-left" id=dive-yesterday-text 2> <strong> </strong> Due to multiple factors, some of which you witnessed on your way down—like warmer temperatures, and increased precipitation—permafrost is thawing. </p> <p class="caption-left" id=dive-yesterday-text 3> <strong> </strong> When permafrost thaws, the ground becomes unstable and vegetation can collapse. This results in streams of carbon-rich water filled with debris like branches, leaves, and soil, flowing into the lake, while the wind carries other natural debris into the water. Now the water has begun browning, too! - Let’s dive in, and explore the carbon cycle! - It has multiple steps that I repeat over and over - Sedimentation : As I sink into the water, I bring outside carbon with me—like little leaves and sticks that were stuck to my body before I jumped in! - Burial : I take a little break at the bottom, enjoying the view. -Decomposition: Then I go back up for air, but usually leave some carbon behind. So I gather some more, and I’m ready for another jump! </p> </div> </div> <div id=dive-today class="segment">  <div class="captions"> <p class="caption-left" id=dive-today-text 1> <strong> </strong> The high-latitude lake water is far from empty—it’s home to lots of living organisms. </p> <p class="caption-left" id=dive-today-text 2> <strong> </strong> Some are invisible to our eyes, like tiny fish (zooplankton), small algae (phytoplankton), or little remains of birch trees (organic carbon). </p> <p class="caption-left" id=dive-today-text 3> <strong> </strong> Some are easily visible, like the larger fish: click on them to learn who they are! They all coexist in the food web. In browning lakes, populations of organisms that need sunlight to survive, like algae and aquatic plants, are dwindling. This makes it hard for fish to eat, and hide from predators. Like humans, fish can only thrive under certain conditions. (For example, they need sufficient oxygen, safe temperatures, and abundant food.) But just like us, fish have unique tastes and sensibilities. The lake has recently become home to fish species that enjoy nutrient-rich environments, and recently moved in from elsewhere. (Maybe they migrated toward this newly carbon-heavy body of water on their own, or perhaps they were released into the water by humans, for fishing purposes.) Other fish are threatened by their new world—all of a sudden, the lake too warm for them and their eggs to survive, and they struggle to find food in the dark. They might start dying off, or migrating elsewhere, as a result. </p> </div> </div> <div id=dive-tomorrow class="segment">  <div class="captions"> <p class="caption-left" id=dive-tomorrow-text 1> <strong> </strong> Look at which fish live in which conditions. Hot and cold water contain different oxygen levels, and therefore, different types of fish. Fish usually prefer the warmest and most oxygenated layer of water. </p> <p class="caption-left" id=dive-tomorrow-text 4> <strong> </strong> As the lake gets browner, this phenomenon will increase, and fish habitats will continue to shrink. Old species will disappear (for example, arctic char), and only the newer, or better-adapted species will survive (like pike or perch). A column of lake water has a top part, or “pelagic zone,” where most of the food web lives, and a bottom, or “benthic” layer, which contains the most waste; mostly dead algae and plants. Fish are the lake residents with which we humans are most familiar - Be it swimming for fun, or fishing to feast, we encounter them a lot. - But as lake water gets browner and warmer, lakes’ ice cover changes. - So our winter activities like skating or skiing are impacted, too! </p> <p class="caption-left" id=dive-tomorrow-text 5> <strong> </strong> Have you heard of lapplandsmästerskapet? It’s an ice fishing competition here on Torneträsk that brings together people from all over Scandinavia, each aiming to catch the biggest fish. It used to be held each May, but due to the changing ice cover of the lake, it must now take place in April: lakes are clearly changing. </p> </div> </div> <div class="image-container"> <image class="image-block background-back " style="z-index: background-back" id=D1 src=/vizchange-animation/res/browning/discovery/background_far.png></image> <image class="image-block background " style="z-index: background" id=D2 src=/vizchange-animation/res/browning/imersion/d/2d-background.png></image> <image class="image-block ground " style="z-index: ground" id=D3 src=/vizchange-animation/res/browning/imersion/d/3d-water.png></image> </div> <div class="image-container"> <image class="image-block ground-front " style="z-index: ground-front" id=bubbles src=/vizchange-animation/res/browning/discovery/popup1/bubbles.png></image> <image class="image-block ground-front " style="z-index: ground-front" id=carbon src=/vizchange-animation/res/browning/discovery/popup1/carbon_cycle.png></image> <image class="image-block ground-front " style="z-index: ground-front" id=extra src=/vizchange-animation/res/browning/discovery/popup1/extra.png></image> <image class="image-block ground-front " style="z-index: ground-front" id=fishes src=/vizchange-animation/res/browning/discovery/popup1/fishes_close.png></image> <image class="image-block ground-front " style="z-index: ground-front" id=people src=/vizchange-animation/res/browning/discovery/popup1/people_closer.png></image> <image class="image-block ground-front " style="z-index: ground-front" id=fishes2 src=/vizchange-animation/res/browning/discovery/popup2/fishes.png></image> <image class="image-block ground-front " style="z-index: ground-front" id=people2 src=/vizchange-animation/res/browning/discovery/popup2/foodweb.png></image> <image class="image-block ground-front " style="z-index: ground-front" id=zoom src=/vizchange-animation/res/browning/discovery/popup2/zoom.png></image> <image class="image-block ground-front " style="z-index: ground-front" id=people3 src=/vizchange-animation/res/browning/discovery/popup3/people_closer.png></image> <image class="image-block ground-front " style="z-index: ground-front" id=fishes3 src=/vizchange-animation/res/browning/discovery/popup3/fishes_close.png></image> <image class="image-block ground-front " style="z-index: ground-front" id=nutri1 src=/vizchange-animation/res/browning/discovery/popup3/nutrients_1.png></image> <image class="image-block ground-front " style="z-index: ground-front" id=nutri2 src=/vizchange-animation/res/browning/discovery/popup3/nutrients_2.png></image> <image class="image-block ground-front " style="z-index: ground-front" id=nutri2 src=/vizchange-animation/res/browning/discovery/popup3/nutrients_3.png></image> <image class="image-block ground-front " style="z-index: ground-front" id=ice src=/vizchange-animation/res/browning/discovery/popup3/ice_close.png></image> </div> <div class="image-container"> <image class="image-block background-front " style="z-index: background-front" id=bg2 src=/vizchange-animation/res/browning/discovery/background_close.png></image> <image class="image-block ground " style="z-index: ground" id=fg1 src=/vizchange-animation/res/browning/discovery/foreground_1.png></image> <image class="image-block ground " style="z-index: ground" id=fg2 src=/vizchange-animation/res/browning/discovery/foreground_2.png></image> <image class="image-block ground " style="z-index: ground" id=fg3 src=/vizchange-animation/res/browning/discovery/foreground_3.png></image> <image class="image-block ground " style="z-index: ground" id=title src=/vizchange-animation/res/browning/discovery/time.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#dive-intro">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>