用鼠标滚轮控制页面滚动动画

Question

谁能帮助我了解本田是如何实现这种效果的： http://testdays.hondamoto.ch/

我是指滚动时的轻松。

Answer 1

打开他们的 JS 文件：http://testdays.hondamoto.ch/js/script_2.js

然后搜索 Utils - Navigation

/***********************************************************************************************/
/************************************  Utils - Navigation  *************************************/
/***********************************************************************************************/
/**
 * navigation
 */
function navigation(target){
    //--Init Quiz
    if(!quizRdy){
        hideQuiz();
    }

    //Add class to body
    var pageName = target.substr(1).split('-');
    $('body').removeClass(lastPage);
    $('body').addClass(pageName[0]);
    lastPage = pageName[0];

    if(resizeBg)retractBg();
    resizeBg = false;
    busy = true;
    $('body').addClass('loading');

    //Change Nav Color
    $('#nav-wrapper ul.nav li a').each(function(){
        $(this).removeClass('selected');
    });
    var currentNavNumber = currentNav +1;
    $('#main_nav_'+currentNavNumber).addClass('selected')

    var wHeight = $(window).height();
    if(wHeight<1080){
        var newMargin = 180 - ( (wHeight - 720)/2 ) ;
        if(newMargin<0) newMargin=180;
    }else{
        var newMargin =0 - (wHeight - 1080)/2;
    }

    var navTop = $(target).offset().top + newMargin;
    navTop += 'px';
    trace('navTop : '+navTop);
    //$('#nav-wrapper').css('top',navTop);

    $('html,body').stop().animate({
        scrollTop: $(target).offset().top + newMargin
    }, 1000,'easeInOutExpo',function(){
        trace('annime done - wHeight : '+wHeight+' target top : '+$(target).offset().top);

        if(currentNav==2 && !quizRdy && !quizForm){
            showQuiz();
        }
        if(currentNav==4){
            //update social datas
            $.getJSON('inc/socials.php', function(data) {
                $('#count-fans').empty().append(data['fans-count']);
                $('#count-followers').empty().append(data['followers-count']);
            });
        }
        /*
        if(currentNav==2){
            $('#quiz-nav').livequery(function(){
                $(this).show();
            });
        }else{
            $('#quiz-nav').livequery(function(){
                $(this).hide();
            });
        }
        */
        $('body').removeClass('loading');
        if(currentNav!=0 && currentNav!=4){
            $('#nav-wrapper').fadeIn(200);
        }else{
            $('#nav-wrapper').fadeOut(200);
        }
        if(currentNav==3){
            //--Init Google Map
            if(!mapReady){
                if(dealerReady){
                    //init map
                    initialize();
                }else{
                    askMap = true;
                }
            }
        }
        if(wHeight>1080){
            extendBg();
        }
        busy = false;
    });
}

/**
 * navigation next Page
 */
function nextPage(){
    if(currentNav<navArray.length-1 && !busy){ 
        currentNav++;   
        navigation(navArray[currentNav]);
    }
}
/**
 * navigation previous Page
 */
function prevPage(){
    if(currentNav>0 && !busy){ 
        currentNav--;   
        navigation(navArray[currentNav]);
    }
}

/**
 *  Center content
 */
function centerContent(){
    if(!busy){
        //--Retract Background if expended for big screen
        if(resizeBg)retractBg();

        var wHeight = $(window).height();
        var wWidth = $(window).width();
        var imgHeight = 0;

        //--Test image width / Height and fill the screen 
        if(wWidth / wHeight > ratioImg ){
            //trace('case1 -   width : ' + wWidth + '   height : '+wHeight);
            if(wHeight > 1080 || wWidth > 1900){
                var newImgHeight = wWidth * 1080 / 1920;
                $(".bg-image").each(function(){
                    $(this).css({
                        'height':newImgHeight+'px',
                        'width':'100%'
                    });
                });
                imgHeight = newImgHeight;
            }else{
                $(".bg-image").each(function(){
                    $(this).css({
                        'height':'1080px',
                        'width':'1900px'
                    });
                });
                imgHeight = 1080;
            }
        }else{
            if(wHeight > 1080 || wWidth > 1900){
                $(".bg-image").each(function(){
                    var newImgWidth = wHeight * 1920 / 1080;
                    $(this).css({
                        'height':wHeight+'px',
                        'width':newImgWidth+'px'
                    });
                });
                imgHeight = wHeight;
            }else{
                $(".bg-image").each(function(){
                    $(this).css({
                        'height':'1080px',
                        'width':'1900px'
                    });
                });
                imgHeight = 1080;
            }
        }
        //--Fix height if window > img height
        if(wHeight>imgHeight){
            $(".bg-image").each(function(){
                var newImgWidth = wHeight * 1920 / 1080;
                $(this).css({
                    'height':wHeight+'px',
                    'width':newImgWidth+'px'
                });
            });
        }
        //--Center horizontal bkg image
        if(wWidth<1900){
            $(".bg-image").each(function(){
                var marginCenter = (wWidth - 1900) / 2;
                marginCenter = marginCenter * -1;
                if($(this).width() > (wWidth + marginCenter)){
                    $(this).css({'margin-left':-marginCenter+'px'});
                }
            });
        }
        //--Scroll to the good position
        if(wHeight<1080){
            var newMargin = 180 - ( (wHeight - 720)/2 ) ;
            if(newMargin<0) newMargin=180;
        }else{
            var newMargin =0 - (wHeight - 1080)/2;
        }
        var navTop =$(navArray[currentNav]).offset().top + newMargin;
        navTop += 'px';
        //$('#nav-wrapper').css('top',navTop);
        //trace('Scrool to good position, then expend bg : ' + navArray[currentNav] + '  '+ $(navArray[currentNav]).offset().top);
        $('html,body').stop().animate({
            scrollTop: $(navArray[currentNav]).offset().top + newMargin
        }, 1000,'easeInOutExpo',function(){
            if(wHeight>1080){
                extendBg();
            }
        });
    }
}

/**
 *  Extend the background image for big screen ( > 1080 px )
 */
function extendBg(){
    var hWin = $(window).height();
    if(hWin > 1080){
        //--Get & save current page Name
        lastBg = navArray[currentNav].split('-');
        lastBg = lastBg[0].substr(1);
        lastheight = $('#bg-'+lastBg).height();
        //--Calculate the position from top to set the scroll position
        posToTop = (hWin - $('#bg-'+lastBg).height())/2;
        posToTop = $('#bg-'+lastBg).offset().top - posToTop;
        lastPosToTop = $('#bg-'+lastBg).offset().top;
        //trace('posToTop setting : '+posToTop+' page : ' + lastBg);
        //--Set boolean resize to true to call the retract BG
        resizeBg = true;
        $('#bg-'+lastBg).css({'z-index':2});
        //--Test if it's first or last
        if(currentNav != 0 && currentNav != (navArray.length-1)){
            $('#bg-'+lastBg).animate({
                height:hWin+'px',
                top:posToTop+'px'
            },600);
        }else{
            if(currentNav==0){
                posToTop=0;
                $('#bg-'+lastBg).animate({
                    height:hWin+'px',
                    top:0
                },600);
            }else{
                posToTop=0;
                $('#bg-'+lastBg).animate({
                    height:hWin+'px',
                    top:4320+'px'
                },600);
            }
        }
        //--Scroll to the bottom for credits page
        if(currentNav==(navArray.length-1)){
            $('html,body').stop().animate({
                scrollTop: $(document).height()
            }, 1000,'easeInOutExpo');
        }
    }
}
/**
 *  Retrac the background to normal
 */
function retractBg(){
    var hWin = $(window).height();
    if(resizeBg && lastheight>0 && lastBg!=""){
        $('#bg-'+lastBg).css({'z-index':0});
        //trace('posToTop callback : '+posToTop + ' lastBg :  ' +  lastBg + '  lastheight : ' +lastheight);
        if(posToTop>0){
            //trace('reset pos top : ' + posToTop);
            $('#bg-'+lastBg).animate({
                height:lastheight+'px',
                top:lastPosToTop+'px'
            },600)
        }else{
            $('#bg-'+lastBg).animate({
                height:lastheight+'px'
            },600)
        }
    }
}

Answer 2

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>

附注：
如果您的 .pages 位于像 $("#pagesParent") 这样的可滚动 DIV 中（而不是 $('html, body')），请使用 .position().top;

---

注意：
对于 mobile，您可能需要调整考虑浏览器标签栏高度的值（或者最好完全阻止该行为）。你明白了