Interactivo: Enjambre Sísmico

Enjambre Sísmico

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()

};

});

/*

Bebas Neue Rounded Regular

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

font-weight: 400;

font-style: normal;

Vectora LT Pro 55 Roman

font-family: linotype-vectora, sans-serif;

font-weight: 400;

font-style: normal;

Vectora LT Pro 56 Italic

font-family: linotype-vectora, sans-serif;

font-weight: 400;

font-style: italic;

Vectora LT Pro 75 Bold

font-family: linotype-vectora, sans-serif;

font-weight: 700;

font-style: normal;

Vectora LT Pro 76 Bold Italic

font-family: linotype-vectora, sans-serif;

font-weight: 700;

font-style: italic;

*/

.sm-infographics {

width:100%;

}

.sm-infographics *{

}

.sm-infographics h1,

.sm-infographics h2,

.sm-infographics h3,

.sm-infographics h4,

.sm-infographics h5,

.sm-infographics h6{

font-family: bebas-neue-rounded, 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;

color:black;

}

.sm-infographics *{

font-family: linotype-vectora, sans-serif;

font-weight: 400;

font-size: 17px;

line-height: 30px;

letter-spacing: -.2032px;

-moz-user-select: none;

-webkit-user-select: none;

-ms-user-select: none;

user-select: none;

-o-user-select: none;

color: black;

}

.sm-infographic .small-caps{

font-size: 14px;

vertical-align: middle;

}

.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;*/

text-align:center;

}

.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-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: 43px;

line-height: 55.63px;

letter-spacing: 0.5032px;

word-spacing: 4px;

font-weight: bold;

text-transform: uppercase;

text-align: center;

}

.sm-opening p{/*

font-size: 18px;

line-height: 46.63px;

letter-spacing: 0.5032px;

word-spacing: 4px;

font-weight: 600;

text-transform: uppercase;

text-align: center;*/

}

.sm-infographic{

margin: auto auto 64px auto;

}

.sm-module .image_layer .pin-pointer{

position:absolute;

top: 0;

left: 0;

}

.sm-module .image_layer .pin-pointer.blink,

.sm-module .image_layer .pin-pointer.blink-down {

animation-duration: .85s;

-webkit-animation-duration: .85s;

animation-play-state: running;

animation-iteration-count: infinite;

}

.sm-module .image_layer .pin-pointer.blink{

animation-name: animation-fadein;

-webkit-animation-name: animation-fadein;

}

.sm-module .image_layer .pin-pointer .blink-down {

animation-name: animation-fadein-down;

-webkit-animation-name: animation-fadein-down;

}

@keyframes animation-fadein {

0% {opacity: 0;}

75% {opacity: 1;}

100% {opacity: 1;}

}

@keyframes animation-fadein-down {

from {opacity: 0; margin-top:0px}

to {opacity: .5; margin-top:15px;}

}

/* style-1 UNA COLUMNA IMAGEN ARRIBA */

.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-1 .image_layer{

display:block;

width:100%;

text-align: center;

margin:auto auto 24px auto;

}

/* style-2 UNA COLUMNA, CON IMAGEN ABAJO */

.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;

}

/* style-3 SON DOS COLUMNAS, EN LA DERECHA LA IMAGEN, EN LA IZQUIERDA TÍTULO Y BRIEF */

.sm-infographic.style-3{

flex-direction: column;

}

.sm-infographic.style-3 .block{

flex-direction: row;

}

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

display:inline-flex;

flex-direction: column;

width:100%;

}

.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;

}

/* style-4 SON DOS COLUMNAS, TITULO Y BRIEF A LA IZQUIERDA E IMAGEN A LA DERECHA*/

.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;

}

.sm-infographics .indicadores{

displa: inline-flex;

}

.sm-infographics .indicadores br{

display:none;

}

.sm-infographics .indicadores .indicador{

margin-right: 20px;

display:inline-block;

}

.interactivo-enjambre-sismico-asset-volcan, .interactivo-enjambre-sismico-asset-enjambresismico, .interactivo-enjambre-sismico-asset-magmatismo, .interactivo-enjambre-sismico-asset-origenvolcanico, .interactivo-enjambre-sismico-asset-epicentrosismico,

.interactivo-enjambre-sismico-asset-analisis, .interactivo-enjambre-sismico-asset-visitasalsitio, .interactivo-enjambre-sismico-asset-monitoreo, .interactivo-enjambre-sismico-asset-estudio, .interactivo-enjambre-sismico-asset-volcanmini,

.interactivo-enjambre-sismico-asset-circuloepicentrosismico, .interactivo-enjambre-sismico-asset-zonafenomeno, .interactivo-enjambre-sismico-asset-sismosminimos, .interactivo-enjambre-sismico-asset-sismosmaximos

{ max-width: 100%; background-size: 100%; background-image: url('https://www.razon.com.mx/wp-content/uploads/2020/02/interactivo-enjambre-sismico-assets.jpg'); }

.interactivo-enjambre-sismico-asset-volcan { background-position: 0 0%; background-size: 100%; }

.interactivo-enjambre-sismico-asset-enjambresismico { background-position: 0 25.169574%; background-size: 150.393701%; }

.interactivo-enjambre-sismico-asset-magmatismo { background-position: 0 33.671988%; background-size: 152.8%; }

.interactivo-enjambre-sismico-asset-origenvolcanico { background-position: 0 42.045455%; background-size: 155.032468%; }

.interactivo-enjambre-sismico-asset-epicentrosismico { background-position: 0 52.612977%; background-size: 186.888454%; }

.interactivo-enjambre-sismico-asset-analisis { background-position: 0 63.574219%; background-size: 236.972705%; }

.interactivo-enjambre-sismico-asset-visitasalsitio { background-position: 0 73.295733%; background-size: 240.554156%; }

.interactivo-enjambre-sismico-asset-monitoreo { background-position: 0 83.096521%; background-size: 241.161616%; }

.interactivo-enjambre-sismico-asset-estudio { background-position: 0 91.107907%; background-size: 242.385787%; }

.interactivo-enjambre-sismico-asset-volcanmini { background-position: 0 95.649139%; background-size: 545.714286%; }

.interactivo-enjambre-sismico-asset-circuloepicentrosismico { background-position: 0 96.886282%; background-size: 2448.717949%; }

.interactivo-enjambre-sismico-asset-zonafenomeno { background-position: 0 97.969772%; background-size: 2513.157895%; }

.interactivo-enjambre-sismico-asset-sismosminimos { background-position: 0 98.985573%; background-size: 2728.571429%; }

.interactivo-enjambre-sismico-asset-sismosmaximos { background-position: 0 100%; background-size: 2808.823529%; }

var inited=false;

function init(){

if (inited)return;

// console.log("init")

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

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

document.getElementById('splash-screen').style.animationPlayState="running";

document.getElementById('sm-infographics').style.display="block";

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()

};

});

Cargando...

#splash-screen{

position:fixed;

width:100vw;

height:100%;

top:0;

left:0;

background:white;

display:flex;

z-index:100;

animation-duration: 1s;

-webkit-animation-duration: 1s;

animation-name: splash-screen-scape;

-webkit-animation-name: splash-screen-scape;

animation-play-state:paused;

animation-fill-mode: both;

animation-delay: 2s;

background-position: center;

background-repeat: no-repeat;

background-position:middle;

background-size: contain;

background-image: url("https://www.razon.com.mx/wp-content/uploads/2020/02/infografia-enjambre-sismico-principal.jpg");

}

#splash-screen .loading{

vertical-align: middle;

margin:auto auto auto auto;

text-shadow: 2px 2px 2px #FFFFFF;

color: #282828;

font-size:48px;

text-align: center;

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;*/

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

font-weight: 400;

font-style: normal;

}

#sm-infographics{

display:none;

}

@keyframes splash-screen-scape{

0% {

top:0px;

}

100% {

top:-100vh;

}

}

#sm-infographics{

background: white;

}

.sm-opening h1{/*

text-shadow: 4px 6px 5px rgba(0,0,0,.5);*/

}

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 image_layer= maincontainer.querySelector(".image_layer");

var tween = new TimelineMax();

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

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

//tween.fromTo(col_center, 1, {y:-0, opacity:1},{y: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});

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: "onEnter",

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);

});

Enjambre sísmico en Michoacán

¿Posible nacimiento volcánico?

Desde el 5 de enero de 2020 se registran cientos de eventos sísmicos con magnitudes de entre 2.9 y 4.1 grados, al norte de Uruapan, zona donde se localiza el extinto volcán Paricutín y el Tancítaro, por lo que algunas hipótesis apuntan al nacimiento de un nuevo cono volcánico; sin embargo, científicos

de la UNAM, del Sistema Sismológico Nacional,

CENAPRED, la Universidad de Colima y de la

Universidad Michoacana de San Nicolas de

Hidalgo estudian el fenómeno e informaron que

se necesita estudiar más el movimiento en la

región para conocer el origen de la actividad.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

// //

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

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

var container= maincontainer.querySelector(".animation-layer");

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

var tween = new TimelineMax();

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

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

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

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

var height=maincontainer.offsetHeight;

new ScrollMagic.Scene({

triggerElement: maincontainer,

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);

})

.setTween(tween)

.setPin(container, {pushFollowers: true})

.addTo(controller);

});

Epicentros sísmicos

sceneConstructors.push(function (controller, base_offset){

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

var container= maincontainer.querySelector(".animation-wrapper");

var col_center= maincontainer.querySelector(".col-center");

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:0},{x:0, scale:1, opacity:1, ease: Power4.easeOut, delay:0});

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

//tween.fromTo(col_center, 1, {y:-0, opacity:0},{y:0, opacity:1, ease: Power4.easeOut, delay:.4});

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

var height=maincontainer.offsetHeight*2;

new ScrollMagic.Scene({

triggerElement: maincontainer,

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);

})

.setTween(tween)

.setPin(container, {pushFollowers: true})

.addTo(controller);

});

Hipótesis

Académicos no descartan las posibilidades del

nacimiento de un volcán.

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#enjambre-sismico");

var container= maincontainer.querySelector(".animation-wrapper");

var col_center= maincontainer.querySelector(".col-center");

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:0},{x:0, scale:1, opacity:1, ease: Power4.easeOut, delay:0});

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

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

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

var height=maincontainer.offsetHeight;

new ScrollMagic.Scene({

triggerElement: maincontainer,

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);

})

.setPin(container, {pushFollowers: true})

/* .addIndicators() */

.setTween(tween)

.addTo(controller);

});

Enjambre Sísmico

Asociados a rupturas múltiples de la corteza, a distintas

profundidades. Se libera energía sísmica durante periodos que van desde días, meses o incluso años.

sceneConstructors.push(function (controller, base_offset){

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

var container= maincontainer.querySelector(".animation-wrapper");

var col_center= maincontainer.querySelector(".col-center");

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:0},{x:0, scale:1, opacity:1, ease: Power4.easeOut, delay:0});

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

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

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

var height=maincontainer.offsetHeight;

new ScrollMagic.Scene({

triggerElement: maincontainer,

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);

})

.setPin(container, {pushFollowers: true})

/* .addIndicators() */

.setTween(tween)

.addTo(controller);

});

Magmatismo

Cuando se inyecta magma, que viene de zonas profundas, éste empuja y provoca una serie de esfuerzos que se distribuyen sobre la corteza y obligan a que las rocas se rompan.

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#origen-volcanico");

var container= maincontainer.querySelector(".animation-wrapper");

var col_center= maincontainer.querySelector(".col-center");

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:0},{x:0, scale:1, opacity:1, ease: Power4.easeOut, delay:0});

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

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

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

var height=maincontainer.offsetHeight;

new ScrollMagic.Scene({

triggerElement: maincontainer,

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);

})

.setPin(container, {pushFollowers: true})

/* .addIndicators() */

.setTween(tween)

.addTo(controller);

});

Orígen Volcánico

Gases y fluidos magmáticos tienden a subir y tratar de llegar

a la superficie cuando existe un conducto que les permita su

liberación y arrojar así todo el material sólido, líquido y

gaseoso; de esta manera se forma un edificio cónico.

sceneConstructors.push(function (controller, base_offset){

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

var container= maincontainer.querySelector(".animation-wrapper");

var col_center= maincontainer.querySelector(".col-center");

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:0},{x:0, scale:1, opacity:1, ease: Power4.easeOut, delay:0});

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

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

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

var height=maincontainer.offsetHeight*2;

new ScrollMagic.Scene({

triggerElement: maincontainer,

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);

})

.setTween(tween)

.setPin(container, {pushFollowers: true})

.addTo(controller);

});

Investigación

Especialistas de distintas intituciones mexicanas

trabajan en el estudio del fenómeno:

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#visitas-al-sitio");

var container= maincontainer.querySelector(".animation-wrapper");

var col_center= maincontainer.querySelector(".col-center");

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:0},{x:0, scale:1, opacity:1, ease: Power4.easeOut, delay:0});

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

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

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

var height=maincontainer.offsetHeight;

new ScrollMagic.Scene({

triggerElement: maincontainer,

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);

})

.setPin(container, {pushFollowers: true})

/* .addIndicators() */

.setTween(tween)

.addTo(controller);

});

Visitas al Sitio

Realizadas para tomar muestras de suelo, agua y gas, así

como para instalar equipos de medición.

sceneConstructors.push(function (controller, base_offset){

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

var container= maincontainer.querySelector(".animation-wrapper");

var col_center= maincontainer.querySelector(".col-center");

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:0},{x:0, scale:1, opacity:1, ease: Power4.easeOut, delay:0});

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

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

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

var height=maincontainer.offsetHeight;

new ScrollMagic.Scene({

triggerElement: maincontainer,

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);

})

.setPin(container, {pushFollowers: true})

/* .addIndicators() */

.setTween(tween)

.addTo(controller);

});

Monitoreo

Realizan el cálculo y localización de los movimientos y llevan

a cabo un análisis de la sismicidad.

sceneConstructors.push(function (controller, base_offset){

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

var container= maincontainer.querySelector(".animation-wrapper");

var col_center= maincontainer.querySelector(".col-center");

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:0},{x:0, scale:1, opacity:1, ease: Power4.easeOut, delay:0});

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

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

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

var height=maincontainer.offsetHeight;

new ScrollMagic.Scene({

triggerElement: maincontainer,

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);

})

.setPin(container, {pushFollowers: true})

/* .addIndicators() */

.setTween(tween)

.addTo(controller);

});

Análisis

Una vez obtenidas las muestras recolectadas en la zona, se

estudian para conocer su composición y determinar el origen de la actividad.

sceneConstructors.push(function (controller, base_offset){

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

var container= maincontainer.querySelector(".animation-wrapper");

var col_center= maincontainer.querySelector(".col-center");

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:0},{x:0, scale:1, opacity:1, ease: Power4.easeOut, delay:0});

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

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

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

var height=maincontainer.offsetHeight;

new ScrollMagic.Scene({

triggerElement: maincontainer,

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);

})

.setPin(container, {pushFollowers: true})

/* .addIndicators() */

.setTween(tween)

.addTo(controller);

});

Estudio

Se monitorean las deformaciones del suelo y las actividades para elaborar una bitácora de seguimiento.

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#el-fenomeno");

var container= maincontainer.querySelector(".animation-wrapper");

var col_center= maincontainer.querySelector(".col-center");

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

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

var tween = new TimelineMax();

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

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

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

var height=maincontainer.offsetHeight*2;

new ScrollMagic.Scene({

triggerElement: maincontainer,

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);

})

.setTween(tween)

.setPin(container, {pushFollowers: true})

.addTo(controller);

});

EL Fenómeno

Se trata del acontecimiento de al menos 3 mil 155 sismos en un área específica durante un periodo de tiempo relativamente corto, con magnitudes similares entre sí y con epicentros en la misma región.

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#el-manto");

var container= maincontainer.querySelector(".animation-wrapper");

var col_center= maincontainer.querySelector(".col-center");

var image_layer= maincontainer.querySelector("#imagen-manto");

var indicadores= maincontainer.querySelector("#indicadores");

var tween = new TimelineMax();

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

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

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

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

var height=maincontainer.offsetHeight*1;

new ScrollMagic.Scene({

triggerElement: maincontainer,

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);

})

.setPin(container, {pushFollowers: true})

.setTween(tween)

.addTo(controller);

});

Zona del fenómeno

Sismos máximos

Sismos mínimos

#creditos .title_layer *,

#creditos .brief_layer *{

color: black;

}

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