Wie man Mausrad blättern zu Abschnitt wie in mediafire.com

Question

Ich stieß auf die Homepage dieser Website http://www.mediafire.com/, in dem, wenn Sie das Mausrad die Seitenposition automatisch zum nächsten Abschnitt auf der Seite rollen. Ich möchte wissen, wie es gemacht wird. Kann mir jemand dabei helfen? Danke im Voraus.

Grüße, Aswin

Answer 1

Ich denke, diese Art der Animation wahrscheinlich schwierig ist, vor allem jemand neu in jQuery nehmen in. Dies umfasst das Scrollen, das Erfassen der Mausrad-Ereignisse, das Verzögern der Animationen und vor allem das ordnungsgemäße Funktionieren in Cross-Browsern und in den Wisch- und Berührungsereignissen der mobilen Browser. Wenn Sie kein solides Verständnis haben, würde ich vorschlagen, dass Sie ein Plugin verwenden. Diese zwei sind die besten: One Page Scroll und Full Page.

Ich kann Ihnen nur die grundlegende Methode zeigen, wie Sie dies in cross-Browsern erledigen können. Wenn Sie möchten, dass es auf Mobilgeräten funktioniert, sollten Sie Ihren Part übernehmen und die Swipe- und Touch-Ereignisse hinzufügen. :)

//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); 
     } 

    } 
}); 

Hier ist eine Demo: jsfiddle.net/NGj7F/