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