fullPage.js

by DannyEnglander

HTML

<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.js"></script>
<link rel="stylesheet" href="http://alvarotrigo.com/fullPage/jquery.fullPage.css">
<div class="section" id="section1">
    <div class="slide black">
        <div class="intro">
            <h1>Simple</h1>
            <p>Easy to use. Configurable and customizable.</p>
        </div>
    </div>
    
    <div class="slide gray">
        <div class="intro">
            <h1>Cool</h1>
            <p>It just looks cool. Impress everybody with a simple and modern web design!</p>
        </div>
    </div>
    
    <div class="slide gray">
        <div class="intro">
            <h1>Compatible</h1>
            
            <p>Working in modern and old browsers too! IE 8 users don't have the fault of using that horrible browser! Lets give them a chance to see your site in a proper way!</p>
        </div>
    </div>
    
    <!--slide arrow controls rendered here by jQuery.fullPage.js -->
</div>
<!-- // section -->

CSS

body {
    font-size: 100%;
}
.section {
    padding: 0;
}
.slide.gray {
    background: #888;
    color: #fff;
}
.slide.black {
    background: #000;
    color: #fff;
}
.intro {
    padding: 0 10%;
    font-size: 1.9em;
}

JavaScript

jQuery(function ($) {
    var pepe = $.fn.fullpage({
        'css3': true,
        "verticalCentered": true
    });
    var colors = ['gray', 'black'], regex = new RegExp(colors.join('|'));
    $('.controlArrow').on('click', function () {
        var classes = $('.slide.active').prop('className');
        var color = classes.match(regex)[0];
        $('.controlArrow').removeClass(colors.join(' ')).addClass(color)
    });
});