Interactivo: Catalogan en peligro de extinción… ¡al conejo!

Interactivo: Catalogan en peligro de extinción… ¡al conejo!
Por:
  • a._bartolome

Catalogan en peligro de extinción… ¡al conejo!

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

};

});

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

}

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

}

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

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

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

}

/* Generated by http://responsive-css.spritegen.com Responsive CSS Sprite Generator */

.interactivo-el-conejo-en-peligro-de-extincion-asset-oryctolagus-barbilla-indicador, .interactivo-el-conejo-en-peligro-de-extincion-asset-oryctolagus-cuerpo-indicador, .interactivo-el-conejo-en-peligro-de-extincion-asset-oryctolagus-dientes-indicador, .interactivo-el-conejo-en-peligro-de-extincion-asset-oryctolagus-nariz-indicador, .interactivo-el-conejo-en-peligro-de-extincion-asset-oryctolagus-ojos-indicador,

.interactivo-el-conejo-en-peligro-de-extincion-asset-oryctolagus-orejas-indicador, .interactivo-el-conejo-en-peligro-de-extincion-asset-oryctolagus, .interactivo-el-conejo-en-peligro-de-extincion-asset-ubicacion, .interactivo-el-conejo-en-peligro-de-extincion-asset-poblacion-grafica, .interactivo-el-conejo-en-peligro-de-extincion-asset-reproduccion-ritmo-reproductivo,

.interactivo-el-conejo-en-peligro-de-extincion-asset-causas-enferdad-hemorragica, .interactivo-el-conejo-en-peligro-de-extincion-asset-causas-agricultura, .interactivo-el-conejo-en-peligro-de-extincion-asset-causas-mixomatosis, .interactivo-el-conejo-en-peligro-de-extincion-asset-reproduccion-periodo, .interactivo-el-conejo-en-peligro-de-extincion-asset-reproduccion-gestacion,

.interactivo-el-conejo-en-peligro-de-extincion-asset-reproduccion-fertilidad-reducidad, .interactivo-el-conejo-en-peligro-de-extincion-asset-causas-depredacion

{ max-width: 100%; background-size: 100%; background-image: url('https://www.razon.com.mx/wp-content/uploads/2020/02/el-conejo-en-peligro-de-extincion-assets.png'); }

.interactivo-el-conejo-en-peligro-de-extincion-asset-oryctolagus-barbilla-indicador { background-position: 0 0%; background-size: 100%; }

.interactivo-el-conejo-en-peligro-de-extincion-asset-oryctolagus-cuerpo-indicador { background-position: 0 9.996076%; background-size: 100%; }

.interactivo-el-conejo-en-peligro-de-extincion-asset-oryctolagus-dientes-indicador { background-position: 0 19.992152%; background-size: 100%; }

.interactivo-el-conejo-en-peligro-de-extincion-asset-oryctolagus-nariz-indicador { background-position: 0 29.988228%; background-size: 100%; }

.interactivo-el-conejo-en-peligro-de-extincion-asset-oryctolagus-ojos-indicador { background-position: 0 39.984304%; background-size: 100%; }

.interactivo-el-conejo-en-peligro-de-extincion-asset-oryctolagus-orejas-indicador { background-position: 0 49.980381%; background-size: 100%; }

.interactivo-el-conejo-en-peligro-de-extincion-asset-oryctolagus { background-position: 0 59.976457%; background-size: 100%; }

.interactivo-el-conejo-en-peligro-de-extincion-asset-ubicacion { background-position: 0 66.750889%; background-size: 116.004296%; }

.interactivo-el-conejo-en-peligro-de-extincion-asset-poblacion-grafica { background-position: 0 74.196048%; background-size: 135.678392%; }

.interactivo-el-conejo-en-peligro-de-extincion-asset-reproduccion-ritmo-reproductivo { background-position: 0 78.215919%; background-size: 244.897959%; }

.interactivo-el-conejo-en-peligro-de-extincion-asset-causas-enferdad-hemorragica { background-position: 0 81.087036%; background-size: 246.575342%; }

.interactivo-el-conejo-en-peligro-de-extincion-asset-causas-agricultura { background-position: 0 84.196486%; background-size: 264.705882%; }

.interactivo-el-conejo-en-peligro-de-extincion-asset-causas-mixomatosis { background-position: 0 87.246164%; background-size: 274.111675%; }

.interactivo-el-conejo-en-peligro-de-extincion-asset-reproduccion-periodo { background-position: 0 89.947817%; background-size: 280.519481%; }

.interactivo-el-conejo-en-peligro-de-extincion-asset-reproduccion-gestacion { background-position: 0 92.68762%; background-size: 294.277929%; }

.interactivo-el-conejo-en-peligro-de-extincion-asset-reproduccion-fertilidad-reducidad { background-position: 0 95.867084%; background-size: 295.890411%; }

.interactivo-el-conejo-en-peligro-de-extincion-asset-causas-depredacion { background-position: 0 100%; background-size: 320.474777%; }

Cargando...

#splash-screen{

position:fixed;

width:100vw;

height:100%;

top:0;

left:0;

background:white;

display:flex;

z-index:100;

animation-duration: 1s;

-webkit-animation-duration: 1s;

animation-name: splash-screen-scape;

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

animation-play-state:paused;

animation-fill-mode: both;

animation-delay: 2s;

background-position: center;

background-repeat: no-repeat;

background-position:middle;

background-size: contain;

background-image: url("https://www.razon.com.mx/wp-content/uploads/2020/02/IMG_0219.png");

}

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

}

}

var runAnimations = false;

if ( runAnimations )

sceneConstructors.push(function (controller, base_offset){

console.log("#background sceneConstructors("+base_offset+")")

var maincontainer= document.querySelector("body");

var background= document.querySelector("#background .animation-layer");

var tween = new TimelineMax()

console.log("background.offsetHeight: "+background.offsetHeight)

console.log("maincontainer.scrollHeight: "+maincontainer.scrollHeight)

console.log("screen.height: "+screen.height)

// console.log("screen.height: "+screen.height)

var displacement=(background.offsetHeight-screen.height);

console.log("pre displacement: "+displacement)

displacement=Math.min(displacement,-displacement);

console.log("post displacement: "+displacement)

//

//tween.fromTo(background, 1, {y:0},{y:displacement, ease: Linear.easeInOut , delay:0});

new ScrollMagic.Scene({

triggerElement: maincontainer,

duration:maincontainer.scrollHeight+screen.height,

offset: 0,

reverse:true,

})

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

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

var prop="translateY("+displacement*e.progress+"px)";

background.style.top=displacement*e.progress+"px";

//console.log("background.style.transform: "+prop);

})

// .setTween(tween)

//// .addIndicators()

.addTo(controller);

});

#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%);*/

background: white;

}

#sm-infographics .red-text{

color: #c52926;

}

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

});

Catalogan en

peligro de

extinción…

¡al conejo!

La Unión Internacional para la

Conservación de la Naturaleza

catalogó al mamífero como una

especie más entre las que se

encuentran en grave riesgo de

desaparecer; los conejos de monte o comunes son un regulador clave del ecosistema mediterráneo, sin

embargo, las enfermedades, como la mixomatosis o la hemorragia vírica, desde finales de los años 80 está

elevando su tasa de mortandad que alcanza el 90 por ciento actualmente. Por otra parte, el animal fue

introducido a América en 1493 y se encuentra en gran parte del territorio mexicano.

#oryctikagus .title_layer *,

#oryctikagus .brief_layer *{

color: black;

}

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

});

Oryctolagus cuniculus

El conejo común o conejo europeo es una

especie de mamífero lagomorfo de la familia Leporidae, y el único miembro actual del género Oryctolagus.

// 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("#oryctikagus-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,

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

})

.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+"/"+block_column_content.length+"): "+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{

pointer.style.visibility="hidden";

}

}

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

});

Ojos

Tienen una visión de casi 360 grados, pueden ver lo que hay alrededor y detrás de ellos, pero no pueden ver de frente.

Orejas

Les ayudan a regular la temperatura corporal.

Longitud

Hasta 8 cm.

Nariz

Además de percibir olores en esta parte tiene receptores altamente sensibles para detectar peligro.

Barbilla

Los conejos la frotan para marcar su territorio.

Dientes

Nunca dejan de crecer pero se mantienen cortos por el uso que les dan al comer.

#cuerpo-celeste .title_layer *,

#cuerpo-celeste .brief_layer *{

color: black;

}

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

});

Ubicación

Se distribuye naturalmente en España,

Portugal y el sur de Francia, en donde afecta la disminución de su población en estado salvaje.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

});

Reproducción

En la actualidad el número anual de crías por coneja es de entre uno y diez.

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

});

Gestación

Dura menos de un mes y en cada parto pueden nacer entre 1 y 5 crías.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

});

Periodo

Una vez que la hembra da a luz a sus crías puede embarazarse nuevamente desde el día en que pare.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

});

Ritmo reproductivo

Técnicamente una hembra puede parir cientos de conejos por año, pero únicamente si las condiciones donde habita son óptimas.

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

});

Fertilidad reducida

Los conejos no llegan al ritmo nivel de fecundidad acelerado que se le atribuye ni en cautiverio, ni en la naturaleza.

#cuerpo-celeste .title_layer *,

#cuerpo-celeste .brief_layer *{

color: black;

}

if ( 1 )

sceneConstructors.push(function (controller, base_offset){

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

});

Población

La disminución de especímenes fue en ascenso drásticamente desde la aparición de la

mixomatosis.

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 enfermedades virales son el factor

fundamental para el descenso drástico de

población.

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

});

Mixomatosis

Fue detectada en las poblaciones de conejos desde 1896; produce un abultamiento característicofromando mixomas en los párpados y cabeza, su principal medio de propagación es con mosquitos y pulgas.

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

});

Enfermedad

Hemorrágica viral

El virus se puede encontrar en

secreciones y excreciones de los animales infectados, se puede transmitir por contacto directo , presentando fiebre depresión y falta de apetito.

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

});

Agricultura

extensiva

Es una técnica de cultivo que hace uso de la tierra a un nivel

industrial sembrando varios

productos por unidad de

superficie, invadiendo y limitando el hábitat del conejo.

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

});

Depredación

Muchos depredadores que están en el ecosistema del conejo se

alimentan principalmente de esta especie.

#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