Así que tengo cinco secciones:
<section id="one">Page 1</section> <section id="two">Page 2</section> <section id="three">Page 3</section> <section id="four">Page 4</section> <section id="five">Page 5</section>La cuestión es que quiero que sea posible moverse entre ellos con los desplazamientos del mouse ... como:
desplazarse hacia arriba => ir a la sección superior desplazarse hacia abajo => ir a la sección inferior
Es como el efecto de botón con comportamiento de desplazamiento pero sin botones.
Y quiero hacer que cada uno de ellos esté a pantalla completa de la pantalla actual (tengo una pantalla 1920/1080, la otra tiene 1024/768, ETC).
Tengo un código CSS como este:
html, body { margin: 0; height:100%; width:100%; padding:0; } section { display: block; background: #CFF; height:100%; width:100%; padding: 60px; padding-left: 120px; box-sizing: border-box; }Tendrías que usar Javascript para esto. Usar el detector de eventos de desplazamiento
document.addEventListener('scroll', (e) => { yPos = window.scrollY; //do your logic here } });Yo personalmente lo usaría así. tenga en cuenta que esto podría no funcionar dependiendo de sus necesidades.
let pages = [] pages.push(document.querySelector('#pageOne')) // do it for all your pages document.addEventListener('scroll', (e) => { yPos = window.scrollY; if (yPos> 500) return; const pageNum = Math.floor(yPos/100) pages[pageNum].focus() } });y mi css se vería algo como
secton{ // all your styles display:none; width: 100vw; height : 100vh; } section:focus{ display : block }