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
