So I have five sections:
<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>
The thing is I wanna make it possible to move between them with mouse scrolls.. such as:
scroll up => go to the upper section scroll down => go to the lower section
It's just like the button effect with scroll behavior but without buttons.
And I want to make each of them full screen of the current screen (I have screen 1920/1080 other has 1024/768 ETC).
I have CSS code like this:
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;
}
You'd have to use Javascript for this. Use the scroll event listener
document.addEventListener('scroll', (e) => {
yPos = window.scrollY;
//do your logic here
}
});
i would personally use it like this. note this might not work depending on your needs.
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()
}
});
and my css would look something like
secton{
// all your styles
display:none;
width: 100vw;
height : 100vh;
}
section:focus{
display : block
}