SOLUCIONADO
Mi Index, es una full page, donde cada section es exactamente 100vh de height. He creado un script que hace que si hago scroll, mi web se pasa a la otra section de golpe.
Estoy añadiendo unas barras en el lateral, que aumentan o disminuyen para indicar si estoy en una section u otra. Me gustaría hacer que si por ejemplo estoy en la section #home, la primera barra es más larga, y si hago scroll a la section #about, la primera barra se encoge y la segunda se hace más larga.
He usado esta librería para el efecto de scroll: https://github.com/fabeat/responsive-fullpage-scroll
Añadido:
Ahora mismo el scroll me sigue funcionando, sin embargo, al hacer scroll no se "amplia" ninguna a
, sin embargo al llegar a la tercera section se amplían todas:
Aquí os dejo el código:
<script>
document.addEventListener("DOMContentLoaded", function () {
var fps = new FullPageScroll('wrap', {
mediaQuery: 'screen and (min-width: 800px)',
goToTopOnLast: false
});
fps.onslide = function (e) {
console.log("Slide " + (e.target.currentSlide + 1) + " of " + e.target.slides.length);
document.querySelectorAll("#lineas a").forEach((link, index) => {
if (index === e.target.currentSlide) {
//añado estilos para indicar que está activa
$("#lineas a").addClass('activo');
} else {
//elimino estilos
$("#lineas a").removeClass('activo');
}
});
}
document.querySelectorAll('a.top').forEach(function (el) {
el.addEventListener('click', function (event) {
event.preventDefault();
fps.goToFirstSlide();
});
});
});
</script>
#wrap {
position: relative;
overflow: hidden;
background: #333;
}
#wrap section {
box-sizing: border-box;
position: relative;
height: 100vh;
overflow: hidden;
}
#lineas
{
position: fixed;
top: 50vh;
left: 0px;
}
#lineas a
{
display: block;
width: 44px;
height: 4px;
border-radius: 5px;
background: #fff42e;
margin: 30px 0px;
cursor: pointer;
}
#lineas .activo
{
width: 88px;
}
<div id="wrap">
<section id="home">...</section>
<section id="about">...</section>
<section id="work">...</section>
</div>
<div id="lineas">
<a href="#home" class="first activo"></a>
<a href="#about" class="second"></a>
<a href="#work" class="third"></a>
</div>
<script src="https://cdn.jsdelivr.net/gh/fabeat/responsive-fullpage-scroll@v1.0.3/dist/fullpage-scroll.js"></script>
El efecto de scroll funciona perfectamente pero no se me ocurre como hacer el efecto mencionado. Es un proyecto hecho con Django.
Muchas gracias :)