Quiero lograr una función como el deslizamiento de párrafos (no sé cómo explicar el deslizamiento de párrafos)
Así que solo lo puse en el sitio web para que lo veas (Puede tomar un tiempo para ingresar)
Como este uno tras otro
Traté de escribirlo yo mismo, pero no obtuve respuesta después de escribirlo.
A continuación se muestra mi código
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);Mi inglés no es muy bueno, por favor, perdóname.
¿Quiso decir esto?
//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>