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>
</div>

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

.section {
	opacity:0;
}

Next I found the onattrchange listener (a jQuery plugin). I downloaded this script – https://raw.github.com/meetselva/attrchange/master/attrchange.js – 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="http://code.jquery.com/jquery.min.js"></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:

<script>
$(document).ready(function(){

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

$(".section").attrchange({
    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(evnt.newValue.search(/active/i) == -1) { // "active" is the class name you search for inside "class" attribute
                $(".section.active").animate({"opacity":"1"},1500); //fade in the section with class active
            }
        }
    }
});

}); //end of document ready
</script>

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

Meet the author

Libby Fisher is an experienced freelance web developer, recently relocated from Seattle to Boston, and passionate about developing websites that are both aesthetically appealing and intuitively usable - or as she prefers: "beautifully effective."

  • Tu─čba Ecevit

    Hi,

    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: http://www.helpdoassignment.com/

  • Alvaro

    This can now be achieved through the fullpage.js extension Fading Effect:
    http://alvarotrigo.com/fullPage/extensions/fadingEffect.html

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