Interactivo: australia en llamas

Australia en Llamas

var inited=false;

function init(){

if (inited)return;

console.log("init")

document.querySelector("body").style.overflowX="hidden";

document.querySelector("body").style.overflowY="auto";

prepareAnimations();

}

var sceneConstructors=new Array();

function prepareAnimations(){

var controller = new ScrollMagic.Controller();

for (c = 0; c < sceneConstructors.length; c++){

sceneConstructors[c](controller, -50);

}

}

document.addEventListener("DOMContentLoaded", function(event) {

window.onload = function() {

init()

};

});

/* Generated by http://responsive-css.spritegen.com Responsive CSS Sprite Generator */

.infographic-assets-1-mapa-puntos, .infographic-assets-1-2, .infographic-assets-1-3, .infographic-assets-1-1, .infographic-assets-1-1-1

{ max-width: 100%; background-size: 100%; background-image: url('https://www.razon.com.mx/wp-content/uploads/2020/01/australia-en-llamas-assets-1.png'); }

.infographic-assets-1-mapa-puntos { background-position: 0 0%; background-size: 100%; }

.infographic-assets-1-2 { background-position: 0 45.971564%; background-size: 322.295082%; }

.infographic-assets-1-3 { background-position: 0 64.611737%; background-size: 322.295082%; }

.infographic-assets-1-1 { background-position: 0 83.234597%; background-size: 323.355263%; }

.infographic-assets-1-1-1 { background-position: 0 100%; background-size: 360.07326%; }

.infographic-assets-parte-2-koalas, .infographic-assets-parte-2-2, .infographic-assets-parte-2-1, .infographic-assets-parte-2-3

{ max-width: 100%; background-size: 100%; background-image: url('https://www.razon.com.mx/wp-content/uploads/2020/01/australia-en-llamas-assets-2.png'); }

.infographic-assets-parte-2-koalas { background-position: 0 0%; background-size: 100%; }

.infographic-assets-parte-2-2 { background-position: 0 70.898599%; background-size: 273.417722%; }

.infographic-assets-parte-2-1 { background-position: 0 85.455295%; background-size: 274.111675%; }

.infographic-assets-parte-2-3 { background-position: 0 100%; background-size: 274.80916%; }

.infographic-assets-parte-3-deforestacion, .infographic-assets-parte-3-contagios, .infographic-assets-parte-3-cambioclimatico

{ max-width: 100%; background-size: 100%; background-image: url('https://www.razon.com.mx/wp-content/uploads/2020/01/australia-en-llamas-assets-3.png'); }

.infographic-assets-parte-3-deforestacion { background-position: 0 0%; background-size: 100%; }

.infographic-assets-parte-3-contagios { background-position: 0 58.63747%; background-size: 127.876106%; }

.infographic-assets-parte-3-cambioclimatico { background-position: 0 100%; background-size: 133.487298%; }

.infographic-assets-parte-3-grafica1, .infographic-assets-parte-3-grafica2, .infographic-assets-parte-3-grafica3

{ max-width: 100%; background-size: 100%; background-image: url('https://www.razon.com.mx/wp-content/uploads/2020/01/australia-en-llamas-assets-4.png'); }

.infographic-assets-parte-3-grafica1 { background-position: 0 0%; background-size: 100%; }

.infographic-assets-parte-3-grafica2 { background-position: 0 66.846361%; background-size: 136.103896%; }

.infographic-assets-parte-3-grafica3 { background-position: 0 100%; background-size: 222.033898%; }

.sm-infographics {

width:100%;

}

.sm-infographics *{

font-size: 17px;

}

.sm-infographics h1,

.sm-infographics h2,

.sm-infographics h3,

.sm-infographics h4,

.sm-infographics h5,

.sm-infographics h6{

font-family: bebas-neue, sans-serif;

-moz-user-select: none;

-webkit-user-select: none;

-ms-user-select:none; user-select:none;

-o-user-select:none;

text-transform: uppercase;

/* text-shadow: 2px 2px 1px rgba(0, 0, 0, 1); */

/*text-align: center;*/

margin-top: auto;

margin-bottom: 2px;

/*font-family: alternate-gothic-no-1-d, sans-serif;*/

font-weight: 400;

font-style: normal;

}

.sm-infographics p{

font-family: fira-sans, sans-serif;

font-weight: 300;

-moz-user-select: none;

-webkit-user-select: none;

-ms-user-select: none;

user-select: none;

-o-user-select: none;

}

.sm-infographics .block{

display: flex;

}

.sm-infographics section{

margin-bottom: 128px;

min-height: 50vh;

}

/*@media (max-width:1480px){*/

.sm-module {

max-width: 480px;

}

.sm-infographics p{

font-size: 24px;

line-height: 33.63px;

letter-spacing: 0.5032px;

word-spacing: 4px;

font-weight: 400;

}

.sm-infographics h1{

font-size: 28px;

line-height: 46.63px;

letter-spacing: 1.85032px;

word-spacing: 4px;

font-weight: bolder;

text-transform: uppercase;

}

.sm-infographics h2{

font-size: 50px;

line-height: 56.63px;

letter-spacing: 1.85032px;

word-spacing: 4px;

font-weight: bolder;

text-transform: uppercase;

}

.sm-infographics h3{

font-size: 36px;

line-height: 44.63px;

letter-spacing: 1.85032px;

word-spacing: 4px;

font-weight: bold;

text-transform: uppercase;

}

.sm-infographics h4{

font-size: 28px;

line-height: 46.63px;

letter-spacing: 1.85032px;

word-spacing: 4px;

font-weight: bolder;

text-transform: uppercase;

text-align: left;

}

.sm-aside-block-left p{

font-size: 19px;

line-height: 23.63px;

letter-spacing: 0.5032px;

word-spacing: 4px;

font-weight: 400;

}

.sm-aside-block-left h1{

font-size: 24px;

line-height: 33.63px;

letter-spacing: 0.5032px;

word-spacing: 4px;

font-weight: bolder;

text-transform: uppercase;

}

.sm-aside-block-left h2{

font-size: 24px;

line-height: 33.63px;

letter-spacing: 0.5032px;

word-spacing: 4px;

font-weight: bolder;

text-transform: uppercase;

}

.sm-aside-block-left h3{

font-size: 24px;

line-height: 33.63px;

letter-spacing: 0.5032px;

word-spacing: 4px;

font-weight: bold;

text-transform: uppercase;

}

.sm-aside-block-left h4{

font-size: 24px;

line-height: 33.63px;

letter-spacing: 0.5032px;

word-spacing: 4px;

font-weight: bolder;

text-transform: uppercase;

text-align: left;

}

/* } */

.sm-module {

width: 100%;

margin: auto;

display: flex;

position: relative;

}

/*

.sm-module p{

font-size: 24px;

line-height: 46.63px;

letter-spacing: 0.5032px;

word-spacing: 4px;

font-weight: 400;

text-transform: uppercase;

text-align: left;

}*/

/*

.sm-module h3{

font-size: 24px;

line-height: 46.63px;

letter-spacing: 0.5032px;

word-spacing: 4px;

font-weight: bolder;

text-transform: uppercase;

text-align: left;

}*/

.sm-module-valign-top{

vertical-align: top;

}

.sm-module-valign-middle{

vertical-align: middle;

}

.sm-module .block-column-content{

flex-direction: column;

}

.sm-module .block-row-content{

flex-direction: row;

}

.sm-module-full-width {

width: 100%;

margin: auto;

}

.sm-module .sm-opening{

flex-direction: column;

}

.sm-opening h1{

font-size: 64px;

line-height: 104.63px;

letter-spacing: 0.5032px;

word-spacing: 4px;

font-weight: bold;

text-transform: uppercase;

text-align: center;

}

.sm-opening pa{

font-size: 24px;

line-height: 46.63px;

letter-spacing: 0.5032px;

word-spacing: 4px;

font-weight: 600;

text-transform: uppercase;

text-align: left;

}

.sm-infographic{

margin: auto auto 64px auto;

}

.sm-infographic.style-1{

flex-direction: column;

}

.sm-infographic.style-1 .block{

flex-direction: row;

}

.sm-infographic.style-1 .col-center{

display:inline-flex;

flex-direction: column;

width:100%;

}

.sm-infographic.style-1 .title_layer{

display:block;

width:100%;

text-align: center;

}

.sm-infographic.style-1 .brief_layer{

display:block;

width:100%;

text-align: center;

}

.sm-infographic.style-2{

flex-direction: column;

}

.sm-infographic.style-2 .block{

flex-direction: row;

}

.sm-infographic.style-2 .col-center{

display:inline-flex;

flex-direction: column;

width:100%;

}

.sm-infographic.style-2 .title_layer{

display:block;

width:100%;

text-align: center;

}

.sm-infographic.style-2 .brief_layer{

display:block;

width:100%;

text-align: center;

}

.sm-infographic.style-2 .image_layer{

display:block;

width:100%;

text-align: center;

margin:auto auto 24px auto;

}

.sm-infographic.style-3{

flex-direction: column;

}

.sm-infographic.style-3 .block{

flex-direction: row;

}

.sm-infographic.style-3 .col-left{

display:inline-flex;

flex-direction: column;

width:45%;

}

.sm-infographic.style-3 .col-right{

display:inline-flex;

flex-direction: column;

width:50%;

}

.sm-infographic.style-3 .title_layer{

display:block;

width:100%;

margin-left:24px;

}

.sm-infographic.style-3 .brief_layer{

display:block;

width:100%;

margin-left:24px;

}

.sm-infographic.style-3 .image_layer{

display:block;

width:100%;

text-align: left;

margin-right:24px;

}

.sm-infographic.style-4{

flex-direction: column;

}

.sm-infographic.style-4 .block{

flex-direction: row;

}

.sm-infographic.style-4 .col-left{

display:inline-flex;

flex-direction: column;

width:50%;

}

.sm-infographic.style-4 .col-right{

display:inline-flex;

flex-direction: column;

width:45%;

}

.sm-infographic.style-4 .title_layer{

display:block;

width:100%;

text-align: right;

margin-right:24px;

}

.sm-infographic.style-4 .brief_layer{

display:block;

width:100%;

text-align: right;

margin-right:24px;

}

.sm-infographic.style-4 .image_layer{

display:block;

width:100%;

text-align: right;

margin-left:24px;

}

.sm-infographic.style-4 p,

.sm-infographic.style-4 h2

.sm-infographic.style-4 h3{

text-align: right;

}

.sm-aside-block-left {

position: absolute;

width: 40%;

min-width: 180px;

}

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

// //

// console.log("#entrada sceneConstructors("+base_offset+")")

var maincontainer= document.querySelector("#opening");

var title_layer= maincontainer.querySelector(".title_layer");

var brief_layer= maincontainer.querySelector(".brief_layer");

var tween = new TimelineMax();

//tween.fromTo(title_layer, 1, {opacity:0},{opacity:1, ease: Power4.easeOut, delay:1});

//tween.fromTo(brief_layer, 1, {opacity:0},{opacity:1, ease: Power4.easeOut, delay:0});

/*new ScrollMagic.Scene({

triggerElement: maincontainer,

triggerHook: "onCenter",

duration: 0,

offset: base_offset,

reverse:false,

})

.on("enter",function(e){

// console.log("enter: "+e.progress);

})

.on("center",function(e){

// console.log("center: "+e.progress);

})

.on("leave",function(e){

// console.log("leave: "+e.progress);

})

.on("progress",function(e){

// console.log("progress: "+e.progress);

})

.setTween(tween)

.addTo(controller);*/

});

Australia en llamas

Las graves conflagraciones que azotan a Oceanía desde septiembre vulneran tanto a la flora como a la fauna de todo el continente; sin embargo, los marsupiales han resultado ser la especie más afectada, debido a que son animales muy lentos y su única defensa es escalar a las zonas más altas de los eucaliptos, por lo que muchos ejemplares han resultado alcanzados por las llamas. Existen cálculos de unos 25,000 koalas que han muerto por el fuego en el norte de Nueva Gales del Sur y cerca de 30 por ciento de sus hábitats ha resultado afectado.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#dipolo-positivo-brief");

var title_layer= maincontainer.querySelector(".title_layer");

var brief_layer= maincontainer.querySelector(".brief_layer");

var tween = new TimelineMax();

tween.fromTo(title_layer, 1, {y:-50},{y:0, ease: Power4.easeOut, delay:0});

tween.fromTo(brief_layer, .5, {opacity:0},{opacity:1, ease: Power4.easeOut, delay:0});

/*

//tween.fromTo(brief_layer, 1, {y:50},{y:0, ease: Power4.easeOut, delay:0});

tween.fromTo(title_layer, 1, {opacity:0},{opacity:1, ease: Power4.easeOut, delay:1});

*/

new ScrollMagic.Scene({

triggerElement: maincontainer,

triggerHook: "onCenter",

duration: 0,

offset: base_offset,

reverse:false,

})

.on("enter",function(e){

// console.log("enter: "+e.progress);

})

.on("center",function(e){

// console.log("center: "+e.progress);

})

.on("leave",function(e){

// console.log("leave: "+e.progress);

})

.on("progress",function(e){

// console.log("progress: "+e.progress);

})

.setTween(tween)

.addTo(controller);

});

Dipolo positivo

Es una fase que presenta temperaturas de la superficie marina mayores a las normales.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#dipolo-positivo-1-1");

var col_left= maincontainer.querySelector(".col-left");

var col_right= maincontainer.querySelector(".col-right");

var title_layer= maincontainer.querySelector(".title_layer");

var brief_layer= maincontainer.querySelector(".brief_layer");

var image_layer= maincontainer.querySelector(".image_layer");

var tween = new TimelineMax();

tween.fromTo(col_right, 1, {x:-250, opacity:1},{x:0, opacity:1, ease: Power4.easeOut, delay:0});

tween.fromTo(image_layer, .5, {scale:0, opacity:.5},{scale:1, opacity:1, ease: Power4.easeOut, delay:0});

new ScrollMagic.Scene({

triggerElement: maincontainer,

triggerHook: "onCenter",

duration: 0,

offset: base_offset,

reverse:false,

})

.on("enter",function(e){

// console.log("enter: "+e.progress);

})

.on("center",function(e){

// console.log("center: "+e.progress);

})

.on("leave",function(e){

// console.log("leave: "+e.progress);

})

.on("progress",function(e){

// console.log("progress: "+e.progress);

})

.setTween(tween)

.addTo(controller);

});

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#dipolo-positivo-1-2");

var col_left= maincontainer.querySelector(".col-left");

var col_right= maincontainer.querySelector(".col-right");

var title_layer= maincontainer.querySelector(".title_layer");

var brief_layer= maincontainer.querySelector(".brief_layer");

var image_layer= maincontainer.querySelector(".image_layer");

var tween = new TimelineMax();

tween.fromTo(col_right, 1, {x:-250, opacity:1},{x:0, opacity:1, ease: Power4.easeOut, delay:0});

tween.fromTo(image_layer, .5, {scale:0, opacity:.5},{scale:1, opacity:1, ease: Power4.easeOut, delay:0});

new ScrollMagic.Scene({

triggerElement: maincontainer,

triggerHook: "onCenter",

duration: 0,

offset: base_offset,

reverse:false,

})

.on("enter",function(e){

// console.log("enter: "+e.progress);

})

.on("center",function(e){

// console.log("center: "+e.progress);

})

.on("leave",function(e){

// console.log("leave: "+e.progress);

})

.on("progress",function(e){

// console.log("progress: "+e.progress);

})

.setTween(tween)

.addTo(controller);

});

Dipolo positivo o niño indio

Este fenómeno originado en el océano Índico propicia un periodo de inestabilidad.

Sequías

Generan grandes zonas áridas por las bajas temperaturas del océano Índico que impiden que se generen precipitaciones en el noroeste de Asia y Oceanía.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#dipolo-neutral");

var col_left= maincontainer.querySelector(".col-left");

var col_right= maincontainer.querySelector(".col-right");

var title_layer= maincontainer.querySelector(".title_layer");

var brief_layer= maincontainer.querySelector(".brief_layer");

var image_layer= maincontainer.querySelector(".image_layer");

var tween = new TimelineMax();

tween.fromTo(col_left, 1, {x:250, opacity:1},{x:0, opacity:1, ease: Power4.easeOut, delay:0});

tween.fromTo(image_layer, .5, {scale:0, opacity:.5},{scale:1, opacity:1, ease: Power4.easeOut, delay:0});

new ScrollMagic.Scene({

triggerElement: maincontainer,

triggerHook: "onCenter",

duration: 0,

offset: base_offset,

reverse:false,

})

.on("enter",function(e){

// console.log("enter: "+e.progress);

})

.on("center",function(e){

// console.log("center: "+e.progress);

})

.on("leave",function(e){

// console.log("leave: "+e.progress);

})

.on("progress",function(e){

// console.log("progress: "+e.progress);

})

.setTween(tween)

.addTo(controller);

});

Dipolo neutral

Se presenta cuando no hay anomalías en la temperatura del océano Índico.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#dipolo-negativo");

var col_left= maincontainer.querySelector(".col-left");

var col_right= maincontainer.querySelector(".col-right");

var title_layer= maincontainer.querySelector(".title_layer");

var brief_layer= maincontainer.querySelector(".brief_layer");

var image_layer= maincontainer.querySelector(".image_layer");

var tween = new TimelineMax();

tween.fromTo(col_right, 1, {x:-250, opacity:1},{x:0, opacity:1, ease: Power4.easeOut, delay:0});

tween.fromTo(image_layer, .5, {scale:0, opacity:.5},{scale:1, opacity:1, ease: Power4.easeOut, delay:0});

new ScrollMagic.Scene({

triggerElement: maincontainer,

triggerHook: "onCenter",

duration: 0,

offset: base_offset,

reverse:false,

})

.on("enter",function(e){

// console.log("enter: "+e.progress);

})

.on("center",function(e){

// console.log("center: "+e.progress);

})

.on("leave",function(e){

// console.log("leave: "+e.progress);

})

.on("progress",function(e){

// console.log("progress: "+e.progress);

})

.setTween(tween)

.addTo(controller);

});

Dipolo negativo

Trae condiciones opuestas al de un dipolo positivo, ocurre cuando el agua en los océanos es más tibia y provoca precipitaciones más grandes.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#focos-activos");

var title_layer= maincontainer.querySelector(".title_layer");

var brief_layer= maincontainer.querySelector(".brief_layer");

var image_layer= maincontainer.querySelector(".image_layer");

var tween = new TimelineMax();

//tween.fromTo(title_layer, .5, {opacity:0},{y:0, opacity:1, ease: Power4.easeOut, delay:0});

//tween.fromTo(brief_layer, .5, {opacity:0},{y:0, opacity:1, ease: Power4.easeOut, delay:0});

tween.fromTo(title_layer, 1, {y:-50},{y:0, ease: Power4.easeOut, delay:0});

tween.fromTo(brief_layer, .5, {opacity:0},{opacity:1, ease: Power4.easeOut, delay:0});

tween.fromTo(image_layer, 1, {x:0, scale:.5, opacity:0},{x:0, scale:1, opacity:1, ease: Power4.easeOut, delay:.25});

new ScrollMagic.Scene({

triggerElement: maincontainer,

triggerHook: "onCenter",

duration: 0,

offset: base_offset,

reverse:false,

})

.on("enter",function(e){

// console.log("enter: "+e.progress);

})

.on("center",function(e){

// console.log("center: "+e.progress);

})

.on("leave",function(e){

// console.log("leave: "+e.progress);

})

.on("progress",function(e){

// console.log("progress: "+e.progress);

})

.setTween(tween)

.addTo(controller);

});

Focos activos

El fuego cobró la vida de al menos 20 personas desde septiembre.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#phascolarctidae");

var title_layer= maincontainer.querySelector(".title_layer");

var brief_layer= maincontainer.querySelector(".brief_layer");

var image_layer= maincontainer.querySelector(".image_layer");

var tween = new TimelineMax();

tween.fromTo(title_layer, 1, {y:-50},{y:0, ease: Power4.easeOut, delay:0});

tween.fromTo(brief_layer, .5, {opacity:0},{opacity:1, ease: Power4.easeOut, delay:0});

new ScrollMagic.Scene({

triggerElement: maincontainer,

triggerHook: "onCenter",

duration: 0,

offset: base_offset,

reverse:false,

})

.on("enter",function(e){

// console.log("enter: "+e.progress);

})

.on("center",function(e){

// console.log("center: "+e.progress);

})

.on("leave",function(e){

// console.log("leave: "+e.progress);

})

.on("progress",function(e){

// console.log("progress: "+e.progress);

})

.setTween(tween)

.addTo(controller);

});

Phascolarctidae

Especie endémica de Australia y es el único representante existente de la familia Phascolarctidae y sus parientes los wombats.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

console.log("animatable phascolarctidae-aside-group-1");

var maincontainer= document.querySelector("#phascolarctidae-imager");

var image_layer= maincontainer.querySelector(".image_layer");

var asidescontainer_group_1= document.querySelector("#phascolarctidae-aside-group-1");

var asidescontainer_group_2= document.querySelector("#phascolarctidae-aside-group-2");

var asides=maincontainer.querySelectorAll(".sm-aside-block-left");

//var aside=maincontainer.querySelector("#phascolarctidae-aside-2");

var height=image_layer.offsetHeight;

var tween = new TimelineMax();

tween.pause();

//tween.fromTo(title_layer, .5, {opacity:0},{y:0, opacity:1, ease: Power4.easeOut, delay:0});

//tween.fromTo(brief_layer, .5, {opacity:0},{y:0, opacity:1, ease: Power4.easeOut, delay:0});

tween.fromTo(image_layer, 1, {y:0},{y:-0, ease: Power4.easeOut, delay:0});

tween.fromTo(image_layer, 1, {y:0},{y:-height, ease: Power4.easeOut, delay:0});

for ( var i = 0 ; i < asides.length ; i++ ){

var aside = asides[i];

aside.style.opacity=0;

height+=aside.offsetHeight;

}

console.log("height: "+height)

var current_jump=-1;

new ScrollMagic.Scene({

triggerElement: image_layer,

triggerHook: "onLeave",

duration: height,

offset: base_offset,

reverse:true,

})

.on("enter",function(e){

console.log("enter: "+e.progress);

})

.on("center",function(e){

console.log("center: "+e.progress);

})

.on("leave",function(e){

console.log("leave: "+e.progress);

})

.on("progress",function(e){

var p=parseInt( asides.length*e.progress );

console.log("progress ("+p+"): "+e.progress);

for ( var i = 0 ; i < asides.length ; i++ ){

var aside = asides[i];

if ( 0 && i == p && current_jump != p ){

current_jump = i;

aside.style.opacity=1;

if ( p > 3){

console.log("go object at "+asidescontainer_group_2.getBoundingClientRect().top)

//tween.resume();

.scrollTop(asidescontainer_group_2.getBoundingClientRect().top);

}

}else if ( ! i == p ){

aside.style.opacity=0;

}

}

})

//.setPin(image_layer)

.addIndicators()

//.setTween(tween)

.addTo(controller);

});

Alimentación

Coloca las ramas en su boca con una pata delantera y come poco a poco las hojas.

Patas delanteras

Compuestas por 5 dedos; cada pata tiene un par de garras que los ayuda a sujetarse y escalar los árboles con más facilidad.

Promedio de vida

Los koalas viven alrededor de 13 años en estado salvaje.

if ( 0 )

sceneConstructors.push(function (controller, base_offset){

console.log("animatable phascolarctidae-aside-group-2");

var maincontainer= document.querySelector("#phascolarctidae");

var image_layer= maincontainer.querySelector(".image_layer");

var asidescontainer= document.querySelector("#phascolarctidae-aside-group-2");

var asides=asidescontainer.querySelectorAll(".sm-infographic");

//var aside=maincontainer.querySelector("#phascolarctidae-aside-2");

var height=0;

for ( var i = 0 ; i < asides.length ; i++ ){

var aside = asides[i];

aside.style.opacity=0;

height+=aside.offsetHeight;

}

console.log("height: "+height)

new ScrollMagic.Scene({

triggerElement: asidescontainer,

triggerHook: "onLeave",

duration: height,

offset: base_offset,

reverse:true,

})

.on("enter",function(e){

console.log("enter: "+e.progress);

})

.on("center",function(e){

console.log("center: "+e.progress);

})

.on("leave",function(e){

console.log("leave: "+e.progress);

})

.on("progress",function(e){

console.log("progress: "+e.progress);

var p=parseInt( asides.length*e.progress );

for ( var i = 0 ; i < asides.length ; i++ ){

var aside = asides[i];

if ( i == p ){

aside.style.opacity=1;

}else{

aside.style.opacity=0;

}

}

})

//.setPin(image_layer)

.addIndicators()

.addTo(controller);

});

Olfato

Huelen los aceites de ramas individuales para evaluar su comestibilidad.

Orejas

Son redondeadas, lo que les proporciona una buena audición y su oído medio está bien desarrollado.

Ojos

No tienen una buena visión y su tamaño es muy pequeño, en comparación con el resto de los marsupiales.

Patas traseras

Su mecanismo de bloqueo incorporado entre el muslo y el hueso les permite engancharse verticalmente en las orillas de las ramas.

Sequías

Debido a la falta de lluvias y climas cálidos, que van desde los 40°C no se ha podido frenar el avance de los incendios.

Llamas

Se han visto llamas de 70 metros a lo largo de los incendios.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#especies");

var title_layer= maincontainer.querySelector(".title_layer");

var brief_layer= maincontainer.querySelector(".brief_layer");

var tween = new TimelineMax();

tween.fromTo(title_layer, 1, {y:-50},{y:0, ease: Power4.easeOut, delay:0});

tween.fromTo(brief_layer, .5, {opacity:0},{opacity:1, ease: Power4.easeOut, delay:0});

/*

//tween.fromTo(brief_layer, 1, {y:50},{y:0, ease: Power4.easeOut, delay:0});

tween.fromTo(title_layer, 1, {opacity:0},{opacity:1, ease: Power4.easeOut, delay:1});

*/

new ScrollMagic.Scene({

triggerElement: maincontainer,

triggerHook: "onCenter",

duration: 0,

offset: base_offset,

reverse:false,

})

.on("enter",function(e){

// console.log("enter: "+e.progress);

})

.on("center",function(e){

// console.log("center: "+e.progress);

})

.on("leave",function(e){

// console.log("leave: "+e.progress);

})

.on("progress",function(e){

// console.log("progress: "+e.progress);

})

.setTween(tween)

.addTo(controller);

});

Especies

La clasificación de estas subespecies se basa en sus diferentes características físicas.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#especies-1");

var col_left= maincontainer.querySelector(".col-left");

var col_right= maincontainer.querySelector(".col-right");

var title_layer= maincontainer.querySelector(".title_layer");

var brief_layer= maincontainer.querySelector(".brief_layer");

var image_layer= maincontainer.querySelector(".image_layer");

var tween = new TimelineMax();

tween.fromTo(col_right, 1, {x:-250, opacity:1},{x:0, opacity:1, ease: Power4.easeOut, delay:0});

tween.fromTo(image_layer, .5, {scale:0, opacity:.5},{scale:1, opacity:1, ease: Power4.easeOut, delay:0});

new ScrollMagic.Scene({

triggerElement: maincontainer,

triggerHook: "onCenter",

duration: 0,

offset: base_offset,

reverse:false,

})

.on("enter",function(e){

// console.log("enter: "+e.progress);

})

.on("center",function(e){

// console.log("center: "+e.progress);

})

.on("leave",function(e){

// console.log("leave: "+e.progress);

})

.on("progress",function(e){

// console.log("progress: "+e.progress);

})

.setTween(tween)

.addTo(controller);

});

Phascolarctos cinereus adustus

Se encuentra al norte de Queensland.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#especies-2");

var col_left= maincontainer.querySelector(".col-left");

var col_right= maincontainer.querySelector(".col-right");

var title_layer= maincontainer.querySelector(".title_layer");

var brief_layer= maincontainer.querySelector(".brief_layer");

var image_layer= maincontainer.querySelector(".image_layer");

var tween = new TimelineMax();

tween.fromTo(col_left, 1, {x:250, opacity:1},{x:0, opacity:1, ease: Power4.easeOut, delay:0});

tween.fromTo(image_layer, .5, {scale:0, opacity:.5},{scale:1, opacity:1, ease: Power4.easeOut, delay:0});

new ScrollMagic.Scene({

triggerElement: maincontainer,

triggerHook: "onCenter",

duration: 0,

offset: base_offset,

reverse:false,

})

.on("enter",function(e){

// console.log("enter: "+e.progress);

})

.on("center",function(e){

// console.log("center: "+e.progress);

})

.on("leave",function(e){

// console.log("leave: "+e.progress);

})

.on("progress",function(e){

// console.log("progress: "+e.progress);

})

.setTween(tween)

.addTo(controller);

});

Phascolarctos

cinereus adustus

Habitan en Victoria y se diferencian en el pelaje o tamaño.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#especies-3");

var col_left= maincontainer.querySelector(".col-left");

var col_right= maincontainer.querySelector(".col-right");

var title_layer= maincontainer.querySelector(".title_layer");

var brief_layer= maincontainer.querySelector(".brief_layer");

var image_layer= maincontainer.querySelector(".image_layer");

var tween = new TimelineMax();

tween.fromTo(col_right, 1, {x:-250, opacity:1},{x:0, opacity:1, ease: Power4.easeOut, delay:0});

tween.fromTo(image_layer, .5, {scale:0, opacity:.5},{scale:1, opacity:1, ease: Power4.easeOut, delay:0});

new ScrollMagic.Scene({

triggerElement: maincontainer,

triggerHook: "onCenter",

duration: 0,

offset: base_offset,

reverse:false,

})

.on("enter",function(e){

// console.log("enter: "+e.progress);

})

.on("center",function(e){

// console.log("center: "+e.progress);

})

.on("leave",function(e){

// console.log("leave: "+e.progress);

})

.on("progress",function(e){

// console.log("progress: "+e.progress);

})

.setTween(tween)

.addTo(controller);

});

Phascolarctos cinereus adustus

Se encuentra al norte de Queensland.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#amenazas");

var title_layer= maincontainer.querySelector(".title_layer");

var brief_layer= maincontainer.querySelector(".brief_layer");

var tween = new TimelineMax();

tween.fromTo(title_layer, 1, {y:-50},{y:0, ease: Power4.easeOut, delay:0});

tween.fromTo(brief_layer, .5, {opacity:1, y:50},{opacity:1, y:0, ease: Power4.easeOut, delay:0});

/*

//tween.fromTo(brief_layer, 1, {y:50},{y:0, ease: Power4.easeOut, delay:0});

tween.fromTo(title_layer, 1, {opacity:0},{opacity:1, ease: Power4.easeOut, delay:1});

*/

new ScrollMagic.Scene({

triggerElement: maincontainer,

triggerHook: "onCenter",

duration: 0,

offset: base_offset,

reverse:false,

})

.on("enter",function(e){

// console.log("enter: "+e.progress);

})

.on("center",function(e){

// console.log("center: "+e.progress);

})

.on("leave",function(e){

// console.log("leave: "+e.progress);

})

.on("progress",function(e){

// console.log("progress: "+e.progress);

})

.setTween(tween)

.addTo(controller);

});

Amenazas

Cada año 4,000 ejemplares fallecen por ataques de perros y atropellamientos.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#amenazas-1");

var title_layer= maincontainer.querySelector(".title_layer");

var brief_layer= maincontainer.querySelector(".brief_layer");

var image_layer= maincontainer.querySelector(".image_layer");

var tween = new TimelineMax();

tween.fromTo(image_layer, 1, {x:0, scale:.5, opacity:1},{x:0, scale:1, opacity:1, ease: Power4.easeOut, delay:1});

tween.fromTo(brief_layer, .5, {opacity:0},{opacity:1, ease: Power4.easeOut, delay:0});

tween.fromTo(title_layer, 1, {y:00},{y:0, ease: Power4.easeOut, delay:0});

new ScrollMagic.Scene({

triggerElement: maincontainer,

triggerHook: "onCenter",

duration: 0,

offset: base_offset,

reverse:false,

})

.on("enter",function(e){

// console.log("enter: "+e.progress);

})

.on("center",function(e){

// console.log("center: "+e.progress);

})

.on("leave",function(e){

// console.log("leave: "+e.progress);

})

.on("progress",function(e){

// console.log("progress: "+e.progress);

})

.setTween(tween)

.addTo(controller);

});

Deforestación

La tala de árboles de eucalipto es una de las principales amenazas de la especie ya que su principal alimentos son sus hojas.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#amenazas-2");

var title_layer= maincontainer.querySelector(".title_layer");

var brief_layer= maincontainer.querySelector(".brief_layer");

var image_layer= maincontainer.querySelector(".image_layer");

var tween = new TimelineMax();

tween.fromTo(image_layer, 1, {x:0, scale:.5, opacity:1},{x:0, scale:1, opacity:1, ease: Power4.easeOut, delay:1});

tween.fromTo(brief_layer, .5, {opacity:0},{opacity:1, ease: Power4.easeOut, delay:0});

tween.fromTo(title_layer, 1, {y:00},{y:0, ease: Power4.easeOut, delay:0});

new ScrollMagic.Scene({

triggerElement: maincontainer,

triggerHook: "onCenter",

duration: 0,

offset: base_offset,

reverse:false,

})

.on("enter",function(e){

// console.log("enter: "+e.progress);

})

.on("center",function(e){

// console.log("center: "+e.progress);

})

.on("leave",function(e){

// console.log("leave: "+e.progress);

})

.on("progress",function(e){

// console.log("progress: "+e.progress);

})

.setTween(tween)

.addTo(controller);

});

Contagios

Su sistema inmunológico es muy débil, por lo que estos animales constantemente contraen enfermedades.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#amenazas-3");

var title_layer= maincontainer.querySelector(".title_layer");

var brief_layer= maincontainer.querySelector(".brief_layer");

var image_layer= maincontainer.querySelector(".image_layer");

var tween = new TimelineMax();

tween.fromTo(image_layer, 1, {x:0, scale:.5, opacity:1},{x:0, scale:1, opacity:1, ease: Power4.easeOut, delay:1});

tween.fromTo(brief_layer, .5, {opacity:0},{opacity:1, ease: Power4.easeOut, delay:0});

tween.fromTo(title_layer, 1, {y:00},{y:0, ease: Power4.easeOut, delay:0});

new ScrollMagic.Scene({

triggerElement: maincontainer,

triggerHook: "onCenter",

duration: 0,

offset: base_offset,

reverse:false,

})

.on("enter",function(e){

// console.log("enter: "+e.progress);

})

.on("center",function(e){

// console.log("center: "+e.progress);

})

.on("leave",function(e){

// console.log("leave: "+e.progress);

})

.on("progress",function(e){

// console.log("progress: "+e.progress);

})

.setTween(tween)

.addTo(controller);

});

Cambio climático

El calentamiento global orilla a la especie a beber agua, un comportamiento anormal en ésta.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#especies-perjudicadas");

var title_layer= maincontainer.querySelector(".title_layer");

var brief_layer= maincontainer.querySelector(".brief_layer");

var image_layer= maincontainer.querySelector(".image_layer");

var tween = new TimelineMax();

tween.fromTo(title_layer, 1, {y:-50},{y:0, ease: Power4.easeOut, delay:0});

tween.fromTo(brief_layer, .5, {opacity:0},{opacity:1, ease: Power4.easeOut, delay:0});

tween.fromTo(image_layer, 1, {x:0, scale:.5, opacity:0},{x:0, scale:1, opacity:1, ease: Power4.easeOut, delay:.25});

new ScrollMagic.Scene({

triggerElement: maincontainer,

triggerHook: "onCenter",

duration: 0,

offset: base_offset,

reverse:false,

})

.on("enter",function(e){

// console.log("enter: "+e.progress);

})

.on("center",function(e){

// console.log("center: "+e.progress);

})

.on("leave",function(e){

// console.log("leave: "+e.progress);

})

.on("progress",function(e){

// console.log("progress: "+e.progress);

})

.setTween(tween)

.addTo(controller);

});

Especies perjudicadas

A causa de la pérdida de grandes extensiones de hábitats, como los bosques de eucalipto, muchos animales han sido dañados por los incendios.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#especies-perjudicadas-1");

var col_left= maincontainer.querySelector(".col-left");

var col_right= maincontainer.querySelector(".col-right");

var title_layer= maincontainer.querySelector(".title_layer");

var brief_layer= maincontainer.querySelector(".brief_layer");

var image_layer= maincontainer.querySelector(".image_layer");

var tween = new TimelineMax();

tween.fromTo(col_right, 1, {x:-250, opacity:1},{x:0, opacity:1, ease: Power4.easeOut, delay:0});

tween.fromTo(col_left, .5, {scale:0, opacity:.5},{scale:1, opacity:1, ease: Power4.easeOut, delay:0});

new ScrollMagic.Scene({

triggerElement: maincontainer,

triggerHook: "onCenter",

duration: 0,

offset: base_offset,

reverse:false,

})

.on("enter",function(e){

// console.log("enter: "+e.progress);

})

.on("center",function(e){

// console.log("center: "+e.progress);

})

.on("leave",function(e){

// console.log("leave: "+e.progress);

})

.on("progress",function(e){

// console.log("progress: "+e.progress);

})

.setTween(tween)

.addTo(controller);

});

129.5

Reptiles.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#especies-perjudicadas-2");

var col_left= maincontainer.querySelector(".col-left");

var col_right= maincontainer.querySelector(".col-right");

var title_layer= maincontainer.querySelector(".title_layer");

var brief_layer= maincontainer.querySelector(".brief_layer");

var image_layer= maincontainer.querySelector(".image_layer");

var tween = new TimelineMax();

tween.fromTo(col_left, 1, {x:250, opacity:1},{x:0, opacity:1, ease: Power4.easeOut, delay:0});

tween.fromTo(col_right, .5, {scale:0, opacity:.5},{scale:1, opacity:1, ease: Power4.easeOut, delay:0});

new ScrollMagic.Scene({

triggerElement: maincontainer,

triggerHook: "onCenter",

duration: 0,

offset: base_offset,

reverse:false,

})

.on("enter",function(e){

// console.log("enter: "+e.progress);

})

.on("center",function(e){

// console.log("center: "+e.progress);

})

.on("leave",function(e){

// console.log("leave: "+e.progress);

})

.on("progress",function(e){

// console.log("progress: "+e.progress);

})

.setTween(tween)

.addTo(controller);

});

20.7

Aves.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#especies-perjudicadas-3");

var col_left= maincontainer.querySelector(".col-left");

var col_right= maincontainer.querySelector(".col-right");

var title_layer= maincontainer.querySelector(".title_layer");

var brief_layer= maincontainer.querySelector(".brief_layer");

var image_layer= maincontainer.querySelector(".image_layer");

var tween = new TimelineMax();

tween.fromTo(col_right, 1, {x:-250, opacity:1},{x:0, opacity:1, ease: Power4.easeOut, delay:0});

tween.fromTo(col_left, .5, {scale:0, opacity:.5},{scale:1, opacity:1, ease: Power4.easeOut, delay:0});

new ScrollMagic.Scene({

triggerElement: maincontainer,

triggerHook: "onCenter",

duration: 0,

offset: base_offset,

reverse:false,

})

.on("enter",function(e){

// console.log("enter: "+e.progress);

})

.on("center",function(e){

// console.log("center: "+e.progress);

})

.on("leave",function(e){

// console.log("leave: "+e.progress);

})

.on("progress",function(e){

// console.log("progress: "+e.progress);

})

.setTween(tween)

.addTo(controller);

});

17.5

Mamíferos.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#creditos");

var title_layer= maincontainer.querySelector(".title_layer");

var brief_layer= maincontainer.querySelector(".brief_layer");

var tween = new TimelineMax();

//tween.fromTo(title_layer, .5, {opacity:0},{y:0, opacity:1, ease: Power4.easeOut, delay:0});

//tween.fromTo(brief_layer, .5, {opacity:0},{y:0, opacity:1, ease: Power4.easeOut, delay:0});

tween.fromTo(title_layer, 1, {y:-50},{y:0, ease: Power4.easeOut, delay:0});

tween.fromTo(brief_layer, .5, {opacity:0},{opacity:1, ease: Power4.easeOut, delay:0});

new ScrollMagic.Scene({

triggerElement: maincontainer,

triggerHook: "onCenter",

duration: 0,

offset: base_offset,

reverse:false,

})

.on("enter",function(e){

// console.log("enter: "+e.progress);

})

.on("center",function(e){

// console.log("center: "+e.progress);

})

.on("leave",function(e){

// console.log("leave: "+e.progress);

})

.on("progress",function(e){

// console.log("progress: "+e.progress);

})

.setTween(tween)

.addTo(controller);

});

Créditos

Infografía

C. Alejandro Sánchez, Ismael F. Mira, Roberto Alvarado y Luisa Ortega

/Diseño web

Rodrigo J. Hernández

/Código.UX

César A. Aguirre