The concept of "HTML paragraph shifting"

Question

The concept of "HTML paragraph shifting"

I am looking to implement a feature similar to paragraph sliding, but I am struggling to explain it clearly.

For demonstration purposes, I have added it to my website for you to view. Please note that it may take some time to load.

The paragraphs slide sequentially like this one after another.

I attempted to write the code myself, but did not receive any response after implementing it.

Below is the code I have written:

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 provide guidance on how to improve my code, I would greatly appreciate it.

Please excuse any errors in my English, as it is not my first language.

javascript html jquery css

Answer 1

Answer №1

Did you intend for this to be the solution?

//Adjust the height of each section to match the window height
    $('section').height($(window).height());
    /*Add the class 'active' to the first element 
     as an indicator*/
    $('section').first().addClass('active');

    /* Handle mousewheel event and DOMMouseScroll together to ensure cross-browser compatibility */
    $(document).on('mousewheel DOMMouseScroll', function (e) {
        e.preventDefault();//prevent default mousewheel scrolling
        var active = $('section.active');
        //Determine if scroll is UP or DOWN
        var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;
        
        //If delta is negative, user is scrolling down
        if (delta < 0) {
            //Scroll down handler
            next = active.next();
            //Check if next section exists and animate the scroll
            if (next.length) {
               /*Using setTimeout to prevent abrupt jumping during fast scrolling*/
                var timer = setTimeout(function () {
                    /* Animate scrollTop to next element's offset top value */
                    $('body, html').animate({
                        scrollTop: next.offset().top
                    }, 'slow');
                    
                    // Move the 'active' class indicator
                    next.addClass('active')
                        .siblings().removeClass('active');
                    
                    clearTimeout(timer);
                }, 800);
            }

        } else {
            //Scroll up handler
            /*Similar logic to scroll down handler but anchoring to previous sibling */
            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>

Answer 2

Did you intend for this to be the solution?

//Adjust the height of each section to match the window height
    $('section').height($(window).height());
    /*Add the class 'active' to the first element 
     as an indicator*/
    $('section').first().addClass('active');

    /* Handle mousewheel event and DOMMouseScroll together to ensure cross-browser compatibility */
    $(document).on('mousewheel DOMMouseScroll', function (e) {
        e.preventDefault();//prevent default mousewheel scrolling
        var active = $('section.active');
        //Determine if scroll is UP or DOWN
        var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;
        
        //If delta is negative, user is scrolling down
        if (delta < 0) {
            //Scroll down handler
            next = active.next();
            //Check if next section exists and animate the scroll
            if (next.length) {
               /*Using setTimeout to prevent abrupt jumping during fast scrolling*/
                var timer = setTimeout(function () {
                    /* Animate scrollTop to next element's offset top value */
                    $('body, html').animate({
                        scrollTop: next.offset().top
                    }, 'slow');
                    
                    // Move the 'active' class indicator
                    next.addClass('active')
                        .siblings().removeClass('active');
                    
                    clearTimeout(timer);
                }, 800);
            }

        } else {
            //Scroll up handler
            /*Similar logic to scroll down handler but anchoring to previous sibling */
            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>

The concept of "HTML paragraph shifting"

Answer №1

Similar questions

Tips for preventing redundant function calls to a prop within a ReactJS component

The requested 'Pagination' component (imported as 'Pagination') could not be located within the 'swiper' library. Possible exports include Swiper and default

Images Are Failing to Load on the Webpage

Managing a database update when server actions involve various form types

JavaScript getting overshadowed by other JavaScript libraries

Ajax experiences trouble with a intricate sequence of characters

When attempting to call a bundle file using browserify from React, an unexpected character '�' Syntax error is thrown: react_app_testing/src/HashBundle.js: Unexpected character '�' (1:0

Add a JSON file containing an image path as a value into a CSS background property

Utilizing a Function's Return Value as a State in React - A Comprehensive Guide

"Adjusting the AJAX call destination based on the current view or page: A step-by-step guide

Having trouble scrolling to the top in Flickr Search using AngularJS, the results are restricting my movement

attempting to refine an array of objects using another array within it

Ways to allocate space evenly between components of the same size in React Native

Regularly check in with the server via ajax calls

Guide on sending a sizable item as a string utilizing Axios

What is the process for the Rebol programming language to independently implement an asynchronous pluggable protocol for reading

Parsing error: 'Unexpected token' found in JSON while attempting to access an external file

Extract branch, path, and URL from the .gitmodules file by utilizing JavaScript Regex

utilizing vueJS for global notifications

Could the autofill feature in Chrome be turned off specifically for Angular form fields?