Landing Page Concept

Responsive, video/image background, multiple slide-up layers, scroll & touch ready.

HTML

<script src="http://imperativeideas.com/js/jquery.mousewheel.js"></script>
<script src="http://imperativeideas.com/js/jquery.backstretch.min.js"></script>
<script src="http://imperativeideas.com/js/jquery.touchSwipe.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Supermercado+One|Alegreya+SC'
rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
    <script src="dist/html5shiv.js"></script>
<![endif]-->
<div id="wrap">
    <header class="topbar">
        <div class="logo"></div>
         <h2 class="logo"><a href="http://imperativeideas.com">imperative ideas</a></h2>

        <nav>
            <ul>
            <li><a href="#">About Us</a>

            </li>
            <li><a href="#">Capabilities</a>

            </li>
            <li><a href="#">Work</a>

            </li>
            <li><a href="#">Blog</a>

            </li>
            <li><a href="#">Contact</a>

            </li>
            </ul>
        </nav>
    </header>
    <div id="welcome">
        <h3>Bringing Ideas to Life</h3>
        <!--[if IE]>
        <div class="iedown"></div>
        <![endif]-->
    </div>
    <section id="main-content" class="hideit">
        <div class="pad">
            <div class="closeit">X</div>
            <div class="swipetest">Swipe Here To Test</div>
            <p>Content Area</p>
        </div>
    </section>
    <!-- close #main-content -->
</div>
<script type="text/javascript">
    $.backstretch("http://interfacelift.com/wallpaper/D47cd523/03188_wasitalladream_1280x720.jpg", {
        speed: 150
    });
</script>

CSS

html, body {
    height: 100%;
    margin: 0 auto;
}
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
/* Typography Elements */
 b, strong {
    font-weight: 600;
}
em, i {
    font-style: italic;
}
#wrap {
    zoom: 1;
    position: relative;
    min-height: 100%;
    overflow: hidden;
}
header.topbar {
    width: 100%;
    background: rgb(25, 25, 25);
    color: rgb(230, 230, 230);
    cursor: default;
    overflow: auto;
}
header.topbar a {
    color: rgb(234, 234, 234);
    text-decoration:none;
    cursor:pointer;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
header.topbar a:hover {
    color: rgb(240, 240, 184);
    text-shadow: 0px 0px 6px #eaeaea, 0px 0px 3px #eaeaea;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
div.logo {
    margin: 12px 0px 0px 12px;
    width: 26px;
    height: 27px;
    background: url(http://imperativeideas.com/wp-content/themes/Imperative/images/png/idea-spiral-26x27.png);
    float:left;
}
header h2.logo {
    float: left;
    padding: 2px 0px 0px 12px;
    color: rgb(230, 230, 230);
    font-family:'Supermercado One', cursive;
    font-size: 22px;
    line-height: 50px;
}
nav {
    float: left;
    margin-left: 35px;
}
nav li {
    cursor: pointer;
    display: inline-block;
    list-style: none;
    line-height: 50px;
    padding-top: 3px;
    padding-right: 10px;
    font-family:'Alegreya SC', serif;
}
button.trigger {
    margin-top: 13px;
}
#welcome {
    position: relative;
    opacity: 0;
    top: 0px;
    text-align: center;
}
#welcome h3 {
    font-family:'Alegreya SC', serif;
    font-size: 42px;
    color: rgb(230, 230, 230);
}

.iedown {
    height: 25px;
    width: 25px;
    margin: 0 auto;
    background: url(http://imperativeideas.com/clients/splashpage/clickdown.png);
}
#main-content {
    position: absolute;
   ...

JavaScript

/**
/* Define Reusable Functions
**/

// Swipe Detection Test

$(function () {
    $(".swipetest").swipe({
        swipe: function (event, direction, e) {
            if (direction == 'down') {
                $(this).text("You swiped down");
            } else if (direction == 'up') {
                $(this).text("You swiped up");
            }
        }
    });
});

// Fix IE9 Console Log Errors
if (typeof (console) === 'undefined') {
    var console = {}
    console.log = console.error = console.info = console.debug = console.warn = console.trace = console.dir = console.dirxml = console.group = console.groupEnd = console.time = console.timeEnd = console.assert = console.profile = function () {};
}

// We need a resize timer function (http://bit.ly/fDW5rg)
var waitForFinalEvent = (function () {
    var timers = {};
    return function (callback, ms, uniqueId) {
        if (!uniqueId) {
            uniqueId = "Don't call this twice without a uniqueId";
        }
        if (timers[uniqueId]) {
            clearTimeout(timers[uniqueId]);
        }
        timers[uniqueId] = setTimeout(callback, ms);
    };
})();

function setsizes() {
    // Get relevant sizes from the DOM and assign them to variables
    realheight = $(window).height() - $('header.topbar').height();
    midpoint = (realheight / 2.6); // division by 2.1 actually places the text slightly above midpoint

    // Assign responsive resolution for conditional tests
    if ($(document).width() < 550) {
        $('body').data('resolution', 'mobile');
        $('#wrap').removeClass('cursor');
    } else {
        $('body').data('resolution', 'standard');
        $('#wrap').addClass('cursor');
    }
    console.log('Resolution is set to ' + (jQuery.data(document.body, 'resolution'))); // Is this thing running? (Delete this line in production)
}

// Click, scroll, and touch events setup
function mainevents() {
    // Setup click, scroll, and touch events for standard vs mobile resolution
    if...