Currently, I am working on a portfolio website for a filmmaker and I have a specific requirement. As users scroll down the window, I want the page to smoothly transition to the next section, and when scrolling up, I want it to go back to the previous section. It should give the appearance of jumping to another page, but in reality, it's all within a single page. Some examples of websites that achieve this effect can be found here: websites(, ).
While I know how to achieve this effect with a click event, I am unsure of how to implement it with a scroll event.
To be clear, I do not want something like what is shown on this website: ().
This is what some of my code looks like:
<body>
<section id="first" class="current">
Content
</section>
<section id="second">
Content
</section>
<section id="third">
Content
</section>
<section id="fourth">
Content
</section>
</body>
Each section occupies a full page view and the section with the "current" class is the one displayed on the page. I am looking for a way to dynamically remove the 'current' class from the current section and move it to the next section on scroll down, and the previous section on scroll up. Any guidance on how to accomplish this would be highly appreciated.
Thank you in advance.