fullpage.js add slider fadeIn effect

Question

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;

        }

    });
});

This can be now achieve by using the [fullpage.js extension Fading Effect](http://alvarotrigo.com/fullPage/extensions/fadingEffect.html). — Alvaro, Sep 02 '16 at 17:39

Ouroborus · Accepted Answer · 2016-01-17T21:48:29.373

3

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

edited Jan 17 '16 at 21:48

answered Jan 17 '16 at 20:04

Ouroborus

16,237
4
39
62

Thank you sir, I tired that before. but don't understand how to make it right. you can check here : http://jewel-mahmud.com/Demo-Site/index.html it looks messy though. – Jewel Mahmud Nimul Shamim Jan 17 '16 at 20:14
@wohhiemahmud I've updated my answer to take into account what you appear to be trying to do in your code. You'll still have to make adjustments, but it should be enough to get you going. – Ouroborus Jan 17 '16 at 21:50
I upload a solution for you. you can check. Sliding is fine. but I cannot fixed the slider on the scrolling position. I don't know why I cannot make it right. – Jewel Mahmud Nimul Shamim Jan 18 '16 at 05:58

score 0 · Answer 2 · answered Jan 18 '16 at 05:53

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.

score 0 · Answer 3 · edited May 23 '17 at 11:45

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.

fullpage.js add slider fadeIn effect

3 Answers3

Update

Linked