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.

About Luka Čavka

I’m a front-end developer from Split, Croatia, with a passion for responsive web development, especially HTML and CSS coding. During 7+ years of professional experience I have worked with clients from various fields and have published more than a few hundred websites. In my spare time I enjoy tinkering with new front end tools/techniques and having a beer (or two) at the local pub.

  • Javier Losada

    Hey Luka! Thanks for the lines, it works really great.

    I’m using this WordPress theme: http://www.semplicelabs.com/ which is using fullpage.js for its “cover slider”: http://coverslider.semplicelabs.com/ but I cannot make it work properly. The first slide disappears softly but I get a blank screen after that, and I don’t know what’s wrong. If you take a look, let me know! Cheers.

    • Luka Čavka

      Hey Javier

      I applied the fade code snippet here http://coverslider.semplicelab using the Chrome Developer Tools. It worked fine, just like in my demos.

      I would really like to help you. Is there anyway I can see the website you are working on? That would make debugging the code much easier.

      Cheers

      • Javier Losada

        Hey! Thank you very much for your kind answer. The website is http://www.isabel-duque.com, and I’m trying just with a copy+paste of the CSS for slide “fade” effect (I have remove the code for the moment because the website is already online and public).

        Thanks again!

        • Luka Čavka

          Hey Javi

          Did the same thing on your website (added the code through developer tools). Works fine.

          Recorded it so you can take a look:
          https://monosnap.com/file/dxy8frz8BXgnXDeIzCzNaeiIxlPfPH

          Just to be clear, you have to add the code from the second snippet to your CSS. The one below this title “CSS for slide “fade” effect”.
          You have to make sure that the snippet is loaded after the fullpage.js CSS so it can overwrite the default styles.

          • Javier Losada

            It works! Sorry, in fact some lines weren’t overwriting the default style. Thank you very much!

          • Luka Čavka

            Great!!! Glad you made it work. 🙂

            Cheers

          • Javier Losada

            Hey Luka! Sorry for bothering you again. After trying it for a while, I’ve realized that it looks like, when the transition happens, the incoming image appears a bit suddenly. I’ve tried with different transition kinds and that effect remains. If you take a look let me know. Thanks again! (I deleted one of my last post because of the client URL)

          • Luka Čavka

            No problem Javier. Glad I can help.

            Try removing ‘visibility’ and ‘z-index’ CSS properties from ‘.fp-slide .active’ and ‘.fp-slide’.

          • Javier Losada

            A thousand thanks! Works like a charm. Cheers!

  • David Kordić

    Hey Luka,
    Thanks for your great example! I was facing the same challenge as you but couldn’t even think I could make the effect with only a few lines of CSS. However, one detail in your example keeps bugging me. http://dev2.slicejack.com/fullpage/section-fade.html
    When the page loads, you can see the contents of all 3 sections at once, overlapping each other. Did you maybe manage to find a solution for this?
    Thanks anyway!

    • David Kordić

      P.S. help me with this tonight and I’m buying beer on Saturday.. 🙂

      • Luka Čavka

        Hi David,

        Sorry for the late reply, I’m on a vacation currently.

        Since this is a script loading issue, you can try hiding the body until the fullpage.js fully loads.
        Something like this:
        body {display:none}
        body[class*=”fp-viewing-“] {display:block}

        • David Kordić

          That worked like a charm! Thanks a million. I think you should update your original post with that. Hvala još jednom! Pozdrav iz Mostara

          • Luka Čavka

            You’re welcome. Glad it worked.

            Pozdrav s Visa 🙂

  • Jonny

    Thanks for this!

  • DoomDesign

    Thank you so much, I was worried I needed another fullpage slide screenshow, but your code made this unnecessary! <3

    • Luka Čavka

      You’re welcome 🙂 Glad I could help.

  • Siddharth Rai

    Hi Luka ,
    Since it is single page web page so I don’t want that when user click the page should traverse previously click pages. I want when user click back button on browser it should come out of entire page means it should leave the website. what should I do please help me.

    • Luka Čavka

      Hi Siddharth,

      Just add a “recordHistory: false,” option to your fullpage initialization.

      List of all options can be found in the fullpage.js documention: https://github.com/alvarotrigo/fullPage.js#fullpagejs

      • Siddharth Rai

        Thank you so much Luke for replying. I will try your suggested option.

      • Siddharth Rai

        Hi @lukacavka,

        There is predefined background colour in every page and when I am applying my image on it then first it is loading predefined color and then then my image. what should I do to remove the default background colour of the pages.

        Thanks and Regards,
        Siddharth Rauy

        • Luka Čavka

          Hi @disqus_GitugWiyIt:disqus

          If your section background colours aren’t defined in CSS, check your Fullpage.js initalization script.
          Remove the line of code that looks something like this:
          “sectionsColor: [‘#0F2980’, ‘#ffd200’, ‘#c1c1c1’],”.

          However, you are probably seeing background colours before images because your image files are to large and take too much time to load. Try optimizing them. You can run all images through http://www.jpegmini.com/

          • Siddharth Rai

            HI Luka Cavka,

            Thanks a ton for your reply.
            How can set different image on different section?
            and recordHistory:false is not working for me still I have to travel pages on page to get out of website.
            With Regards,
            Siddharth Ray

          • Luka Čavka

            “recordHistory: false” should work. Just tested it on my demo page. Try refreshing the page or opening it in new browser window.

            Regarding backgrounds: give each section an unique id or class and add a background image through CSS using those unique selectors.

            Regarding animations: https://slicejack.com/animating-fullpage-js-content/

            Thats all I can help you with today. Need to get some work done. 🙂

            Good luck with your website.

          • Siddharth Rai

            Is there is possibility to put image only in one page and remaining to be plain without any img or color?

          • Siddharth Rai

            I have download animate.css and I want to make a bounce effect on page scroll but when I applying css on second section of page then at the time of loading of home page only the second get animated so It is also not visible. How to achieve that when I scroll down then It get bounce

      • Siddharth Rai

        I tried recordHistory:false but is not working 🙁

  • mralvaro

    Great article!! It is a nice workaround although this can now be done directly in fullpage.js using an extension for it:
    http://alvarotrigo.com/fullPage/extensions/fadingEffect.html

    • Luka Čavka

      Hi Alvaro,

      That’s awesome! 🙂
      I will add a note at the end of an article. Keep up the good work!

  • tjfang

    Thanks Luka, it works like magic and really helpful.
    Many many thanks !!

  • Thomas

    Hello LUKA ČAVKA, I’m using your code css snippet (1st one) to get the transitions effects, which works perfect and I’m happy with them on desktop.

    I want to disable the effects on smaller devices such as Ipad and mobile, so I can scroll default (normal) without transitions.

    Only option for me to disable this effects is by removing your code snippet (1st one) but than I lose those effects on desktop aswell.

    I have enabled responsivewidth at 976 pixels in jQuery.fullPage.js script.

    Is it possible to empty those 3 classes I added in CSS (for transitions) on mobile and iPad?

    Can you help me with it?

    Thanks a lot.
    Thomas