fullpage.js add slider fadeIn effect

问题:

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;

        }

    });
});

回答1:

These pages talk about adding the fade effect:

• Using fade-in effect with fullpage.js slides
• How to fade in content on page scroll on a website that uses fullPage.js with CSS and jQuery

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).

回答2:

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.

回答3:

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;
}

Update

It is now possible to do it through a fullpage.js extension.