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
