El Comercio celebra 185 años de periodismo de calidad, transformación digital y legado en el Perú

#gpt_zocalo,
#clever-45754-sticky-footer-shadow,
#browsi_wrapper_0_ai_1_rc_0,
#browsi_wrapper_1_ai_1_rc_0,
#browsi_wrapper_2_ai_1_rc_0,
#browsi_wrapper_3_ai_1_rc_0,
#browsi_wrapper_4_ai_1_rc_0,
#browsi_wrapper_5_ai_1_rc_0,
#browsi_wrapper_6_ai_1_rc_0,
#browsi_wrapper_7_ai_1_rc_0,
#browsi_wrapper_8_ai_1_rc_0,
#browsi_wrapper_9_ai_1_rc_0,
#browsi_wrapper_10_ai_1_rc_0{
display: none !important;
height: 0 !important;
}
.nav-d__main-scroll.scrolled{
z-index: 99999;
}
#player-container{
left: 18px;
right: inherit;
top: 120px;
}
#player-container
#play-pause{
height: 40px;
width: 40px;
}
span.fecha-timeline-web{
max-width: 170px;
}
.box-info-timeline-web p{
margin: 20px 0;
}
.btn-publicacion-timeline-web p{
margin: 0 auto;
}

<!––>

$(document).ready(function() {
$(‘.flecha-bajar’).click(function() {
$(‘html, body’).animate({
scrollTop: $(‘.box-bajada’).offset().top
}, 1000); // 1000 milisegundos (1 segundo) para el desplazamiento suave
});
});

var scrollContainer = document.getElementById(‘scrollContainer’);
var touchstartX, touchstartY;
var timeoutId;

scrollContainer.addEventListener(‘wheel’, function(e) {
if (e.deltaY != 0) {
this.scrollLeft += e.deltaY;
e.preventDefault();

// Aplica la clase ‘active’ a los elementos visibles en la pantalla
var lis = document.querySelectorAll(‘.content li’);
lis.forEach(function(li) {
if (isElementVisible(li)) {
li.classList.add(‘active’);
clearTimeout(timeoutId); // Borra el temporizador anterior
timeoutId = setTimeout(function() {
li.classList.remove(‘active’); // Quita la clase ‘active’ después de 3 segundos
}, 1000); // Cambia este valor según lo deseado (en milisegundos)
} else {
li.classList.remove(‘active’);
}
});
}
});

scrollContainer.addEventListener(‘touchstart’, function(e) {
touchstartX = e.touches[0].pageX;
touchstartY = e.touches[0].pageY;
});

scrollContainer.addEventListener(‘touchmove’, function(e) {
var touchmoveX = e.touches[0].pageX;
var touchmoveY = e.touches[0].pageY;
var deltaX = touchstartX – touchmoveX;
var deltaY = touchstartY – touchmoveY;

if (Math.abs(deltaX) > Math.abs(deltaY)) {
this.scrollLeft += deltaX * 0.2; // Velocidad del scroll
e.preventDefault();

// Aplica la clase ‘active’ a los elementos visibles en la pantalla
var lis = document.querySelectorAll(‘.content li’);
lis.forEach(function(li) {
if (isElementVisible(li)) {
li.classList.add(‘active’);
clearTimeout(timeoutId); // Borra el temporizador anterior
timeoutId = setTimeout(function() {
li.classList.remove(‘active’); // Quita la clase ‘active’ después de 3 segundos
}, 1000); // Cambia este valor según lo deseado (en milisegundos)
} else {
li.classList.remove(‘active’);
}
});
}
});

// Función para verificar si un elemento es visible en la pantalla
function isElementVisible(el) {
var rect = el.getBoundingClientRect();
return (
rect.left >= 0 &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}

const scrollableDivs = document.querySelectorAll(«.scrollable»);

scrollableDivs.forEach((scrollableDiv) => {
let isDown = false;
let startX;
let scrollLeft;

scrollableDiv.addEventListener(«mousedown», (e) => {
isDown = true;
startX = e.pageX – scrollableDiv.offsetLeft;
scrollLeft = scrollableDiv.scrollLeft;
});

scrollableDiv.addEventListener(«mouseleave», () => {
isDown = false;
});

scrollableDiv.addEventListener(«mouseup», () => {
isDown = false;
});

scrollableDiv.addEventListener(«mousemove», (e) => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX – scrollableDiv.offsetLeft;
const walk = (x – startX) * 2; // velocidad de desplazamiento
scrollableDiv.scrollLeft = scrollLeft – walk;
});
});

$(document).ready(function() {

// popups portadas
$(‘[class^=»portada»]’).click(function() {
var id = $(this).attr(‘id’).split(‘-‘)[1];
$(‘#popup-‘ + id).fadeIn(‘fast’);
});

// popups mujeres
$(‘.btn-publicacion’).click(function() {
var popupId = $(this).data(‘popup’);
$(‘#’ + popupId).fadeIn(‘fast’);
});

// popups timeline hitos web
$(‘.btn-publicacion-timeline-web’).click(function() {
var popupId = $(this).data(‘popup’);
$(‘#’ + popupId).fadeIn(‘fast’);
});

// cerrar popups
$(‘.btn-cerrar’).click(function() {
$(‘.main-popup’).fadeOut(‘fast’);
$(‘.main-popup-mujeres’).fadeOut(‘fast’);
});

});

// box portada 1
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «.box-main-web»,
triggerHook: 0.1,
offset: 150,
})
.setClassToggle(«#box-portada», «scale-portada»)
//.addIndicators({name: «portada-1»}) // add indicators (requires plugin)
.addTo(controller);

// box portada 2
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «.box-main-web-2»,
triggerHook: 0.1,
offset: 150,
})
.setClassToggle(«#box-portada-2», «scale-portada»)
//.addIndicators({name: «portada-2»}) // add indicators (requires plugin)
.addTo(controller);

// box portada 3
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «.box-main-web-3»,
triggerHook: 0.1,
offset: 150,
})
.setClassToggle(«#box-portada-3», «scale-portada»)
//.addIndicators({name: «portada-3»}) // add indicators (requires plugin)
.addTo(controller);

// box portada 4
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «.box-main-web-4»,
triggerHook: 0.1,
offset: 150,
})
.setClassToggle(«#box-portada-4», «scale-portada»)
//.addIndicators({name: «box-main-web-4»}) // add indicators (requires plugin)
.addTo(controller);

// box portada 5
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «.box-main-web-5»,
triggerHook: 0.1,
offset: 150,
})
.setClassToggle(«#box-portada-5», «scale-portada»)
//.addIndicators({name: «box-main-web-5»}) // add indicators (requires plugin)
.addTo(controller);

// box portada 6
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «.box-main-web-6»,
triggerHook: 0.1,
offset: 150,
})
.setClassToggle(«#box-portada-6», «scale-portada»)
//.addIndicators({name: «box-main-web-6»}) // add indicators (requires plugin)
.addTo(controller);

// box portada 7
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «.box-main-web-7»,
triggerHook: 0.1,
offset: 150,
})
.setClassToggle(«#box-portada-7», «scale-portada»)
//.addIndicators({name: «box-main-web-7»}) // add indicators (requires plugin)
.addTo(controller);

// box portada 8
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «.box-main-web-8»,
triggerHook: 0.1,
offset: 150,
})
.setClassToggle(«#box-portada-8», «scale-portada»)
//.addIndicators({name: «box-main-web-8»}) // add indicators (requires plugin)
.addTo(controller);

// box portada 9
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «.box-main-web-9»,
triggerHook: 0.1,
offset: 150,
})
.setClassToggle(«#box-portada-9», «scale-portada»)
//.addIndicators({name: «box-main-web-9»}) // add indicators (requires plugin)
.addTo(controller);

// box portada 10
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «.box-main-web-10»,
triggerHook: 0.1,
offset: 150,
})
.setClassToggle(«#box-portada-10», «scale-portada»)
//.addIndicators({name: «box-main-web-10»}) // add indicators (requires plugin)
.addTo(controller);

// box portada 11
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «.box-main-web-11»,
triggerHook: 0.1,
offset: 150,
})
.setClassToggle(«#box-portada-11», «scale-portada»)
//.addIndicators({name: «box-main-web-11»}) // add indicators (requires plugin)
.addTo(controller);

// box portada 12
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «.box-main-web-12»,
triggerHook: 0.1,
offset: 150,
})
.setClassToggle(«#box-portada-12», «scale-portada»)
//.addIndicators({name: «box-main-web-12»}) // add indicators (requires plugin)
.addTo(controller);

// bloque-amarillo-texto
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «.box-main-ediciones»,
duration: ‘1050%’,
})
.setPin(«.box-bloque-info»)
//.addIndicators({name: «bloque-amarillo»}) // add indicators (requires plugin)
.addTo(controller);

// bg-ediciones-1
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «.box-bloque-info»,
triggerHook: 0.5,
offset: 100,
})
.setClassToggle(«#bg-ediciones-1», «fadeIn»)
//.addIndicators({name: «ediciones-1»}) // add indicators (requires plugin)
.addTo(controller);

// texto-ediciones-1
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «.box-bloque-info»,
triggerHook: 0.5,
offset: 100,
})
.setClassToggle(«#box-bloque-amarillo-2», «fadeIn»)
//.addIndicators({name: «box-bloque-amarillo-2»}) // add indicators (requires plugin)
.addTo(controller);

// bg-ediciones-2
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-2»,
triggerHook: 0.5,
/*offset: 780,*/
duration: ‘200%’,
})
.setClassToggle(«#bg-ediciones-2», «fadeIn»)
//.addIndicators({name: «ediciones-2»}) // add indicators (requires plugin)
.addTo(controller);

// texto-ediciones-2
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-2»,
triggerHook: 0.5,
offset: 1,
})
.setClassToggle(«#box-bloque-amarillo-3», «fadeIn»)
//.addIndicators({name: «box-bloque-amarillo-3»}) // add indicators (requires plugin)
.addTo(controller);

// bg-ediciones-3
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-3»,
triggerHook: 0.5,
/*offset: 1550,*/
duration: ‘200%’,
})
.setClassToggle(«#bg-ediciones-3», «fadeIn»)
//.addIndicators({name: «ediciones-3»}) // add indicators (requires plugin)
.addTo(controller);

// texto-ediciones-3
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-3»,
triggerHook: 0.5,
offset: 1,
reverse: true,
})
.setClassToggle(«#box-bloque-amarillo-4», «fadeIn»)
//.addIndicators({name: «box-bloque-amarillo-4»}) // add indicators (requires plugin)
.addTo(controller);

// bg-ediciones-4
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-4»,
triggerHook: 0.5,
/*offset: 2340,*/
duration: ‘200%’,
})
.setClassToggle(«#bg-ediciones-4», «fadeIn»)
//.addIndicators({name: «ediciones-4»}) // add indicators (requires plugin)
.addTo(controller);

// texto-ediciones-4
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-4»,
triggerHook: 0.5,
offset: 1,
})
.setClassToggle(«#box-bloque-amarillo-5», «fadeIn»)
//.addIndicators({name: «box-bloque-amarillo-5»}) // add indicators (requires plugin)
.addTo(controller);

// bg-ediciones-5
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-5»,
triggerHook: 0.5,
/*offset: 3120,*/
duration: ‘200%’,
})
.setClassToggle(«#bg-ediciones-5», «fadeIn»)
//.addIndicators({name: «ediciones-5»}) // add indicators (requires plugin)
.addTo(controller);

// texto-ediciones-5
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-5»,
triggerHook: 0.5,
offset: 1,
})
.setClassToggle(«#box-bloque-amarillo-6», «fadeIn»)
//.addIndicators({name: «box-bloque-amarillo-5»}) // add indicators (requires plugin)
.addTo(controller);

// bg-ediciones-6
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-6»,
triggerHook: 0.5,
/*offset: 3920,*/
duration: ‘200%’,
})
.setClassToggle(«#bg-ediciones-6», «fadeIn»)
//.addIndicators({name: «ediciones-6»}) // add indicators (requires plugin)
.addTo(controller);

// texto-ediciones-6
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-6»,
triggerHook: 0.5,
offset: 1,
})
.setClassToggle(«#box-bloque-amarillo-7», «fadeIn»)
//.addIndicators({name: «box-bloque-amarillo-6»}) // add indicators (requires plugin)
.addTo(controller);

// bg-ediciones-7
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-7»,
triggerHook: 0.5,
/*offset: 4670,*/
duration: ‘200%’,
})
.setClassToggle(«#bg-ediciones-7», «fadeIn»)
//.addIndicators({name: «ediciones-7»}) // add indicators (requires plugin)
.addTo(controller);

// texto-ediciones-7
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-7»,
triggerHook: 0.5,
offset: 1,
})
.setClassToggle(«#box-bloque-amarillo-8», «fadeIn»)
//.addIndicators({name: «box-bloque-amarillo-8»}) // add indicators (requires plugin)
.addTo(controller);

// bg-ediciones-8
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-8»,
triggerHook: 0.5,
/*offset: 5470,*/
duration: ‘200%’,
})
.setClassToggle(«#bg-ediciones-8», «fadeIn»)
//.addIndicators({name: «ediciones-8»}) // add indicators (requires plugin)
.addTo(controller);

// texto-ediciones-8
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-8»,
triggerHook: 0.5,
offset: 1,
})
.setClassToggle(«#box-bloque-amarillo-9», «fadeIn»)
//.addIndicators({name: «box-bloque-amarillo-8»}) // add indicators (requires plugin)
.addTo(controller);

// bg-ediciones-9
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-9»,
triggerHook: 0.5,
/*offset: 5470,*/
duration: ‘200%’,
})
.setClassToggle(«#bg-ediciones-9», «fadeIn»)
//.addIndicators({name: «ediciones-9»}) // add indicators (requires plugin)
.addTo(controller);

// texto-ediciones-9
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-9»,
triggerHook: 0.5,
offset: 1,
})
.setClassToggle(«#box-bloque-amarillo-10», «fadeIn»)
//.addIndicators({name: «box-bloque-amarillo-10»}) // add indicators (requires plugin)
.addTo(controller);

// bg-ediciones-11
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-10»,
triggerHook: 0.5,
/*offset: 5470,*/
duration: ‘200%’,
})
.setClassToggle(«#bg-ediciones-10», «fadeIn»)
//.addIndicators({name: «ediciones-10»}) // add indicators (requires plugin)
.addTo(controller);

// texto-ediciones-11
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-10»,
triggerHook: 0.5,
offset: 1,
})
.setClassToggle(«#box-bloque-amarillo-11», «fadeIn»)
//.addIndicators({name: «box-bloque-amarillo-11»}) // add indicators (requires plugin)
.addTo(controller);

// bg-ediciones-12
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-11»,
triggerHook: 0.5,
/*offset: 5470,*/
duration: ‘100%’,
})
.setClassToggle(«#bg-ediciones-11», «fadeIn»)
//.addIndicators({name: «ediciones-11»}) // add indicators (requires plugin)
.addTo(controller);

// texto-ediciones-12
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-11»,
triggerHook: 0.5,
offset: 1,
})
.setClassToggle(«#box-bloque-amarillo-12», «fadeIn»)
//.addIndicators({name: «box-bloque-amarillo-12»}) // add indicators (requires plugin)
.addTo(controller);

// EDICIONES MÓVIL

// bg-ediciones-1-movil
var controller = new ScrollMagic.Controller();
var fadein_tween = TweenMax.fromTo(
‘#bg-ediciones-1-movil’, 1, {
opacity:0 ,
ease: Power1.easeInOut },
{
opacity:1 ,
ease: Power1.easeInOut
}
);

var sceneContenedores = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-1-movil»,
trigerHook: 0.5,
duration: «10%»
})
.setTween(fadein_tween)
/*.addIndicators(
{
name: «bg-ediciones-1-movil»
}
)*/
.addTo(controller);

// box-bloque-amarillo-1-movil
var controller = new ScrollMagic.Controller();
var fadein_tween = TweenMax.fromTo(
‘#box-bloque-amarillo-1-movil’, 1, {
opacity:0 ,
ease: Power1.easeInOut },
{
opacity:1 ,
ease: Power1.easeInOut
}
);

var sceneContenedores = new ScrollMagic.Scene({
triggerElement: «#box-bloque-amarillo-1-movil»,
trigerHook: 0.5,
duration: «10%»
})
.setTween(fadein_tween)
/*.addIndicators(
{
name: «box-bloque-amarillo-1-movil»
}
)*/
.addTo(controller);

// bg-ediciones-2-movil
var controller = new ScrollMagic.Controller();
var fadein_tween = TweenMax.fromTo(
‘#bg-ediciones-2-movil’, 1, {
opacity:0 ,
ease: Power1.easeInOut },
{
opacity:1 ,
ease: Power1.easeInOut
}
);

var sceneContenedores = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-2-movil»,
trigerHook: 0.5,
duration: «10%»
})
.setTween(fadein_tween)
/*.addIndicators(
{
name: «bg-ediciones-2-movil»
}
)*/
.addTo(controller);

// box-bloque-amarillo-2-movil
var controller = new ScrollMagic.Controller();
var fadein_tween = TweenMax.fromTo(
‘#box-bloque-amarillo-2-movil’, 1, {
opacity:0 ,
ease: Power1.easeInOut },
{
opacity:1 ,
ease: Power1.easeInOut
}
);

var sceneContenedores = new ScrollMagic.Scene({
triggerElement: «#box-bloque-amarillo-2-movil»,
trigerHook: 0.5,
duration: «10%»
})
.setTween(fadein_tween)
/*.addIndicators(
{
name: «box-bloque-amarillo-2-movil»
}
)*/
.addTo(controller);

// bg-ediciones-3-movil
var controller = new ScrollMagic.Controller();
var fadein_tween = TweenMax.fromTo(
‘#bg-ediciones-3-movil’, 1, {
opacity:0 ,
ease: Power1.easeInOut },
{
opacity:1 ,
ease: Power1.easeInOut
}
);

var sceneContenedores = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-3-movil»,
trigerHook: 0.5,
duration: «10%»
})
.setTween(fadein_tween)
/*.addIndicators(
{
name: «bg-ediciones-3-movil»
}
)*/
.addTo(controller);

// box-bloque-amarillo-3-movil
var controller = new ScrollMagic.Controller();
var fadein_tween = TweenMax.fromTo(
‘#box-bloque-amarillo-3-movil’, 1, {
opacity:0 ,
ease: Power1.easeInOut },
{
opacity:1 ,
ease: Power1.easeInOut
}
);

var sceneContenedores = new ScrollMagic.Scene({
triggerElement: «#box-bloque-amarillo-3-movil»,
trigerHook: 0.5,
duration: «10%»
})
.setTween(fadein_tween)
/*.addIndicators(
{
name: «box-bloque-amarillo-3-movil»
}
)*/
.addTo(controller);

// bg-ediciones-4-movil
var controller = new ScrollMagic.Controller();
var fadein_tween = TweenMax.fromTo(
‘#bg-ediciones-4-movil’, 1, {
opacity:0 ,
ease: Power1.easeInOut },
{
opacity:1 ,
ease: Power1.easeInOut
}
);

var sceneContenedores = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-4-movil»,
trigerHook: 0.5,
duration: «10%»
})
.setTween(fadein_tween)
/*.addIndicators(
{
name: «bg-ediciones-4-movil»
}
)*/
.addTo(controller);

// box-bloque-amarillo-4-movil
var controller = new ScrollMagic.Controller();
var fadein_tween = TweenMax.fromTo(
‘#box-bloque-amarillo-4-movil’, 1, {
opacity:0 ,
ease: Power1.easeInOut },
{
opacity:1 ,
ease: Power1.easeInOut
}
);

var sceneContenedores = new ScrollMagic.Scene({
triggerElement: «#box-bloque-amarillo-4-movil»,
trigerHook: 0.5,
duration: «10%»
})
.setTween(fadein_tween)
/*.addIndicators(
{
name: «box-bloque-amarillo-4-movil»
}
)*/
.addTo(controller);

// bg-ediciones-5-movil
var controller = new ScrollMagic.Controller();
var fadein_tween = TweenMax.fromTo(
‘#bg-ediciones-5-movil’, 1, {
opacity:0 ,
ease: Power1.easeInOut },
{
opacity:1 ,
ease: Power1.easeInOut
}
);

var sceneContenedores = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-5-movil»,
trigerHook: 0.5,
duration: «10%»
})
.setTween(fadein_tween)
/*.addIndicators(
{
name: «bg-ediciones-5-movil»
}
)*/
.addTo(controller);

// box-bloque-amarillo-5-movil
var controller = new ScrollMagic.Controller();
var fadein_tween = TweenMax.fromTo(
‘#box-bloque-amarillo-5-movil’, 1, {
opacity:0 ,
ease: Power1.easeInOut },
{
opacity:1 ,
ease: Power1.easeInOut
}
);

var sceneContenedores = new ScrollMagic.Scene({
triggerElement: «#box-bloque-amarillo-5-movil»,
trigerHook: 0.5,
duration: «10%»
})
.setTween(fadein_tween)
/*.addIndicators(
{
name: «box-bloque-amarillo-5-movil»
}
)*/
.addTo(controller);

// bg-ediciones-6-movil
var controller = new ScrollMagic.Controller();
var fadein_tween = TweenMax.fromTo(
‘#bg-ediciones-6-movil’, 1, {
opacity:0 ,
ease: Power1.easeInOut },
{
opacity:1 ,
ease: Power1.easeInOut
}
);

var sceneContenedores = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-6-movil»,
trigerHook: 0.5,
duration: «10%»
})
.setTween(fadein_tween)
/*.addIndicators(
{
name: «bg-ediciones-6-movil»
}
)*/
.addTo(controller);

// box-bloque-amarillo-6-movil
var controller = new ScrollMagic.Controller();
var fadein_tween = TweenMax.fromTo(
‘#box-bloque-amarillo-6-movil’, 1, {
opacity:0 ,
ease: Power1.easeInOut },
{
opacity:1 ,
ease: Power1.easeInOut
}
);

var sceneContenedores = new ScrollMagic.Scene({
triggerElement: «#box-bloque-amarillo-6-movil»,
trigerHook: 0.5,
duration: «10%»
})
.setTween(fadein_tween)
/*.addIndicators(
{
name: «box-bloque-amarillo-6-movil»
}
)*/
.addTo(controller);

// bg-ediciones-7-movil
var controller = new ScrollMagic.Controller();
var fadein_tween = TweenMax.fromTo(
‘#bg-ediciones-7-movil’, 1, {
opacity:0 ,
ease: Power1.easeInOut },
{
opacity:1 ,
ease: Power1.easeInOut
}
);

var sceneContenedores = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-7-movil»,
trigerHook: 0.5,
duration: «10%»
})
.setTween(fadein_tween)
/*.addIndicators(
{
name: «bg-ediciones-7-movil»
}
)*/
.addTo(controller);

// box-bloque-amarillo-7-movil
var controller = new ScrollMagic.Controller();
var fadein_tween = TweenMax.fromTo(
‘#box-bloque-amarillo-7-movil’, 1, {
opacity:0 ,
ease: Power1.easeInOut },
{
opacity:1 ,
ease: Power1.easeInOut
}
);

var sceneContenedores = new ScrollMagic.Scene({
triggerElement: «#box-bloque-amarillo-7-movil»,
trigerHook: 0.5,
duration: «10%»
})
.setTween(fadein_tween)
/*.addIndicators(
{
name: «box-bloque-amarillo-7-movil»
}
)*/
.addTo(controller);

// bg-ediciones-8-movil
var controller = new ScrollMagic.Controller();
var fadein_tween = TweenMax.fromTo(
‘#bg-ediciones-8-movil’, 1, {
opacity:0 ,
ease: Power1.easeInOut },
{
opacity:1 ,
ease: Power1.easeInOut
}
);

var sceneContenedores = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-8-movil»,
trigerHook: 0.5,
duration: «10%»
})
.setTween(fadein_tween)
/*.addIndicators(
{
name: «bg-ediciones-8-movil»
}
)*/
.addTo(controller);

// box-bloque-amarillo-8-movil
var controller = new ScrollMagic.Controller();
var fadein_tween = TweenMax.fromTo(
‘#box-bloque-amarillo-8-movil’, 1, {
opacity:0 ,
ease: Power1.easeInOut },
{
opacity:1 ,
ease: Power1.easeInOut
}
);

var sceneContenedores = new ScrollMagic.Scene({
triggerElement: «#box-bloque-amarillo-8-movil»,
trigerHook: 0.5,
duration: «10%»
})
.setTween(fadein_tween)
/*.addIndicators(
{
name: «box-bloque-amarillo-8-movil»
}
)*/
.addTo(controller);

// bg-ediciones-9-movil
var controller = new ScrollMagic.Controller();
var fadein_tween = TweenMax.fromTo(
‘#bg-ediciones-9-movil’, 1, {
opacity:0 ,
ease: Power1.easeInOut },
{
opacity:1 ,
ease: Power1.easeInOut
}
);

var sceneContenedores = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-9-movil»,
trigerHook: 0.5,
duration: «10%»
})
.setTween(fadein_tween)
/*.addIndicators(
{
name: «bg-ediciones-9-movil»
}
)*/
.addTo(controller);

// box-bloque-amarillo-9-movil
var controller = new ScrollMagic.Controller();
var fadein_tween = TweenMax.fromTo(
‘#box-bloque-amarillo-9-movil’, 1, {
opacity:0 ,
ease: Power1.easeInOut },
{
opacity:1 ,
ease: Power1.easeInOut
}
);

var sceneContenedores = new ScrollMagic.Scene({
triggerElement: «#box-bloque-amarillo-9-movil»,
trigerHook: 0.5,
duration: «10%»
})
.setTween(fadein_tween)
/*.addIndicators(
{
name: «box-bloque-amarillo-9-movil»
}
)*/
.addTo(controller);

// bg-ediciones-10-movil
var controller = new ScrollMagic.Controller();
var fadein_tween = TweenMax.fromTo(
‘#bg-ediciones-10-movil’, 1, {
opacity:0 ,
ease: Power1.easeInOut },
{
opacity:1 ,
ease: Power1.easeInOut
}
);

var sceneContenedores = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-10-movil»,
trigerHook: 0.5,
duration: «10%»
})
.setTween(fadein_tween)
/*.addIndicators(
{
name: «bg-ediciones-10-movil»
}
)*/
.addTo(controller);

// box-bloque-amarillo-10-movil
var controller = new ScrollMagic.Controller();
var fadein_tween = TweenMax.fromTo(
‘#box-bloque-amarillo-10-movil’, 1, {
opacity:0 ,
ease: Power1.easeInOut },
{
opacity:1 ,
ease: Power1.easeInOut
}
);

var sceneContenedores = new ScrollMagic.Scene({
triggerElement: «#box-bloque-amarillo-10-movil»,
trigerHook: 0.5,
duration: «10%»
})
.setTween(fadein_tween)
/*.addIndicators(
{
name: «box-bloque-amarillo-10-movil»
}
)*/
.addTo(controller);

// bg-ediciones-11-movil
var controller = new ScrollMagic.Controller();
var fadein_tween = TweenMax.fromTo(
‘#bg-ediciones-11-movil’, 1, {
opacity:0 ,
ease: Power1.easeInOut },
{
opacity:1 ,
ease: Power1.easeInOut
}
);

var sceneContenedores = new ScrollMagic.Scene({
triggerElement: «#bg-ediciones-11-movil»,
trigerHook: 0.5,
duration: «10%»
})
.setTween(fadein_tween)
/*.addIndicators(
{
name: «bg-ediciones-11-movil»
}
)*/
.addTo(controller);

// box-bloque-amarillo-11-movil
var controller = new ScrollMagic.Controller();
var fadein_tween = TweenMax.fromTo(
‘#box-bloque-amarillo-11-movil’, 1, {
opacity:0 ,
ease: Power1.easeInOut },
{
opacity:1 ,
ease: Power1.easeInOut
}
);

var sceneContenedores = new ScrollMagic.Scene({
triggerElement: «#box-bloque-amarillo-11-movil»,
trigerHook: 0.5,
duration: «10%»
})
.setTween(fadein_tween)
/*.addIndicators(
{
name: «box-bloque-amarillo-11-movil»
}
)*/
.addTo(controller);

var controller = new ScrollMagic.Controller();

new ScrollMagic.Scene({
triggerElement: «#container»,
triggerHook: «onLeave»,
duration: «300%»
})
.setPin(«#container»)
.addTo(controller)
.on(«progress», function (e) {
var progress = e.progress;
var numImages = 21; // Cantidad de imágenes
var currentImageIndex = Math.floor(progress * numImages);
var images = document.querySelectorAll(‘.image-sequence img’);

// Ocultar todas las imágenes
images.forEach(function(img) {
img.style.opacity = 0;
});

// Mostrar la imagen actual
images[currentImageIndex].style.opacity = 1;

// Mostrar la última imagen si se alcanza el final
if (currentImageIndex === numImages – 1) {
images[numImages – 1].style.opacity = 1;
}
});

// fecha 1962
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#fecha-1»,
triggerHook: 0.5,
offset: 100,
/*reverse: true,*/
})
.setClassToggle(«#fecha-1», «enterLeft»)
//.addIndicators({name: «fecha-1»}) // add indicators (requires plugin)
.addTo(controller);

// box Clorinda Matto
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#fecha-1»,
triggerHook: 0.5,
offset: 100,
})
.setClassToggle(«#box-mujer-1», «enterBottom»)
//.addIndicators({name: «box-mujer-1»}) // add indicators (requires plugin)
.addTo(controller);

// fecha 1902
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#fecha-2»,
triggerHook: 0.5,
offset: 100,
})
.setClassToggle(«#fecha-2», «enterLeft»)
//.addIndicators({name: «fecha-2»}) // add indicators (requires plugin)
.addTo(controller);

// box Dora Mayer
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#fecha-2»,
triggerHook: 0.5,
offset: 100,
})
.setClassToggle(«#box-mujer-2», «enterRight»)
//.addIndicators({name: «box-mujer-2»}) // add indicators (requires plugin)
.addTo(controller);

// box Ángela Ramos
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#box-mujer-3»,
triggerHook: 0.5,
offset: 100,
})
.setClassToggle(«#box-mujer-3», «enterBottomBox»)
//.addIndicators({name: «box-mujer-3»}) // add indicators (requires plugin)
.addTo(controller);

// box Rosa Sosa
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#box-mujer-3»,
triggerHook: 0.5,
offset: 100,
})
.setClassToggle(«#box-mujer-4», «enterTopBox»)
//.addIndicators({name: «box-mujer-4»}) // add indicators (requires plugin)
.addTo(controller);

// box redacción 1950
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#fecha-16»,
triggerHook: 0.5,
offset: 100,
})
.setClassToggle(«#box-mujer-16», «enterBottom»)
//.addIndicators({name: «box-mujer-16»}) // add indicators (requires plugin)
.addTo(controller);

// fecha 1962
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#fecha-5»,
triggerHook: 0.5,
offset: 100,
})
.setClassToggle(«#fecha-5», «enterLeft»)
//.addIndicators({name: «fecha-5»}) // add indicators (requires plugin)
.addTo(controller);

// box Martha Hildebrandt
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#fecha-5»,
triggerHook: 0.5,
offset: 100,
})
.setClassToggle(«#box-mujer-5», «enterRight»)
//.addIndicators({name: «box-mujer-5»}) // add indicators (requires plugin)
.addTo(controller);

// box Bárbara d’Achille
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#fecha-6»,
triggerHook: 0.5,
offset: 100,
})
.setClassToggle(«#box-mujer-6», «enterLeftCenter»)
//.addIndicators({name: «box-mujer-6»}) // add indicators (requires plugin)
.addTo(controller);

// box Rossana Echandía
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#fecha-7»,
triggerHook: 0.5,
offset: 100,
})
.setClassToggle(«#box-mujer-7», «enterRightCenter»)
//.addIndicators({name: «box-mujer-7»}) // add indicators (requires plugin)
.addTo(controller);

// fecha 1995
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#fecha-8»,
triggerHook: 0.5,
offset: 100,
})
.setClassToggle(«#fecha-8», «enterLeft»)
//.addIndicators({name: «fecha-8»}) // add indicators (requires plugin)
.addTo(controller);

// box Virginia Rosas
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#fecha-8»,
triggerHook: 0.5,
offset: 100,
})
.setClassToggle(«#box-mujer-8», «enterBottom»)
//.addIndicators({name: «box-mujer-8»}) // add indicators (requires plugin)
.addTo(controller);

// fecha 2001
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#fecha-9»,
triggerHook: 0.5,
offset: 100,
})
.setClassToggle(«#fecha-9», «enterLeft»)
//.addIndicators({name: «fecha-9»}) // add indicators (requires plugin)
.addTo(controller);

// box Mariza Zapata
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#fecha-9»,
triggerHook: 0.5,
offset: 100,
})
.setClassToggle(«#box-mujer-9», «enterRight»)
//.addIndicators({name: «box-mujer-9»}) // add indicators (requires plugin)
.addTo(controller);

// box Patricia Castro
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#fecha-10»,
triggerHook: 0.5,
offset: 100,
})
.setClassToggle(«#box-mujer-10», «enterBottomBox»)
//.addIndicators({name: «box-mujer-10»}) // add indicators (requires plugin)
.addTo(controller);

// box Inés Menacho
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#fecha-10»,
triggerHook: 0.5,
offset: 100,
})
.setClassToggle(«#box-mujer-11», «enterTopBox»)
//.addIndicators({name: «box-mujer-11»}) // add indicators (requires plugin)
.addTo(controller);

// fecha 2017
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#fecha-12»,
triggerHook: 0.5,
offset: 100,
})
.setClassToggle(«#fecha-12», «enterLeft»)
//.addIndicators({name: «fecha-12»}) // add indicators (requires plugin)
.addTo(controller);

// box Graciela Villasis
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#fecha-12»,
triggerHook: 0.5,
offset: 100,
})
.setClassToggle(«#box-mujer-12», «enterRight»)
//.addIndicators({name: «box-mujer-12»}) // add indicators (requires plugin)
.addTo(controller);

// box Marito
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#fecha-13»,
triggerHook: 0.5,
offset: 100,
})
.setClassToggle(«#box-mujer-13», «enterLeftCenter»)
//.addIndicators({name: «box-mujer-13»}) // add indicators (requires plugin)
.addTo(controller);

// box Mayté
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#fecha-14»,
triggerHook: 0.5,
offset: 100,
})
.setClassToggle(«#box-mujer-14», «enterRightCenter»)
//.addIndicators({name: «box-mujer-14»}) // add indicators (requires plugin)
.addTo(controller);

// box mujeres 2024
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: «#fecha-15»,
triggerHook: 0.5,
offset: 100,
})
.setClassToggle(«#box-mujer-15», «enterBottom»)
//.addIndicators({name: «box-mujer-14»}) // add indicators (requires plugin)
.addTo(controller);

var track = document.getElementById(‘track’);

var controlBtn = document.getElementById(‘play-pause’);

function playPause() {
if (track.paused) {
track.play();
//controlBtn.textContent = «Pause»;
controlBtn.className = «pause»;
} else {
track.pause();
//controlBtn.textContent = «Play»;
controlBtn.className = «play»;
}
}

controlBtn.addEventListener(«click», playPause);
track.addEventListener(«ended», function() {
controlBtn.className = «play»;
});