How to use Fullpage.js fade effect on some sections, but not on others?

Design help Custom code
1

Hello,

I’ve successfully integrated fullpage.js into a client website, it was a smooth process! However, I’m struggling to apply the fade effect to only certain sections. This is my global Fullpage code:

<script>
$(document).ready(function() {

    
    if (window.innerWidth > 767) {
            $('#fullpage').fullpage({
        slidesNavigation: false,
        navigation: false,
        showActiveTooltips: true,
        licenseKey: 'hidden',
       	fadingEffectKey: 'hidden',
        scrollBar: true,
        fitToSection: true,
        controlArrows: false,
        dragAndMove: true,
        scrollOverflowReset: true,
        //easingcss3: 'ease',
       // easing: 'easeInOutCubic',
        bigSectionsDestination: null,


    });
    }
});

</script>

The fade effect code is fadingEffect: true, but I only want to apply this to one section (well, a section with 4/5 divs which look a little like a slider, so it fades between each one). I can’t quite figure this out - is there an easy trick to refer to just one section in the code above?

Thanks everyone!

2

I’ve had a similiar issue with fullpage.js and ended up writing a script to determine what the position of the slide is and then on the onLeave event I figured out the direction of the scroll and than compared that to the position of the slide.

So perhaps you could do the same and change the fadingEffect boolean onLeave, but who knows whether it will work properly.

3

Javascript is definitely not my strong point, so writing the correct code is proving to be a little tricky! Time to do more research I think.

If anyone has done this, please let me know!

4

@PChalk1 Can you share a read-only link?