Interactivo: El pez panda gigante, especie de 200 millones de años de antigüedad, la primera extinta en 2020

Interactivo: El pez panda gigante, especie de 200 millones de años de antigüedad, la primera extinta en 2020
Por:

Un Pez Prehistórico Gigante, La Primera Especie Extinta del 2020

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

};

});

.sm-infographics {

width:100%;

}

.sm-infographics *{

font-size: 17px;

}

.sm-infographics h1,

.sm-infographics h2,

.sm-infographics h3,

.sm-infographics h4,

.sm-infographics h5,

.sm-infographics h6{

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

-moz-user-select: none;

-webkit-user-select: none;

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

-o-user-select:none;

text-transform: uppercase;

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

/*text-align: center;*/

margin-top: auto;

margin-bottom: 2px;

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

font-weight: 400;

font-style: normal;

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-pez-panda-asset-mapa-distribucion, .infografia-pez-panda-asset-psephurus-gladus-1, .infografia-pez-panda-asset-psephurus-gladus-2-indicador-1, .infografia-pez-panda-asset-psephurus-gladus-2-indicador-2, .infografia-pez-panda-asset-psephurus-gladus-2-indicador-3,

.infografia-pez-panda-asset-psephurus-gladus-2-indicador-4, .infografia-pez-panda-asset-psephurus-gladus-2, .infografia-pez-panda-asset-comparativo-pez, .infografia-pez-panda-asset-metodo-reproduccion-1, .infografia-pez-panda-asset-metodo-reproduccion-2,

.infografia-pez-panda-asset-metodo-reproduccion-3, .infografia-pez-panda-asset-psephurus-gladus-1-indicador-1, .infografia-pez-panda-asset-comparativo-buzo, .infografia-pez-panda-asset-circulo-azul-blanco

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

.infografia-pez-panda-asset-mapa-distribucion { background-position: 0 0%; background-size: 100%; }

.infografia-pez-panda-asset-psephurus-gladus-1 { background-position: 0 10.717781%; background-size: 102.19342%; }

.infografia-pez-panda-asset-psephurus-gladus-2-indicador-1 { background-position: 0 20.146819%; background-size: 102.19342%; }

.infografia-pez-panda-asset-psephurus-gladus-2-indicador-2 { background-position: 0 29.575856%; background-size: 102.19342%; }

.infografia-pez-panda-asset-psephurus-gladus-2-indicador-3 { background-position: 0 39.081399%; background-size: 106.10766%; }

.infografia-pez-panda-asset-psephurus-gladus-2-indicador-4 { background-position: 0 48.725074%; background-size: 106.10766%; }

.infografia-pez-panda-asset-psephurus-gladus-2 { background-position: 0 58.368748%; background-size: 106.10766%; }

.infografia-pez-panda-asset-comparativo-pez { background-position: 0 64.064665%; background-size: 110.09667%; }

.infografia-pez-panda-asset-metodo-reproduccion-1 { background-position: 0 71.646192%; background-size: 150.293255%; }

.infografia-pez-panda-asset-metodo-reproduccion-2 { background-position: 0 81.536697%; background-size: 150.51395%; }

.infografia-pez-panda-asset-metodo-reproduccion-3 { background-position: 0 91.431848%; background-size: 150.51395%; }

.infografia-pez-panda-asset-psephurus-gladus-1-indicador-1 { background-position: 0 96.339564%; background-size: 266.233766%; }

.infografia-pez-panda-asset-comparativo-buzo { background-position: 0 99.157475%; background-size: 317.337461%; }

.infografia-pez-panda-asset-circulo-azul-blanco { background-position: 0 100%; background-size: 2277.777778%; }

/*

.infografia-pez-panda-asset-background-pattern, .infografia-pez-panda-asset-mapa-distribucion, .infografia-pez-panda-asset-psephurus-gladus-1, .infografia-pez-panda-asset-psephurus-gladus-2-indicador-1, .infografia-pez-panda-asset-psephurus-gladus-2-indicador-2,

.infografia-pez-panda-asset-psephurus-gladus-2-indicador-3, .infografia-pez-panda-asset-psephurus-gladus-2-indicador-4, .infografia-pez-panda-asset-psephurus-gladus-2, .infografia-pez-panda-asset-comparativo-pez, .infografia-pez-panda-asset-comparativo-pez-b, .infografia-pez-panda-asset-metodo-reproduccion-1,

.infografia-pez-panda-asset-metodo-reproduccion-2, .infografia-pez-panda-asset-metodo-reproduccion-3, .infografia-pez-panda-asset-psephurus-gladus-1-indicador-1, .infografia-pez-panda-asset-comparativo-buzo, .infografia-pez-panda-asset-circulo-azul-blanco

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

.infografia-pez-panda-asset-background-pattern { background-position: 0 0%; background-size: 100%; }

.infografia-pez-panda-asset-mapa-distribucion { background-position: 0 2.324455%; background-size: 219.512195%; }

.infografia-pez-panda-asset-psephurus-gladus-1 { background-position: 0 12.766975%; background-size: 224.327019%; }

.infografia-pez-panda-asset-psephurus-gladus-2-indicador-1 { background-position: 0 21.979598%; background-size: 224.327019%; }

.infografia-pez-panda-asset-psephurus-gladus-2-indicador-2 { background-position: 0 31.192222%; background-size: 224.327019%; }

.infografia-pez-panda-asset-psephurus-gladus-2-indicador-3 { background-position: 0 40.482274%; background-size: 232.919255%; }

.infografia-pez-panda-asset-psephurus-gladus-2-indicador-4 { background-position: 0 49.904184%; background-size: 232.919255%; }

.infografia-pez-panda-asset-psephurus-gladus-2 { background-position: 0 59.326094%; background-size: 232.919255%; }

.infografia-pez-panda-asset-comparativo-pez { background-position: 0 64.844103%; background-size: 241.675618%; }

.infografia-pez-panda-asset-comparativo-pez-b { background-position: 0 64.064665%; background-size: 110.09667%; }

.infografia-pez-panda-asset-metodo-reproduccion-1 { background-position: 0 72.299568%; background-size: 329.912023%; }

.infografia-pez-panda-asset-metodo-reproduccion-2 { background-position: 0 81.962228%; background-size: 330.396476%; }

.infografia-pez-panda-asset-metodo-reproduccion-3 { background-position: 0 91.629321%; background-size: 330.396476%; }

.infografia-pez-panda-asset-psephurus-gladus-1-indicador-1 { background-position: 0 96.419866%; background-size: 584.415584%; }

.infografia-pez-panda-asset-comparativo-buzo { background-position: 0 99.175659%; background-size: 696.594427%; }

.infografia-pez-panda-asset-circulo-azul-blanco { background-position: 0 100%; background-size: 5000%; }

*/

#sm-infographics{

background-color: #40716a;

}

.sm-opening h1{

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

}

#sm-infographics{

background: rgb(64,113,106);

background: linear-gradient(90deg, rgba(64,113,106,1) 0%, rgba(32,102,91,1) 67%, rgba(32,102,91,1) 77%);

}

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

});

Un pez prehistórico gigante, la primera especie extinta del 2020

Luego de habitar los ríos de lo que hoy se conoce como China por 200 millones de años, el pez panda gigante, bautizado de esta manera debido a su rareza, dimensiones y a su estado protegido por las autoridades de aquel país, fue declarado extinto. La especie es la primera que desaparece en este 2020, tras 17 años sin registos de un avistamiento. Su descenso de población se vio marcado desde 1970 por la sobrepesca, la fragmentación de su hábitat, y la construcción de la presa Gezhouba, que bloqueó los hábitos migratorios del animal que necesitaba nadar río arriba para reproducirse y regresar al mar para alimentarse.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

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

});

Distribución

Este pez de río fue uno de los más grandes del mundo y uno de los más icónicos en China; estuvo presente en casi todos sus ríos.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

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

});

Método de reproducción

Estos animales solían mantenerse solos pero cuando

llegaba la temporada de apareamiento, viajaban en parejas.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

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

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

tween.fromTo(block_column_content, .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);

});

Marzo y abril

Migra río arriba y hacia los principales afluentes

para desovar.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

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

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

tween.fromTo(block_column_content, .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);

});

Desovación

Su huevos medían entre 2.5 y 5 mm y flotaban cerca de la superficie cuando estaban por eclosionar.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

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

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

tween.fromTo(block_column_content, .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);

});

Madurez

Alcanzan la madurez sexual con un peso de

alrededor de 25 kg, generalmente cuando tienen siete u ocho años.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#psephurus-gadius-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);

});

Psephurus Gladius

Era uno de los peces de agua dulce más grandes del mundo y endémico del gran río chino. Su nombre proviene de las palabras griegas pseph (guijarro) y phoreus (portador de), que cuando se combinan

significa psepharos; espátula.

// 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("#psephurus-gadius-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++ ){

var item = block_column_content[i];

var pointer = pin_pointer[i];

item.style.opacity=0;

height+=item.offsetHeight;

if (pointer) pointer.style.opacity=0;

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

var item = block_column_content[i];

var pointer = pin_pointer[i];

if (i == p){

if (current_jump != p ){

current_jump = i;

item.style.opacity=1;

pointer.style.opacity=1;

}

}else if ( ! i == p ){

item.style.opacity=0;

pointer.style.opacity=0;

}

}

})

.setPin(maincontainer, {pushFollowers: true})

.addTo(controller);

});

Rostrum

Larga tribuna en forma de espada, una estructura en forma de hocico repleta de células para detectar actividad eléctrica en animales de presa como los crustáceos.

Hocico afilado

Lo usaba para detectar la actividad eléctrica de sus presas, como crustáceos y peces.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

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

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

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

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

var height=image_layer.offsetHeight;

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

var item = block_column_content[i];

var pointer = pin_pointer[i];

item.style.opacity=0;

height+=item.offsetHeight;

if (pointer) pointer.style.opacity=0;

}

var current_jump=-1;

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

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

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++ ){

var item = block_column_content[i];

var pointer = pin_pointer[i];

if (i == p){

if (current_jump != p ){

current_jump = i;

item.style.opacity=1;

pointer.style.opacity=1;

}

}else if ( ! i == p ){

item.style.opacity=0;

pointer.style.opacity=0;

}

}

})

.setPin(maincontainer, {pushFollowers: true})

.addTo(controller);

});

Color

En el vientre son de tonalidad blanca, con respecto a su espalda y cabeza son de color gris plata y en sus terminaciones de aletas tienen un color rosado.

Cuerpo

Tenía una estructura muy larga de color gris plateado, y es cazado por la enorme cantidad de carne que poseen.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#causas-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);

});

Causas

Las razones por las que han desaparecido son la construcción de presas y la sobrepesca.

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

width: 50px;

}

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

width: calc( 95% - 50px);

}

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

width: calc( 95% - 50px);

}

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

width: 50px;

}

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#causas-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:-50, 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);

});

1970

La población de este pez comenzó a disminuir

dramáticamente, por la sobrepesca.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

});

1981

Se construyó la presa Gezhouba, que bloqueó los hábitos alimenticios, migratorios y reproductivos de la especie.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#causas-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:-50, 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);

});

1981

Durante este año el pez sólo fue visto 201 veces, por lo que ya era alarmante.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

});

1995

El 95.2% de los avistamientos fueron anteriores a este año.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#causas-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:-50, 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);

});

1996

Según la lista de la UICN, la especie fue puesta en peligro de extinción.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

var maincontainer= document.querySelector("#causas-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:50, 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);

});

2003

Se construyó otro embalse y empeoró la situación, siendo el año en que fue visto por última vez.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

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:-50, 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);

});

2010

Los expertos encontraron 322 especies de peces pero ninguna del pez remo.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

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:-50, 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);

});

2020

Fue declarado oficialmente extinto, por no haber sido avistado desde el 2003.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

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

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

var image_layer_1= maincontainer.querySelectorAll(".image_layer")[0];

var image_layer_2= maincontainer.querySelectorAll(".image_layer")[1];

var tween = new TimelineMax();

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

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

tween.fromTo(image_layer_1, 1, {opacity:0, scale:1, x:-150},{opacity:1, scale:1, x:0, ease: Power4.easeOut, delay:0});

tween.fromTo(image_layer_2, 1, {opacity:0, scale:1, x:-150},{opacity:1, scale:1, x:0, ease: Power4.easeOut, delay:0});

/*

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

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

*/

new ScrollMagic.Scene({

triggerElement: maincontainer,

triggerHook: "onCenter",

duration: 0,

offset: base_offset,

reverse:false,

})

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

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

})

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

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

})

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

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

})

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

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

})

.setTween(tween)

.addTo(controller);

});

Comparativo

La mayoría de los ejemplares medían 3 metros de longitud, sin embargo existen registros de

especímenes que llegaron a los 7 metros.

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