parallax template 1

parallax template 1

by santosh_patnala

HTML

<link rel="stylesheet" href="https://github.com/alvarotrigo/fullPage.js/blob/master/jquery.fullPage.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://github.com/alvarotrigo/fullPage.js/blob/master/jquery.fullPage.min.js"></script>
<script src="http://isotope.metafizzy.co/isotope.pkgd.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<div id="fullpage" class="row">
    <div class="container">
        <div class="section " id="section0">
            <div class="sectionContainer">
                <div class="col-lg-12">
                     <h1>
                            Index</h1>

                    <p>index page</p>
                </div>
            </div>
        </div>
        <div class="section " id="section1">
            <div class="sectionContainer">
                <div class="col-lg-12">
                     <h1>
                            About Us</h1>

                    <p>about us page</p>
                </div>
            </div>
        </div>
        <div class="section" id="section2">
            <div class="sectionContainer">
                <div class="itemsWrapper col-lg-12">
                     <h1>
                            Isotope Products - animate percentage item width with jQuery</h1>

                    <div id="filters" class="button-group">
                        <button class="btn btn-link is-checked" data-filter="*">Show All</button>
                        <button class="btn btn-link" data-filter=".endowment">end</button>
                        <button class="btn btn-link" data-filter=".term">ter</button>
                        <button class="btn btn-link" data-filter=".whole">whole</button>
                        <button class="btn btn-link" data-filter=".mb">M B</button>
                        <button class="btn btn-link" data-filter=".sp">SP</button>
                        <button class="btn btn-link"...

CSS

body {
    background: -webkit-linear-gradient(90deg, #5B9081 10%, #455C5C 90%);
    /* Chrome 10+, Saf5.1+ */
    background: -moz-linear-gradient(90deg, #5B9081 10%, #455C5C 90%);
    /* FF3.6+ */
    background: -ms-linear-gradient(90deg, #5B9081 10%, #455C5C 90%);
    /* IE10 */
    background: -o-linear-gradient(90deg, #5B9081 10%, #455C5C 90%);
    /* Opera 11.10+ */
    background: linear-gradient(90deg, #5B9081 10%, #455C5C 90%);
    /* W3C */
}
* {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
#fp-nav ul li a span, .fp-slidesNav ul li a span {
    background: #fff;
}
.isotope {
    margin-bottom: 18px;
    max-width: 1200px;
}
/* clear fix */
 .isotope:after {
    content:'';
    display: block;
    clear: both;
}
/* ---- .item ---- */
 .item {
    float: left;
    width: 100px;
    height: 100px;
    padding: 10px 15px;
    background: #0D8;
    border: 2px solid #333;
    border-color: hsla(0, 0%, 0%, 0.7);
}
.item.width2 {
    width: 200px;
}
.item.height2 {
    height: 200px;
}
.item:hover {
    background: #8CF;
    cursor: pointer;
}
.item.gigante {
    width: 400px;
    height: 200px;
    background: #F80;
}
#notification {
    position: fixed;
    background: black;
    opacity: 0;
    color: white;
    font-size: 16px;
    padding: 0.5em;
    right: 0;
    top: 0;
}
.itemSmall {
    text-align: center;
}
.productName {
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
}
.productSlogan {
    font-size: 13px;
    font-style: italic;
}
.sectionContainer {
    background: none repeat scroll 0 0 #fff;
    float: left;
    padding: 0px;
    width: 100%;
}
.fp-tableCell {
    vertical-align: middle;
}
.contactWrapper {
    position: absolute;
    background: none repeat scroll 0% 0% rgb(255, 255, 255);
    top: 12px;
    left: 12px;
}
/*FOOTER START*/
 .socialIcons a {
    height: 28px;
    width: 28px;
    float: left;
}
.socialIcons a.fbook {
    background: url(../images/facebook.png) no-repeat scroll 0 0...

JavaScript

var $notifElem;

$(document).ready(function () {
    $('#fullpage').fullpage({
        navigation: true,
        navigationPosition: 'right',
        navigationTooltips: ['Home', 'About Us', 'Products', 'Contact Us'],
        responsive: 900
    }); //FULL PAGE SCROLLING END

    var $container = $('.isotope').isotope({
        itemSelector: '.item',
        masonry: {
            columnWidth: 100
        }
    });
    $(".itemBig").hide();

    $container.on('click', '.item', function () {
        // change size of item by toggling gigante class
        $(".item").removeClass('gigante');
        $(this).toggleClass('gigante');
        $container.isotope('layout');
        $(".itemBig").hide();
        $(this).find(".itemBig").show();
    });

    $(document).click(function (e) {
        if ($(e.target).closest(".gigante").length > 0) {
            return false;
        } else {
            $(".item").removeClass("gigante");
            $container.isotope('layout');
            $(".itemBig").hide();
        }
    });

    var filterFns = {
        // show if number is greater than 50
        numberGreaterThan50: function () {
            var number = $(this).find('.number').text();
            return parseInt(number, 10) > 50;
        },
        // show if name ends with -ium
        ium: function () {
            var name = $(this).find('.name').text();
            return name.match(/ium$/);
        }
    };
    // bind filter button click
    $('#filters').on('click', 'button', function () {
        var filterValue = $(this).attr('data-filter');
        // use filterFn if matches value
        filterValue = filterFns[filterValue] || filterValue;
        $container.isotope({
            filter: filterValue
        });
    });
    // change is-checked class on buttons
    $('.button-group').each(function (i, buttonGroup) {
        var $buttonGroup = $(buttonGroup);
        $buttonGroup.on('click', 'button', function () {
           ...