General Fullpage.js fade effect
If you haven’t already heard of fullpage.js, it’s a simple and easy-to-use plugin that allows you to create stunning fullscreen scrolling websites. Check out some of them here.
I used it in one of our recent projects, here at Slicejack, and was faced with a challenge when the client requested “fade” instead of the “slide” effect.
Since fullpage.js doesn’t feature the “fade” option (March, 2016), I had to roll up my sleeves, do some research and come up with a working solution. Unfortunately, Google search for “fullpage.js fade effect” spat out only a handful of results, none of which were of much use to me.
All “fade” effect implementations I encountered were done by adding additional jQuery plugins and hacks.
Most of them didn’t even manage to implement a true “crossfade” effect, and were making the screen flash white between section/slide changes.
After some digging through my fullpage.js implementation, in Chrome dev tools, I realised that I could make the section/slide “fade” effect by just using CSS.
Not entirely convinced? Check this out!
This is a default fullpage.js slider with some custom styling – Default slider. All sections/slides have the default “slide” effect.
This fullpage.js slider maintains the same styling, but has the “fade” effect for section changes and “slide” effect for slide changes – Section fade slider.
CSS for section “fade” effect:
Let’s change things around a bit, and have the sections “slide” and slides “fade” – Slide fade slider.
CSS for slide “fade” effect:
If you want to add the “fade” effect to both sections and slides, just combine the two CSS snippets above.
How it works
Fullpage.js uses CSS3 transforms to scroll within sections and slides (unless you choose to use jQuery by disabling CSS3 option in the plugin settings).
Adding the above CSS snippets will prevent sections/slides from sliding by disabling the default transform (transform: none!important).
In its place, we add opacity, z-index, and visibility properties which we animate by using the CSS transition property.
Final words
Voila! Thats it! With just a few lines of CSS we managed to change the fullpage.js scrolling effect from “slide” to “fade”.
This works in all browsers that have CSS3 support.
I didn’t do any testing in older browsers, so keep that in mind if you need to support them on your project.
If you know a better way to implement the “fade” effect for fullpage.js plugin, I’d love to hear it! Please share what you think in the comments below.
Cheers!
NOTE: check out this blog post if you want to learn how to animate Fullpage.js content.
Article update 1 – May 27, 2016
Using ‘z-index’ property on ‘.fp-slide’ and ‘.fp-section’ messes up the CSS transition effects. Section/slide fade-in seems to be a lot faster than the fade-out animation, resulting in all CSS transitions not working as they should.
Removing the ‘z-index’ property from the ‘.fp-slide’, ‘.fp-slide.active’, ‘.fp-section’, ‘.fp-section.active’ will fix this.
The fade effect will work without it just fine.
IMPORTANT: Code examples and demos above haven’t been updated with these changes.
Article update 2 – September 7, 2016
The same fade effect can now be achieved directly in fullpage.js by using this extension.
Big thanks to Alvaro for pointing that out.
