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.
