Using fade-in effect with fullpage.js slides

Update (08/09/2016): Starting version 2.8.6, fullpage.js now has built-in support for fade-in effect for slides via the 'faddingEffect' extension.

fullpage.js offers the option to display slides in sections which navigate horizontally. The plugin uses a scroll-left or scroll-right transform for changing slides.

The plugin however doesn't support cyclic loop back for slides. This means that after the last slide, the slides container will scroll-left all the way to the first slide. If there are 3 or more slides, this can be an unwanted effect.

An elegant solution to this is to nullify the scrolling and use a fade-in effect for each slide. This can be achieved by using the plugin's options to hook callbacks on slide transitions as shown below.

1 comment:

  1. This can now be done with the fullpage.js extension Fading Effect:

    This way you assure your code will still be compatible with future fullpage.js releases.