About "paragraph sliding" in html

Question

I want to achieve such a function as paragraph sliding (I don't know how to explain paragraph sliding)

So I just put it on the website for you to see (It may take a while to enter)

https://grayraven.tw/

Like this one after another

I tried to write it myself, but there was no response after I wrote it

Below is my code

var mousewheel = (/Firefox/i.test(navigator.userAgent)) ?
"DOMMouseScroll" : "mousewheel";

var IDK = 1
slide.addEventListener(mousewheel,
        function (e) {
            if (e.wheelDelta > 0 || e.detail < 0) {
              IDK + 1 
              $("html,body").animate({scrollTop: $("#" + IDK ).offset().top}, 1000);
            } else {
                if(IDK=1){
                  console.log("NO")
                }else{
                  IDK - 1
                  $("html,body").animate({scrollTop: $("#" + IDK ).offset().top}, 1000);
                }
            }
        }, false);

If you can tell me how to write, thank you very much

My English is not very good, please forgive me

Answer 1

Did you mean this?

//Set each section's height equals to the window height
    $('section').height($(window).height());
    /*set the class 'active' to the first element 
     this will serve as our indicator*/
    $('section').first().addClass('active');

    /* handle the mousewheel event together with 
     DOMMouseScroll to work on cross browser */
    $(document).on('mousewheel DOMMouseScroll', function (e) {
        e.preventDefault();//prevent the default mousewheel scrolling
        var active = $('section.active');
        //get the delta to determine the mousewheel scrol UP and DOWN
        var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;
        
        //if the delta value is negative, the user is scrolling down
        if (delta < 0) {
            //mousewheel down handler
            next = active.next();
            //check if the next section exist and animate the anchoring
            if (next.length) {
               /*setTimeout is here to prevent the scrolling animation
                to jump to the topmost or bottom when 
                the user scrolled very fast.*/
                var timer = setTimeout(function () {
                    /* animate the scrollTop by passing 
                    the elements offset top value */
                    $('body, html').animate({
                        scrollTop: next.offset().top
                    }, 'slow');
                    
                    // move the indicator 'active' class
                    next.addClass('active')
                        .siblings().removeClass('active');
                    
                    clearTimeout(timer);
                }, 800);
            }

        } else {
            //mousewheel up handler
            /*similar logic to the mousewheel down handler 
            except that we are animate the anchoring 
            to the previous sibling element*/
            prev = active.prev();

            if (prev.length) {
                var timer = setTimeout(function () {
                    $('body, html').animate({
                        scrollTop: prev.offset().top
                    }, 'slow');

                    prev.addClass('active')
                        .siblings().removeClass('active');
                    
                    clearTimeout(timer);
                }, 800);
            }

        }
    });

body, html {
    margin:0;
    padding:0;
    overflow:hidden;
}
section {
    height:100vh!important;
    font-size:30px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
}
.bg1{background-color:#FAAD80;}
.bg2{background-color:#FF6767;}
.bg3{background-color:#FF3D68;}
.bg4{background-color:#A73489;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="bg1">First</section>
<section class="bg2">Second</section>
<section class="bg3">Third</section>
<section class="bg4">Fourth</section>