user1464175 user1464175 - 1 year ago 68
CSS Question

Control page scroll animation with mousewheel

can anybody help me understand how Honda achieved this effect:
http://testdays.hondamoto.ch/

I mean the ease when you scroll.

Answer Source

var $pages = $(".page"),
    tot = $pages.length,
    c = 0, pagePos = 0, down = 0, listen = true;

$('html, body').on('DOMMouseScroll mousewheel', function(e) {
  
  e.preventDefault();
  if(!listen)return;
  
  listen = false;
  
  down = e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0;
  c = Math.min(Math.max(0, down ? ++c : --c), tot-1);
  pagePos = $pages.eq(c).offset().top;  
  
  $(this).stop().animate({scrollTop: pagePos}, 650, function(){
    listen = true;
  });
  
});
*{margin:0;}
.page{min-height:100vh;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page" style="background:#0bf">PAGE 1</div>
<div class="page" style="background:#fb0">PAGE 2</div>
<div class="page" style="background:#0fb">PAGE 3</div>
<div class="page" style="background:#b0f">PAGE 4</div>

P.S:
Use .position().top; if your .pages are inside a scrollable DIV like $("#pagesParent") (instead of $('html, body'))


Notice:
for mobile you might want to adjust the value accounting for the browser's tabs bar height (or best, prevent that behaviour at all). You got the idea

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download