Vertical scroll by sections (as if it were a slide)

Question

I’m trying to create a page with 3 sections that change to the next by scrolling as if it were a slideshow where each section is a frame. As in this site here: http://www.legworkstudio.com/

This is the . HTML:

<section id="apresentacao">

  <h2>Section One</h2>

</section>

<section id="catergorias">

  <h2>Section Two</h2>

</section>

<section id="estoque">

  <h2>Section Three</h2>

</section>

No . js:

var sectionOne = $('section')[0].offsetTop;
var sectionTwo = $('section')[1].offsetTop;
var sectionThree = $('section')[2].offsetTop;

$(document).on("scroll", function() {
  if (window.pageYOffset <= sectionTwo){
    $("html, body").animate({scrollTop: sectionTwo},1000);
}
  else if (window.pageYOffset <= sectionThree) {
    $("html, body").animate({scrollTop: sectionThree},1000);
}
  else if (window.pageYOffset >= sectionThree) {
    $("html, body").animate({scrollTop: sectionTwo},1000);
}
})

In this case, it only recognizes the first scroll and then hangs in the second section. Does anyone know how to fix it? Thanks

Answer 1

Guy as he had commented from to do something very similar only with CSS and HTML. Including using transitions etc.

I used radio Buttons and Transitions to do the effect. Moreover he is fine resposnivo pq is all in Flex practically.

See the result!

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.links {
    width: 100%;
    height: 50px;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
}
.links label {
    flex-grow: 1;
    cursor: pointer;
    transition: all 500ms ease-in-out;
    text-align: center;
    font-family: sans-serif;
    font-size: 100%;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 50px;
    color: white;
}
.links :hover {
    background-color: rgba(0,0,0,0.3);
}
.scroll {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.scroll input {
    display: none;
}
.bloco {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: -1;
}
#menu-item1 {
    background-image: linear-gradient(45deg,blue, purple)
}
#menu-item2 {
    background-image: linear-gradient(45deg,purple, salmon)
}
#menu-item3 {
    background-image: linear-gradient(45deg,salmon, orangered)
}
#menu-item4 {
    background-image: linear-gradient(45deg,orangered, gold)
}

#item2:checked ~ section {
    margin-top: -100vh;
}
#item3:checked ~ section {
    margin-top: -200vh;
}
#item4:checked ~ section {
    margin-top: -300vh;
}

#item1:checked ~ section > #menu-item1,
#item2:checked ~ section > #menu-item2,
#item3:checked ~ section > #menu-item3,
#item4:checked ~ section > #menu-item4 {
    opacity: 1;
}
#menu-item1, 
#menu-item2, 
#menu-item3, 
#menu-item4 {
    opacity: 0;
    transition: opacity 300ms ease;
}


#menu-item2 img, #menu-item4 img{
    opacity: 0;
    margin-bottom: 100vh;
    transition: all 300ms 300ms ease;
}
#menu-item1 img, #menu-item3 img{
    opacity: 0;
    margin-top: 100vh;
    transition: all 300ms 300ms ease;
}
#item2:checked ~ section > #menu-item2 img,
#item4:checked ~ section > #menu-item4 img {
    opacity: 1;
    margin-bottom: initial;
}
#item1:checked ~ section > #menu-item1 img, 
#item3:checked ~ section > #menu-item3 img {
    opacity: 1;
    margin-top: initial;
}

.ativo1, .ativo2, .ativo3, .ativo4   {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    width: 25%;
    height: 50px;
    background-color: rgba(0,0,0,0.3);
}
.ativo2 {
    left: 25%;
}
.ativo3 {
    left: 50%;
}
.ativo4 {
    left: 75%;
}

<nav class="links">
    <label for="item1">Item 1</label>
    <label for="item2">Item 2</label>
    <label for="item3">Item 3</label>
    <label for="item4">Item 4</label>
</nav>

<div class="scroll">
    <input type="radio" id="item1" name="menu" checked>
    <input type="radio" id="item2" name="menu">
    <input type="radio" id="item3" name="menu">
    <input type="radio" id="item4" name="menu">

    <section class="sections">
        <div class="bloco" id="menu-item1">
            <div class="ativo1"></div>
            <h1>Conteúdo item 1 aqui!</h1>
            <img src="https://placecage.com/200/200" alt="">
        </div>
        <div class="bloco" id="menu-item2">
            <div class="ativo2"></div>
            <h1>Conteúdo item 2 aqui!</h1>
            <img src="https://placecage.com/210/200" alt="">
        </div>
        <div class="bloco" id="menu-item3">
            <div class="ativo3"></div>
            Conteúdo item 3 aqui!
            <img src="https://placecage.com/220/200" alt="">
        </div>
        <div class="bloco" id="menu-item4">
            <div class="ativo4"></div>
            Conteúdo item 4 aqui!
            <img src="https://placecage.com/230/200" alt="">
        </div>
    </section>
</div>

Video that served as inspiration: https://www.youtube.com/watch?v=QiI6PbD6Ei4