How to fade in content on page scroll on a website that uses fullPage.js with CSS and jQuery

I recently used the fullPage.js script on a website that I am working on and ran into a bit of trouble getting the section content to fade in nicely when it was scrolled into view. Here is the way I was able to accomplish that feature.

Following the instructions on how to incorporate fullPage.js into my site, my HTML structure looked like this:

<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>

First, I added this declaration to my stylesheet, to start all of the page sections out as invisible:

.section {

Next I found the onattrchange listener (a jQuery plugin). I downloaded this script – – and uploaded to it to my website, and then added the call to it into my webpage, after my call to the jQuery library:

<script type="text/javascript" src=""></script>
<script type="text/javascript" src="/scripts/attrchange.js"></script>

*Note: make sure to verify that the path to your script in the code above is correct!

And then, finally I added this bit of jQuery to my webpage:


$(".section").eq(0).animate({"opacity":"1"},1500);  //fade the first div.section in on page load

    trackValues: true, // set to true so that the event object is updated with old & new values
    callback: function(evnt) {
        if(evnt.attributeName == "class") { // which attribute you want to watch for changes
            if( == -1) { // "active" is the class name you search for inside "class" attribute
                $("").animate({"opacity":"1"},1500); //fade in the section with class active

}); //end of document ready

And that did the trick! Now my section content fades in nicely when the new section is scrolled into view.

  • Tu─čba Ecevit


    Thank you for this solution.
    Is it possible, everytime when i change section always run the fade code?

    Now only first time running.

    • mralvaro

      It is possible now with the Fading Effect extension of fullpage.js.

  • Helen Steiner

    Thanks Libby Fisher.. It works very well…thanks for this key!
    Click this:

  • Alvaro

    This can now be achieved through the fullpage.js extension Fading Effect:

    This way compatibility with future versions is assured as well as things such as changing the scrolling speed.