fullPage.js Skeleton

This is just a skeleton of fullPage.js, you can fork it and add you desire code so you can show your code easily.

HTML

<link rel="stylesheet" href="http://alvarotrigo.com/fullPage/jquery.fullPage.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/vendors/jquery.easings.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<body>
    <div id="fullpage">
        <div class="section" id="section1"><h1>HELLO<h1></div>
        <div class="section" id="section2">
            <div class="slide" id="slidetext1">
                <img id="GUITARLEFT" src="http://www.station-musicshop.de/WebRoot/Store8/Shops/64398533/5447/C89F/3D58/CEEB/20EC/C0A8/2BBC/EC23/fen_jbamstd3tsrw.jpg">
                <img id="GUITARRIGHT" src="http://www.station-musicshop.de/WebRoot/Store8/Shops/64398533/54FE/DEE4/14F5/F28C/4752/C0A8/2BBC/A551/fen_pbfranklgda.jpg">
            </div>
            <div class="slide" id="slidetext2">
                <img id="section-background" src="images/hipster.jpg">
            </div>
        </div>
        <div class="section" id="section3"></div>
    </div>
</body>

CSS

h1 {
    text-align:center;
}

#GUITARLEFT {
    position: absolute;
    left: -271px;
    bottom: 0;
    transition:all 1.2s ease-out;
    -webkit-transition: all 1.2s ease-out;
}
#GUITARRIGHT {
    position: fixed;
    right: -271px;
    bottom: 0;
    transition:all 1.2s ease-out;
    -webkit-transition: all 1.2s ease-out;
}
.open {
    position: absolute;
    left: -271px;
    bottom: 0;
    transition:all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
}

JavaScript

$(document).ready(function () {
    $('#fullpage').fullpage({
        css3: false,
        controlArrows: true,
        sectionsColor: ['#ffffff', '#004e7b', '#ffffff', '#004e7b', '#ffffff', '#004e7b'],
 
/* THIS SAYS: when you leave the first section (the one with the "HELLO" h1), execute this in the new section!!! */
            onLeave: function(index, nextIndex, direction){
            var leavingSection = $(this);

            //after leaving section 2
             if(index == 1 && direction =='down'){
                    $('#GUITARRIGHT').animate({right:"0"});
                    $('#GUITARLEFT').animate({left: "0"}).promise().done(function(){
                    $('#GUITARLEFT').addClass('open').removeAttr('id')});
        }
/* same thing for this but it changes direction by going up from the current section instead*/            
            else if(index == 2 && direction == 'up'){
                    $('#GUITARRIGHT').animate({right:"-271px"});
                    $('.open').animate({left:"-271px"});
            }
        }
        

    });

});