Essayer d'initialiser FullPage.JS après avoir fait défiler le héros

Question

Essayer d'initialiser FullPage.JS après avoir fait défiler le héros. En ce moment, si vous faites défiler le héros - FullPage est initialisé et continue à faire défiler les diapositives avec l'élan du défilement initial. J'ai cette fonction inplace pour mon init.

function initFullPage(){ 
    $(".view-case-study").addClass("projects-load"); 
    $(".pagination").addClass("visible"); 
    $(".logo-menu svg").toggleClass("hovered"); 

    $('#fullpage').fullpage({ 
    lazyLoading:false, 
    navigation: true, 
    navigationPosition: 'right', 
    css3:true, 
    normalScrollElementTouchThreshold: 5, 
    touchSensitivity: 10, 
    anchors: a_anchors, 
    menu: '#myMenu', 
    normalScrollElements: '.nav, .open-nav, .project-inner, .work-mode, .menu-shelf, .tab, .view-case-study, #hero, .hero-center-container', 
    afterLoad: function(anchorLink, index){ 
    var loadedSection = $(this); 
    projectUrl = loadedSection.data('url'); 
    project_title = loadedSection.data('title'); 
    loadedSection.addClass('projects-load'); 
    loadedSection.find(".full-line").animate({'width':'100%'},500); 
    loadedSection.animate({'background-position-y':'-20px','background-size':'120%'},1000); 
    $('#hero').animate({'opacity':'0'},1000); 
    $('#hero').addClass('destroy'); 
    $('.ui-info').animate({'opacity':'1'},350); 
    }, 
    onLeave: function(index, nextIndex, direction){ 
    var leavingSection = $(this); 
    leavingSection.removeClass('projects-load'); 
    leavingSection.find(".full-line").animate({'width':'0%'},250); 
    leavingSection.animate({'background-position-y':'0px','background-size':'110%'},100); 
    $('#project-inner-container').animate({scrollTop:0},0); 
    $('.ui-info').animate({'opacity':'0'},0); 
    } 
    }); 
fullPageInit = true; 
} 

Voici mon script de défilement de héros. J'ai essayé d'initialiser le script et de passer silencieusement à la première section, mais il ne veut pas écouter.

var winHeight = $(window).height(); 
$(window).scroll(function() { 

    var scrTop = $(document).scrollTop()/winHeight, 
     scrTopFixed = scrTop.toFixed(2), 
     scrTransform = scrTopFixed * 80, 
    bgPos = scrTransform/10 + 95, 
    heroOpacity = 1 - scrTransform/100; 

if ((scrTransform >= 80) && (fullPageInit == false)) { 
    initFullPage(); 
    $.fn.fullpage.silentMoveTo('#sidepocket'); 
} 

    $('svg.scroll-end').css({ 
     'clip': "rect(0px," + scrTransform + "px,200px,0px)", 
    }); 

}); // Close 

Answer 1

// Scroll SVG Hero 

    $('#scroll-control').on('scroll',function(e){ 
    var totalScroll = $('#scroll-control').scrollTop(); 
    var slowScroll = totalScroll * .2; 
    console.log(slowScroll); 
    $('svg.scroll-end').css({ 
     'clip': "rect(0px," + slowScroll + "px,200px,0px)", 
    }); 
    if(totalScroll > 400){ 
     if((fullPageInit == false) && (workPage == false)){ 
     fullPageInit = true; 
     $('#hero').animate({'opacity':'0'},300,function(){ 
      // remove scroll listener 
      $('#scroll-control').off(); 
      // set first project DOM 
      var wh = window.innerHeight ? window.innerHeight:$(window).height(); 
      $('#fullpage section').height(wh); 
      var loadedSection = $('#fullpage section:first-child'); 
      projectUrl = loadedSection.data('url'); 
      project_title = loadedSection.data('title'); 
      loadedSection.addClass('projects-load'); 
      loadedSection.find(".full-line").animate({'width':'100%'},500); 
      history.pushState(null, null, '#'+projectUrl); 
      loadedSection.animate({'background-position-y':'-20px','background-size':'120%'},1000,function(){ 
      initFullPage(); 
      $('#scroll-control').hide(); 
      }); 

      $('.ui-info').animate({'opacity':'1'},350); 
     }); 
      $('#hero').addClass('destroy'); 
     } 
    } 
    }); 

    var winHeight = $(window).height(); 

    $(window).scroll(function (e) { 
     console.log(e); 
     var scrTop = $(document).scrollTop()/winHeight, 
      scrTopFixed = scrTop.toFixed(2), 
      scrTransform = scrTopFixed * 80, 
     bgPos = scrTransform/10 + 95, 
     heroOpacity = 1 - scrTransform/100; 
    if ((scrTransform >= 80) && (fullPageInit === false)) { 
    } 

    }); // Close 

Le problème a été résolu en fixant un temps afin que FullPage n'initialise pas jusqu'à ce que le défilement des extrémités de la souris, par conséquent, vous ne Défilement prolongé ou avoir un élan qui oblige l'utilisateur à l'autre section.

Hope this helps autres essayant de créer des scripts personnalisés dans FullPage.JS

https://www.alexcoven.com