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_menu.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() }) })("menu") </script> <div class="content" id=menu> <div class="image-container"> <image class="image-block 200 " style="z-index: 200" id=2 src=/vizchange-animation/res/browning/menu/background/autumn_text.png></image> <image class="image-block 200 " style="z-index: 200" id=spring src=/vizchange-animation/res/browning/menu/background/spring.png></image> <image class="image-block 201 " style="z-index: 201" id=summer src=/vizchange-animation/res/browning/menu/background/summer.png></image> <image class="image-block 200 " style="z-index: 200" id=winter src=/vizchange-animation/res/browning/menu/background/winter.png></image> <image class="image-block 200 " style="z-index: 200" id=yesterday_text src=/vizchange-animation/res/browning/menu/background/yesterday.png></image> <image class="image-block 200 " style="z-index: 200" id=tomorrow_text src=/vizchange-animation/res/browning/menu/background/tomorrow.png></image> <image class="image-block 200 " style="z-index: 200" id=today_text src=/vizchange-animation/res/browning/menu/background/today.png></image> <image class="image-block 199 " style="z-index: 199" id=b1 src=/vizchange-animation/res/browning/menu/background/background.png></image> <image class="image-block 200 arrowButton" style="z-index: 200" id=arrowL src=/vizchange-animation/res/browning/menu/background/arrow_L.png></image> <image class="image-block 200 arrowButton" style="z-index: 200" id=arrowR src=/vizchange-animation/res/browning/menu/background/arrow_R.png></image> <image class="image-block 300 titleButton" style="z-index: 300" id=title src=/vizchange-animation/res/browning/menu/background/title.png usemap="#map_title"></image> <map name="map_title"> <area class="areaArrowLeft" shape="rect" coords=305,375,335,405 alt="Sun" href="#"> <area class="springButton" shape="rect" coords=330,350,355,375 alt="Sun" href="#"> <area class="summerButton" shape="rect" coords=370,325,400,355 alt="Sun" href="#"> <area class="autumnButton" shape="rect" coords=545,320,575,350 alt="Sun" href="#"> <area class="winterButton" shape="rect" coords=595,350,625,380 alt="Sun" href="#"> <area class="areaArrowRight" shape="rect" coords=625,375,655,405 alt="Sun" href="#"> </map> <image class="image-block 50 lake_yesterday" style="z-index: 50" id=lake_yesterday src=/vizchange-animation/res/browning/menu/winter/a/11aw_lake.png></image> <image class="image-block 51 lake_today" style="z-index: 51" id=lake_today src=/vizchange-animation/res/browning/menu/winter/b/11bw_lake.png></image> <image class="image-block 52 lake_tomorrow" style="z-index: 52" id=lake_tomorrow src=/vizchange-animation/res/browning/menu/spring/c/11csp_lake.png></image> </div> <div class="image-container"> <image class="image-block 112 winter_yesterday" style="z-index: 112" id=3aa src=/vizchange-animation/res/browning/menu/winter/a/3aw_snow.png></image> <image class="image-block 111 winter_yesterday" style="z-index: 111" id=4aa src=/vizchange-animation/res/browning/menu/winter/a/4aw_ice.png></image> <image class="image-block 110 winter_yesterday" style="z-index: 110" id=5aa src=/vizchange-animation/res/browning/menu/winter/a/5aw_temperature.png></image> <image class="image-block 109 winter_yesterday" style="z-index: 109" id=7aa src=/vizchange-animation/res/browning/menu/winter/a/7aw_growing.png></image> <image class="image-block 108 winter_yesterday" style="z-index: 108" id=8aa src=/vizchange-animation/res/browning/menu/winter/a/8aw_permafrost.png></image> <image class="image-block 107 winter_yesterday" style="z-index: 107" id=9aa src=/vizchange-animation/res/browning/menu/winter/a/9aw_treeline.png></image> <image class="image-block 106 winter_yesterday" style="z-index: 106" id=10aa src=/vizchange-animation/res/browning/menu/winter/a/10aw_foreground_1.png></image> <image class="image-block 104 winter_yesterday cloud" style="z-index: 104" id=12aa src=/vizchange-animation/res/browning/menu/winter/a/12aw_precipitation.png></image> <image class="image-block 103 winter_yesterday" style="z-index: 103" id=13aa src=/vizchange-animation/res/browning/menu/winter/a/13aw_atmosphere.png></image> <image class="image-block 102 winter_yesterday" style="z-index: 102" id=14aa src=/vizchange-animation/res/browning/menu/winter/a/14aw_foreground_2.png></image> <image class="image-block 101 winter_yesterday" style="z-index: 101" id=15aa src=/vizchange-animation/res/browning/menu/winter/a/15aw_foreground_3.png></image> <image class="image-block 212 winter_today" style="z-index: 212" id=3ba src=/vizchange-animation/res/browning/menu/winter/b/3bw_snow.png></image> <image class="image-block 211 winter_today" style="z-index: 211" id=4ba src=/vizchange-animation/res/browning/menu/winter/b/4bw_ice.png></image> <image class="image-block 210 winter_today" style="z-index: 210" id=5ba src=/vizchange-animation/res/browning/menu/winter/b/5bw_temperature.png></image> <image class="image-block 209 winter_today" style="z-index: 209" id=7ba src=/vizchange-animation/res/browning/menu/winter/b/7bw_growing.png></image> <image class="image-block 208 winter_today" style="z-index: 208" id=8ba src=/vizchange-animation/res/browning/menu/winter/b/8bw_permafrost.png></image> <image class="image-block 207 winter_today" style="z-index: 207" id=9ba src=/vizchange-animation/res/browning/menu/winter/b/9bw_treeline.png></image> <image class="image-block 206 winter_today" style="z-index: 206" id=10ba src=/vizchange-animation/res/browning/menu/winter/b/10bw_foreground_1.png></image> <image class="image-block 204 winter_today cloud" style="z-index: 204" id=12ba src=/vizchange-animation/res/browning/menu/winter/b/12bw_precipitation.png></image> <image class="image-block 203 winter_today" style="z-index: 203" id=13ba src=/vizchange-animation/res/browning/menu/winter/b/13bw_atmosphere.png></image> <image class="image-block 202 winter_today" style="z-index: 202" id=14ba src=/vizchange-animation/res/browning/menu/winter/b/14bw_foreground_2.png></image> <image class="image-block 201 winter_today" style="z-index: 201" id=15ba src=/vizchange-animation/res/browning/menu/winter/b/15bw_foreground_3.png></image> <image class="image-block 311 winter_tomorrow" style="z-index: 311" id=4ca src=/vizchange-animation/res/browning/menu/winter/c/4cw_ice.png></image> <image class="image-block 310 winter_tomorrow" style="z-index: 310" id=5ca src=/vizchange-animation/res/browning/menu/winter/c/5cw_temperature.png></image> <image class="image-block 309 winter_tomorrow" style="z-index: 309" id=7ca src=/vizchange-animation/res/browning/menu/winter/c/7cw_growing.png></image> <image class="image-block 308 winter_tomorrow" style="z-index: 308" id=8ca src=/vizchange-animation/res/browning/menu/winter/c/8cw_permafrost.png></image> <image class="image-block 307 winter_tomorrow" style="z-index: 307" id=9ca src=/vizchange-animation/res/browning/menu/winter/c/9cw_treeline.png></image> <image class="image-block 306 winter_tomorrow" style="z-index: 306" id=10ca src=/vizchange-animation/res/browning/menu/winter/c/10cw_foreground_1.png></image> <image class="image-block 304 winter_tomorrow cloud" style="z-index: 304" id=12ca src=/vizchange-animation/res/browning/menu/winter/c/12cw_precipitation.png></image> <image class="image-block 303 winter_tomorrow" style="z-index: 303" id=13ca src=/vizchange-animation/res/browning/menu/winter/c/13cw_atmosphere.png></image> <image class="image-block 302 winter_tomorrow" style="z-index: 302" id=14ca src=/vizchange-animation/res/browning/menu/winter/c/14cw_foreground_2.png></image> <image class="image-block 301 winter_tomorrow" style="z-index: 301" id=15ca src=/vizchange-animation/res/browning/menu/winter/c/15cw_foreground_3.png></image> </div> <div class="image-container"> <image class="image-block 112 autumn_yesterday" style="z-index: 112" id=3aa src=/vizchange-animation/res/browning/menu/autumn/a/3aa_snow.png></image> <image class="image-block 111 autumn_yesterday" style="z-index: 111" id=4aa src=/vizchange-animation/res/browning/menu/autumn/a/4aa_ice.png></image> <image class="image-block 110 autumn_yesterday" style="z-index: 110" id=5aa src=/vizchange-animation/res/browning/menu/autumn/a/5aa_temperature.png></image> <image class="image-block 109 autumn_yesterday" style="z-index: 109" id=7aa src=/vizchange-animation/res/browning/menu/autumn/a/7aa_growing.png></image> <image class="image-block 108 autumn_yesterday" style="z-index: 108" id=8aa src=/vizchange-animation/res/browning/menu/autumn/a/8aa_permafrost.png></image> <image class="image-block 107 autumn_yesterday" style="z-index: 107" id=9aa src=/vizchange-animation/res/browning/menu/autumn/a/9aa_treeline.png></image> <image class="image-block 106 autumn_yesterday" style="z-index: 106" id=10aa src=/vizchange-animation/res/browning/menu/autumn/a/10aa_foreground_1.png></image> <image class="image-block 104 autumn_yesterday cloud" style="z-index: 104" id=12aa src=/vizchange-animation/res/browning/menu/autumn/a/12aa_precipitation.png></image> <image class="image-block 103 autumn_yesterday" style="z-index: 103" id=13aa src=/vizchange-animation/res/browning/menu/autumn/a/13aa_atmosphere.png></image> <image class="image-block 102 autumn_yesterday" style="z-index: 102" id=14aa src=/vizchange-animation/res/browning/menu/autumn/a/14aa_foreground_2.png></image> <image class="image-block 101 autumn_yesterday" style="z-index: 101" id=15aa src=/vizchange-animation/res/browning/menu/autumn/a/15aa_foreground_3.png></image> <image class="image-block 212 autumn_today" style="z-index: 212" id=3ba src=/vizchange-animation/res/browning/menu/autumn/b/3ba_snow.png></image> <image class="image-block 211 autumn_today" style="z-index: 211" id=4ba src=/vizchange-animation/res/browning/menu/autumn/b/4ba_ice.png></image> <image class="image-block 210 autumn_today" style="z-index: 210" id=5ba src=/vizchange-animation/res/browning/menu/autumn/b/5ba_temperature.png></image> <image class="image-block 209 autumn_today" style="z-index: 209" id=7ba src=/vizchange-animation/res/browning/menu/autumn/b/7ba_growing.png></image> <image class="image-block 208 autumn_today" style="z-index: 208" id=8ba src=/vizchange-animation/res/browning/menu/autumn/b/8ba_permafrost.png></image> <image class="image-block 207 autumn_today" style="z-index: 207" id=9ba src=/vizchange-animation/res/browning/menu/autumn/b/9ba_treeline.png></image> <image class="image-block 206 autumn_today" style="z-index: 206" id=10ba src=/vizchange-animation/res/browning/menu/autumn/b/10ba_foreground_1.png></image> <image class="image-block 204 autumn_today cloud" style="z-index: 204" id=12ba src=/vizchange-animation/res/browning/menu/autumn/b/12ba_precipitation.png></image> <image class="image-block 203 autumn_today" style="z-index: 203" id=13ba src=/vizchange-animation/res/browning/menu/autumn/b/13ba_atmosphere.png></image> <image class="image-block 202 autumn_today" style="z-index: 202" id=14ba src=/vizchange-animation/res/browning/menu/autumn/b/14ba_foreground_2.png></image> <image class="image-block 201 autumn_today" style="z-index: 201" id=15ba src=/vizchange-animation/res/browning/menu/autumn/b/15ba_foreground_3.png></image> <image class="image-block 311 autumn_tomorrow" style="z-index: 311" id=4ca src=/vizchange-animation/res/browning/menu/autumn/c/4ca_ice.png></image> <image class="image-block 310 autumn_tomorrow" style="z-index: 310" id=5ca src=/vizchange-animation/res/browning/menu/autumn/c/5ca_temperature.png></image> <image class="image-block 309 autumn_tomorrow" style="z-index: 309" id=7ca src=/vizchange-animation/res/browning/menu/autumn/c/7ca_growing.png></image> <image class="image-block 308 autumn_tomorrow" style="z-index: 308" id=8ca src=/vizchange-animation/res/browning/menu/autumn/c/8ca_permafrost.png></image> <image class="image-block 307 autumn_tomorrow" style="z-index: 307" id=9ca src=/vizchange-animation/res/browning/menu/autumn/c/9ca_treeline.png></image> <image class="image-block 306 autumn_tomorrow" style="z-index: 306" id=10ca src=/vizchange-animation/res/browning/menu/autumn/c/10ca_foreground_1.png></image> <image class="image-block 304 autumn_tomorrow cloud" style="z-index: 304" id=12ca src=/vizchange-animation/res/browning/menu/autumn/c/12ca_precipitation.png></image> <image class="image-block 303 autumn_tomorrow" style="z-index: 303" id=13ca src=/vizchange-animation/res/browning/menu/autumn/c/13ca_atmosphere.png></image> <image class="image-block 302 autumn_tomorrow" style="z-index: 302" id=14ca src=/vizchange-animation/res/browning/menu/autumn/c/14ca_foreground_2.png></image> <image class="image-block 301 autumn_tomorrow" style="z-index: 301" id=15ca src=/vizchange-animation/res/browning/menu/autumn/c/15ca_foreground_3.png></image> </div> <div class="image-container"> <image class="image-block 111 spring_yesterday" style="z-index: 111" id=2asp src=/vizchange-animation/res/browning/menu/spring/a/2asp_foreground_0.png></image> <image class="image-block 112 spring_yesterday" style="z-index: 112" id=3asp src=/vizchange-animation/res/browning/menu/spring/a/3asp_snow.png></image> <image class="image-block 111 spring_yesterday" style="z-index: 111" id=4asp src=/vizchange-animation/res/browning/menu/spring/a/4asp_ice.png></image> <image class="image-block 110 spring_yesterday" style="z-index: 110" id=5asp src=/vizchange-animation/res/browning/menu/spring/a/5asp_temperature.png></image> <image class="image-block 109 spring_yesterday" style="z-index: 109" id=7asp src=/vizchange-animation/res/browning/menu/spring/a/7asp_growing.png></image> <image class="image-block 108 spring_yesterday" style="z-index: 108" id=8asp src=/vizchange-animation/res/browning/menu/spring/a/8asp_permafrost.png></image> <image class="image-block 107 spring_yesterday" style="z-index: 107" id=9asp src=/vizchange-animation/res/browning/menu/spring/a/9asp_treeline.png></image> <image class="image-block 106 spring_yesterday" style="z-index: 106" id=10asp src=/vizchange-animation/res/browning/menu/spring/a/10asp_foreground_1.png></image> <image class="image-block 104 spring_yesterday cloud" style="z-index: 104" id=12asp src=/vizchange-animation/res/browning/menu/spring/a/12asp_precipitation.png></image> <image class="image-block 103 spring_yesterday" style="z-index: 103" id=13asp src=/vizchange-animation/res/browning/menu/spring/a/13asp_atmosphere.png></image> <image class="image-block 102 spring_yesterday" style="z-index: 102" id=14asp src=/vizchange-animation/res/browning/menu/spring/a/14asp_foreground_2.png></image> <image class="image-block 101 spring_yesterday" style="z-index: 101" id=15asp src=/vizchange-animation/res/browning/menu/spring/a/15asp_foreground_3.png></image> <image class="image-block 212 spring_today" style="z-index: 212" id=2bsp src=/vizchange-animation/res/browning/menu/spring/b/2bsp_foreground_0.png></image> <image class="image-block 212 spring_today" style="z-index: 212" id=3bsp src=/vizchange-animation/res/browning/menu/spring/b/3bsp_snow.png></image> <image class="image-block 211 spring_today" style="z-index: 211" id=4bsp src=/vizchange-animation/res/browning/menu/spring/b/4bsp_ice.png></image> <image class="image-block 210 spring_today" style="z-index: 210" id=5bsp src=/vizchange-animation/res/browning/menu/spring/b/5bsp_temperature.png></image> <image class="image-block 209 spring_today" style="z-index: 209" id=7bsp src=/vizchange-animation/res/browning/menu/spring/b/7bsp_growing.png></image> <image class="image-block 208 spring_today" style="z-index: 208" id=8bsp src=/vizchange-animation/res/browning/menu/spring/b/8bsp_permafrost.png></image> <image class="image-block 207 spring_today" style="z-index: 207" id=9bsp src=/vizchange-animation/res/browning/menu/spring/b/9bsp_treeline.png></image> <image class="image-block 206 spring_today" style="z-index: 206" id=10bsp src=/vizchange-animation/res/browning/menu/spring/b/10bsp_foreground_1.png></image> <image class="image-block 204 spring_today cloud" style="z-index: 204" id=12bsp src=/vizchange-animation/res/browning/menu/spring/b/12bsp_precipitation.png></image> <image class="image-block 203 spring_today" style="z-index: 203" id=13bsp src=/vizchange-animation/res/browning/menu/spring/b/13bsp_atmosphere.png></image> <image class="image-block 202 spring_today" style="z-index: 202" id=14bsp src=/vizchange-animation/res/browning/menu/spring/b/14bsp_foreground_2.png></image> <image class="image-block 201 spring_today" style="z-index: 201" id=15bsp src=/vizchange-animation/res/browning/menu/spring/b/15bsp_foreground_3.png></image> <image class="image-block 311 spring_tomorrow" style="z-index: 311" id=2csp src=/vizchange-animation/res/browning/menu/spring/c/2csp_foreground_0.png></image> <image class="image-block 311 spring_tomorrow" style="z-index: 311" id=3csp src=/vizchange-animation/res/browning/menu/spring/c/3csp_snow.png></image> <image class="image-block 311 spring_tomorrow" style="z-index: 311" id=4csp src=/vizchange-animation/res/browning/menu/spring/c/4csp_ice.png></image> <image class="image-block 310 spring_tomorrow" style="z-index: 310" id=5csp src=/vizchange-animation/res/browning/menu/spring/c/5csp_temperature.png></image> <image class="image-block 309 spring_tomorrow" style="z-index: 309" id=7csp src=/vizchange-animation/res/browning/menu/spring/c/7csp_growing.png></image> <image class="image-block 308 spring_tomorrow" style="z-index: 308" id=8csp src=/vizchange-animation/res/browning/menu/spring/c/8csp_permafrost.png></image> <image class="image-block 307 spring_tomorrow" style="z-index: 307" id=9csp src=/vizchange-animation/res/browning/menu/spring/c/9csp_treeline.png></image> <image class="image-block 306 spring_tomorrow" style="z-index: 306" id=10csp src=/vizchange-animation/res/browning/menu/spring/c/10csp_foreground_1.png></image> <image class="image-block 304 spring_tomorrow cloud" style="z-index: 304" id=12csp src=/vizchange-animation/res/browning/menu/spring/c/12csp_precipitation.png></image> <image class="image-block 303 spring_tomorrow" style="z-index: 303" id=13csp src=/vizchange-animation/res/browning/menu/spring/c/13csp_atmosphere.png></image> <image class="image-block 302 spring_tomorrow" style="z-index: 302" id=14csp src=/vizchange-animation/res/browning/menu/spring/c/14csp_foreground_2.png></image> <image class="image-block 301 spring_tomorrow" style="z-index: 301" id=15csp src=/vizchange-animation/res/browning/menu/spring/c/15csp_foreground_3.png></image> </div> <div class="image-container"> <image class="image-block 112 summer_yesterday" style="z-index: 112" id=3asu src=/vizchange-animation/res/browning/menu/summer/a/3asu_snow.png></image> <image class="image-block 111 summer_yesterday" style="z-index: 111" id=4asu src=/vizchange-animation/res/browning/menu/summer/a/4asu_ice.png></image> <image class="image-block 110 summer_yesterday" style="z-index: 110" id=5asu src=/vizchange-animation/res/browning/menu/summer/a/5asu_temperature.png></image> <image class="image-block 109 summer_yesterday" style="z-index: 109" id=7asu src=/vizchange-animation/res/browning/menu/summer/a/7asu_growing.png></image> <image class="image-block 108 summer_yesterday" style="z-index: 108" id=8asu src=/vizchange-animation/res/browning/menu/summer/a/8asu_permafrost.png></image> <image class="image-block 107 summer_yesterday" style="z-index: 107" id=9asu src=/vizchange-animation/res/browning/menu/summer/a/9asu_treeline.png></image> <image class="image-block 106 summer_yesterday" style="z-index: 106" id=10asu src=/vizchange-animation/res/browning/menu/summer/a/10asu_foreground_1.png></image> <image class="image-block 104 summer_yesterday cloud" style="z-index: 104" id=12asu src=/vizchange-animation/res/browning/menu/summer/a/12asu_precipitation.png></image> <image class="image-block 103 summer_yesterday" style="z-index: 103" id=13asu src=/vizchange-animation/res/browning/menu/summer/a/13asu_atmosphere.png></image> <image class="image-block 102 summer_yesterday" style="z-index: 102" id=14asu src=/vizchange-animation/res/browning/menu/summer/a/14asu_foreground_2.png></image> <image class="image-block 101 summer_yesterday" style="z-index: 101" id=15asu src=/vizchange-animation/res/browning/menu/summer/a/15asu_foreground_3.png></image> <image class="image-block 212 summer_today" style="z-index: 212" id=3bsu src=/vizchange-animation/res/browning/menu/summer/b/3bsu_snow.png></image> <image class="image-block 211 summer_today" style="z-index: 211" id=4bsu src=/vizchange-animation/res/browning/menu/summer/b/4bsu_ice.png></image> <image class="image-block 210 summer_today" style="z-index: 210" id=5bsu src=/vizchange-animation/res/browning/menu/summer/b/5bsu_temperature.png></image> <image class="image-block 209 summer_today" style="z-index: 209" id=7bsu src=/vizchange-animation/res/browning/menu/summer/b/7bsu_growing.png></image> <image class="image-block 208 summer_today" style="z-index: 208" id=8bsu src=/vizchange-animation/res/browning/menu/summer/b/8bsu_permafrost.png></image> <image class="image-block 207 summer_today" style="z-index: 207" id=9bsu src=/vizchange-animation/res/browning/menu/summer/b/9bsu_treeline.png></image> <image class="image-block 206 summer_today" style="z-index: 206" id=10bsu src=/vizchange-animation/res/browning/menu/summer/b/10bsu_foreground_1.png></image> <image class="image-block 204 summer_today cloud" style="z-index: 204" id=12bsu src=/vizchange-animation/res/browning/menu/summer/b/12bsu_precipitation.png></image> <image class="image-block 203 summer_today" style="z-index: 203" id=13bsu src=/vizchange-animation/res/browning/menu/summer/b/13bsu_atmosphere.png></image> <image class="image-block 202 summer_today" style="z-index: 202" id=14bsu src=/vizchange-animation/res/browning/menu/summer/b/14bsu_foreground_2.png></image> <image class="image-block 201 summer_today" style="z-index: 201" id=15bsu src=/vizchange-animation/res/browning/menu/summer/b/15bsu_foreground_3.png></image> <image class="image-block 310 summer_tomorrow" style="z-index: 310" id=5csu src=/vizchange-animation/res/browning/menu/summer/c/5csu_temperature.png></image> <image class="image-block " style="z-index: " id= src=/vizchange-animation></image> <image class="image-block 309 summer_tomorrow" style="z-index: 309" id=7csu src=/vizchange-animation/res/browning/menu/summer/c/7csu_growing.png></image> <image class="image-block 308 summer_tomorrow" style="z-index: 308" id=8csu src=/vizchange-animation/res/browning/menu/summer/c/8csu_permafrost.png></image> <image class="image-block 307 summer_tomorrow" style="z-index: 307" id=9csu src=/vizchange-animation/res/browning/menu/summer/c/9csu_treeline.png></image> <image class="image-block 306 summer_tomorrow" style="z-index: 306" id=10csu src=/vizchange-animation/res/browning/menu/summer/c/10csu_foreground_1.png></image> <image class="image-block 304 summer_tomorrow cloud" style="z-index: 304" id=12csu src=/vizchange-animation/res/browning/menu/summer/c/12csu_precipitation.png></image> <image class="image-block 303 summer_tomorrow" style="z-index: 303" id=13csu src=/vizchange-animation/res/browning/menu/summer/c/13csu_atmosphere.png></image> <image class="image-block 302 summer_tomorrow" style="z-index: 302" id=14csu src=/vizchange-animation/res/browning/menu/summer/c/14csu_foreground_2.png></image> <image class="image-block 301 summer_tomorrow" style="z-index: 301" id=15csu src=/vizchange-animation/res/browning/menu/summer/c/15csu_foreground_3.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-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>