How do we achieve something like this - https://accountbased.co.uk/AWS/UK_flip_book_2020/#firstPage
On a tiny scroll it moves to the next section, what HTML, CSS and JS is needed to achieve this? Please direct me to another post if this already exists!
The best way to do this is to use JavaScript, where one of the way to achieve your goal is a scrollIntoView method, along side with the {behavior: option set as smooth} for the animated affect, like this:
var firstsec = document.getElementById('f');
var secondsec = document.getElementById('s');
document.onscroll = function scroll() {
secondsec.scrollIntoView({behavior: "smooth"});
} body::-webkit-scrollbar {
display: none;
}<h1 id="f">my first section</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1 id="s">my second section</h1>On the example above, the browser is "listening" for a scrolling event, than executes the function that scrolls it down to the second section. Plus, I add a css ::Pseudo-element that hides the scrollbar but keeps the functionality of scrolling.
What you want to do is "listen" for the direction of scrolling (up/down) which can be achieved by setting a pageYOffset proparty which refers to the scrolling of the vertical bar, which is on the Y axis, like mentioned on this answer: Detecting scroll direction in a "if" function (if the scrolling is down, do that, otherwise, do that).
You should also set any section's sizes to 100% with css, so each section would take the whole screen:
#f, #s {
height: 100%; /* of the window */
width: 100%; /* of the window */
}
var firstsec = document.getElementById('f');
var secondsec = document.getElementById('s');
var lastScrollTop = 0;
window.onscroll = function(){
var st = window.pageYOffset || document.documentElement.scrollTop;
if (st > lastScrollTop){
secondsec.scrollIntoView({behavior: "smooth"});
} else {
firstsec.scrollIntoView({behavior: "smooth"});
}
lastScrollTop = st <= 0 ? 0 : st;
} body::-webkit-scrollbar {
display: none;
}
#f, #s {
height: 100%;
width: 100%;
background: green;
}<div id="f">
<h1>my first section</h1>
JavaScript (/ˈdʒɑːvəˌskrɪpt/),[6] often abbreviated as JS, is a programming language that conforms to the ECMAScript specification.[7] JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.
Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide Web.[8] JavaScript enables interactive web pages and is an essential part of web applications. The vast majority of websites use it for client-side page behavior,[9] and all major web browsers have a dedicated JavaScript engine to execute it.
</div>
<div id="s">
<h1>my second section</h1>
As a multi-paradigm language, JavaScript supports event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM). However, the language itself does not include any input/output (I/O), such as networking, storage, or graphics facilities, as the host environment (usually a web browser) provides those APIs.
JavaScript engines were originally used only in web browsers, but they are now embedded in some servers, usually via Node.js. They are also embedded in a variety of applications created with frameworks such as Electron and Cordova.
Although there are similarities between JavaScript and Java, including language name, syntax, and respective standard libraries, the two languages are distinct and differ greatly in design.
</div>css proparty that defines smooth scrolling without JavaScript, like you asked for, but it is not "fired" on scrolling but needs a click. Check this page.