I never worked with fullpage.js. I tried a lot with the slider transition effect. scrolling is fine with slider effect. its move to left to right with scrolling but can't add the fadeIn and fadeOut effect.

Sample site : http://www.mi.com/shouhuan/#clock My Code : http://jewel-mahmud.com/demo-site/index.html

var slideIndex  = 1,
    sliding     = false;

$(document).ready(function() {

    $('#fullpage').fullpage({

        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'],
        scrollingSpeed:1000,
        css3: true,

        onLeave: function(index, nextIndex, direction) {

            if(index == 2 && !sliding) {

                if(direction == 'down' && slideIndex < 3) {

                    sliding = true;
                    $.fn.fullpage.moveSlideRight();
                    slideIndex++;
                    return false;

                } else if(direction == 'up' && slideIndex > 1) {
                    sliding = true;
                    $.fn.fullpage.moveSlideLeft();
                    slideIndex--;
                    return false;
                }

            } else if(sliding) {

                return false;

            }

        },

        afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {

            sliding = false;

        }

    });
});

These pages talk about adding the fade effect:

It appears to be mainly a matter using the fullpage.js slide events to trigger jQuery animations.

This jsfiddle seems to do what you want (using sections).

It looks like there's two ways to do this kind of thing and it depends on what you're trying to animate. fullpage.js has two kinds of views built into it, .section and .slide, with slides being children of sections, and they have different callbacks. The examples use slides but you're using sections so I think that's where the confusion is coming in. Converting to a fade effect requires hooking into the right callbacks and applying the correct animations (which are different between sections and slides).

I am using something easy and more efficient to me.

    onLeave: function(index, nextIndex, direction) {
        if( index == 2 && direction == 'down'){
            $('#slide1').fadeOut(700);
            $('#slide2').fadeIn(700);
        }

        if( index == 3 && direction == 'down'){
            $('#slide2').fadeOut(700);
            $('#slide3').fadeIn(700);
        }
    },

    afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex) {
        sliding = false;
    },

but the problem is the I cannot fixed the scroll when its sliding. I tried sir. But I cannot make it adjustment.

Alvaro

Taken from this answer. Although far from perfect as the defined scrolling speed in fullpage.js won't take effect in here and you have to definen it in the CSS. Also, it will only work for sections and not horizontal slides.

Just add the following CSS to override the fullpage.js styles.

.section {
    text-align: center;
}

.fullpage-wrapper {
    width: 100%!important;
    transform: none!important;
}

.fp-section {
    width: 100%!important;
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
    opacity: 0;
    z-index: 0;
    transition: all .7s ease-in-out;
}

.fp-section.active {
    visibility: visible;
    opacity: 1;
    z-index: 1;
}