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
