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.