Bruie, el rover de la NASA que se prepara en la Antártida para explorar luna de Júpiter Bruie, el rover de la NASA que se prepara en la Antártida para explorar luna de Júpiter

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

};

});

@media (max-width: 767px){

.td-container, .tdc-row {

width: 100%;

padding-left: 0px !important;

padding-right: 0px !important;

}

}

@media (max-width: 1140px) and (min-width: 1019px){

.td-container, .tdc-row {

width: 100% !important;

}

}

@media (max-width: 1140px) and (min-width: 1019px){

.td-pb-row [class*="td-pb-span"] {

padding-right: 00px;

padding-left: 00px;

}

}

.td-container, .tdc-row {

width: 100% !important;

margin-right: auto;

margin-left: auto;

}

.td-pb-row {

*zoom: 1;

margin-right: -0px !important;

margin-left: -0px !important;

}

.td-pb-row [class*="td-pb-span"] {

padding-right: 00px;

padding-left: 00px;

}

.td-post-header{

display:none;

}

.sm-infographics {

width:100%;

}

.sm-infographics section{

width:95%;

margin-left:auto;

margin-right:auto;

}

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

color:white;

}

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

color: white;

}

.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 p{

font-size: 24px;

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

}

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

}

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

}

.infografia-nasa-bruie-asset-2medicion, .infografia-nasa-bruie-asset-sondas-rover-antartida-camaras, .infografia-nasa-bruie-asset-sondas-rover-antartida-comunicacion, .infografia-nasa-bruie-asset-sondas-rover-antartida-ruedas, .infografia-nasa-bruie-asset-sondas-rover-antartida,

.infografia-nasa-bruie-asset-cuepo-celeste, .infografia-nasa-bruie-asset-sondas-juice, .infografia-nasa-bruie-asset-sondas-voyager, .infografia-nasa-bruie-asset-mision-flotabilidad, .infografia-nasa-bruie-asset-mision-discos,

.infografia-nasa-bruie-asset-mision-topografia, .infografia-nasa-bruie-asset-sondas-calipper, .infografia-nasa-bruie-asset-mision-interfaz, .infografia-nasa-bruie-asset-mision-oceanos, .infografia-nasa-bruie-asset-sondas-new-horizon,

.infografia-nasa-bruie-asset-sondas-pioneer, .infografia-nasa-bruie-asset-sondas-galileo, .infografia-nasa-bruie-asset-sondas-rover-antartida-medicion

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

.infografia-nasa-bruie-asset-2medicion { background-position: 0 0%; background-size: 100%; }

.infografia-nasa-bruie-asset-sondas-rover-antartida-camaras { background-position: 0 12.563667%; background-size: 100%; }

.infografia-nasa-bruie-asset-sondas-rover-antartida-comunicacion { background-position: 0 25.127334%; background-size: 100%; }

.infografia-nasa-bruie-asset-sondas-rover-antartida-ruedas { background-position: 0 37.691002%; background-size: 100%; }

.infografia-nasa-bruie-asset-sondas-rover-antartida { background-position: 0 50.254669%; background-size: 100%; }

.infografia-nasa-bruie-asset-cuepo-celeste { background-position: 0 60.110856%; background-size: 101.983003%; }

.infografia-nasa-bruie-asset-sondas-juice { background-position: 0 65.422198%; background-size: 248.847926%; }

.infografia-nasa-bruie-asset-sondas-voyager { background-position: 0 68.69462%; background-size: 256.532067%; }

.infografia-nasa-bruie-asset-mision-flotabilidad { background-position: 0 72.062471%; background-size: 259.615385%; }

.infografia-nasa-bruie-asset-mision-discos { background-position: 0 75.573921%; background-size: 263.414634%; }

.infografia-nasa-bruie-asset-mision-topografia { background-position: 0 79.065283%; background-size: 263.414634%; }

.infografia-nasa-bruie-asset-sondas-calipper { background-position: 0 82.192157%; background-size: 279.069767%; }

.infografia-nasa-bruie-asset-mision-interfaz { background-position: 0 85.219378%; background-size: 295.890411%; }

.infografia-nasa-bruie-asset-mision-oceanos { background-position: 0 88.228843%; background-size: 296.703297%; }

.infografia-nasa-bruie-asset-sondas-new-horizon { background-position: 0 91.595559%; background-size: 338.557994%; }

.infografia-nasa-bruie-asset-sondas-pioneer { background-position: 0 94.921624%; background-size: 350.649351%; }

.infografia-nasa-bruie-asset-sondas-galileo { background-position: 0 99.011456%; background-size: 448.13278%; }

.infografia-nasa-bruie-asset-sondas-rover-antartida-medicion { background-position: 0 100%; background-size: 878.04878%; }

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/01/infografia-nasa-bruie-main.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: rgb(43,158,183);

background: linear-gradient(180deg, rgba(43,158,183,1) 30%, rgba(255,255,255,1) 57%, rgba(255,255,255,1) 100%);

}

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

});

Bruie, el rover de la NASA que se prepara

en la Antártida para explorar luna de

Júpiter

Ingenieros y científicos de la agencia espacial

estadounidense trabajan desde noviembre probando un rover flotante para la exploración bajo el hielo de la Antártida oriental con el fin de buscar vida en la

interfaz entre el hielo superficial y las masas de agua oceánica. El aparato que trabaja de manera remota se arrastra en la cara inferior del hielo marino y el agua. La NASA lanzará a la luna Europa la sonda Clipper en 2025, para recopilar datos sobre las características del suelo del satélite y abrir camino a una futura misión en busca de vida debajo del hielo con el dispositivo Bruie.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

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, .5, {opacity:0, scale:0},{opacity:1, scale: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);

});

Misión

Bruie buscará medir parámetros relacionados con la vida, como el oxígeno disuelto, la salinidad del agua, la presión y la temperatura.

#mision .sm-module.sm-infographic.style-3 .col-left{

width: 40%;

}

#mision .sm-module.sm-infographic.style-3 .col-right{

width: 57%;

}

#mision .sm-module.sm-infographic.style-4 .col-left{

width: 57%;

}

#mision .sm-module.sm-infographic.style-4 .col-right{

width: 40%;

}

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#mision-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(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_right, 1, {x:-150, 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);

});

Océanos

Tiene como tarea principal sumergirse bajo el grueso hielo extraterrestre que tiene una profundidad de entre 10 y 19 kilómetros.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#mision-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(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_left, 1, {x:150, 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);

});

Áreas de interfaz

Su trabajo es en las capas de hielo para estudiar su química dinámica e investigar todas las partículas que podrían fomentar la vida en esa área del suelo.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#mision-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(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_right, 1, {x:-150, 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);

});

Flotabilidad

Permanecerá anclado contra el hielo para evitar las corrientes marinas y puede apagarse de manera segura y encenderse sólo cuando necesita tomar alguna variación.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

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(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_left, 1, {x:150, 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);

});

Discos

Serán colocados cada 100 metros para transmitir señales desde el móvil hasta una estación base de

superficie, para mantener contacto con Bruie.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

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(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_right, 1, {x:-150, 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);

});

Topografía

Científicos aprenderán la estructura de la parte inferior del hielo, así como la manera en que se forma,

procesos biológicos y geológicos.

#cuerpo-celeste .title_layer *,

#cuerpo-celeste .brief_layer *{

color: black;

}

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

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, .5, {opacity:0, scale:0},{opacity:1, scale: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);

});

Cuerpo Celeste

Esta constituido por una capa gruesa de hielo en su superficie conteniendo el agua subterránea, es el

objetivo de la misión Clipper que abrirá camino al rover Bruie para la búsqueda de vida en el satélite.

#sondas .title_layer *,

#sondas .brief_layer *{

color: black;

}

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

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, .5, {opacity:0, scale:0},{opacity:1, scale: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);

});

Sondas

Al menos 6 misiones se han dispuesto a estudiar el satélite.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#sondas-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(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_right, 1, {x:-150, 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);

});

Programa Pioneer

(1973-1974)

Las misiones 10 y 11 fueron las

primeras sondas que orbitaron

alrededor de Júpiter y en fotografiar sus lunas descubriendo su superficie helada. procesos biológicos y

geológicos.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#sondas-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(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_left, 1, {x:150, 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);

});

Programa Voyager

(1979)

Se utilizaron dos naves que

orbitaron el planeta gaseoso,

tomando fotografías de mejor

calidad y descubriendo cientos de líneas en la superficie del satélite.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#sondas-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(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_right, 1, {x:-150, 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);

});

Galileo

(1995-2003)

Esta sonda capturó con imágenes nítidas y detalladas la luna Europa, abriendo la posibilidad de realizar una nueva misión de exploración para su estudio.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

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(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_left, 1, {x:150, 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);

});

New Horizon

(2007)

Logró fotografiar a la luna durante

su paso por el sistema Joviano

en camino a Plutón.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

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(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_right, 1, {x:-150, 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);

});

Europa Clipper

(2020)

Es la nueva misión de la NASA para explorar Europa y tiene como

objetivo descubrir el tipo de suelo

y confirmar la existencia de agua

en el satélite.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

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(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_left, 1, {x:150, 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);

});

Programa JUICE

(2022)

La Agencia Espacial Europea tiene planeado con este programa lanzar un nuevo satélite que orbitará sobre Júpiter.

#dispositivo .title_layer *,

#dispositivo .brief_layer *{

color: black;

}

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

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, .5, {opacity:0, scale:0},{opacity:1, scale: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);

});

Dispositivo

Es el rover de la NASA que desde noviembre realiza maniobras de rodaje y exploración en la Antártida para prepararse bajo el hielo marino de las condiciones climatológicas en la interfaz entre el hielo y el agua oceánica.

// console.log("psephurus-gadius-1 >");

// console.log("psephurus-gadius-1 section");

sceneConstructors.push(function (controller, base_offset){

// console.log("psephurus-gadius-1()");

var maincontainer= document.querySelector("#dispositivo-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 block_column_content= maincontainer.querySelectorAll(".block-column-content");

var pin_pointer= maincontainer.querySelectorAll(".pin-pointer");

var tween = new TimelineMax();

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

var height=image_layer.offsetHeight;

// console.log("psephurus-gadius-1.1");

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

console.log("psephurus-gadius-1.1.1["+i+"]");

var item = block_column_content[i];

var pointer = pin_pointer[i];

item.style.opacity=0;

height+=item.offsetHeight;

if (pointer) {

console.log("apaga pointer");

pointer.style.visibility="hidden";

}

// console.log("psephurus-gadius-1.1.1");

}

var current_jump=-1;

// console.log("psephurus-gadius-1.2");

new ScrollMagic.Scene({

triggerElement: maincontainer,

triggerHook: "onLeave",

duration: 0,

offset: base_offset,

})

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

})

.setTween(tween)

.addTo(controller);

// console.log("psephurus-gadius-1.3");

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(" ***** ");

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

// console.log("psephurus-gadius-1.3");

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

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

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

console.log("psephurus-gadius-1.3.1["+i+"] for p " + p);

var item = block_column_content[i];

var pointer = pin_pointer[i];

if (i == p){

console.log(" psephurus-gadius-1.3.1.1");

if (current_jump != p ){

current_jump = i;

item.style.opacity=1;

if ( p > 0)

pointer.style.visibility="visible";

}

}else if ( p < block_column_content.length ) {

console.log(" psephurus-gadius-1.3.1.2");

item.style.opacity=0;

pointer.style.visibility="hidden";

}

}

})

.setPin(maincontainer, {pushFollowers: true})

.addTo(controller);

});

Cuerpo

Es cilíndrico sellado y lleno de aire, el exterior es metálico y

fabricado con materiales inoxidables.

Cámaras

Son de alta definición y toman imágenes muy nítidas. Están dispuestas para recopilar datos de la región donde llega a unirse el agua y el hielo.

Ruedas

Las dos cuentan con clavos a los extremos para facilitar el transporte a través del hielo.

Sistema de comunicación inalámbrica

Le servirá para transportarse de forma autónoma, al momento de explorar.

Medición

Lleva instrumentos para hacer comparativos de parámetros de oxígeno disuelto, salinidad del agua, presión y temperatura.

#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