Full screen feature with link in footer

Inspired by https://yourkarma.com/

by laustdeleuran

HTML

<nav class="nav">
    Navigation
</nav>
<header class="feature">
    <div class="feature-content">
        <div class="feature-contentcenter">
            <h1>Nicholas Cage</h1>
            <p>He may have my soul, but he doesn't have my spirit.</p>        
        </div>
    </div>
    <a href="#section" class="feature-contentlink">
        <strong>Learn more</strong>
    </a>
</header>
<section class="content">
    <h1>Main content</h1>
    <p>Here's what's happenening.</p>
</section>
<section class="content">
    <h1>Secondary content</h1>
    <p>Here's what's not happenening.</p>
    <p>At all.</p>
</section>

CSS

/* House cleaning */
html, body, nav, header, section, h1, p {
    display:block;
    margin:0;
    padding:0;
}
/* Base styles */
html {
    font-family:Georgia, Times, Times New Roman, sans-serif;
    font-size:16px;
    line-height:22px;
    color:#333;
}
h1 {
    font-size:36px;
    line-height:44px;
    margin-top:22px;
}
p {
    margin-bottom:22px;
}
a {
    color:cadetblue;
}
/* Nav */
.nav {
    padding:1em 2em;
    
    position:fixed;
    top:0;
    right:0;
    left:0;
    z-index:3;
    
    background:#fff;
    
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.15);
}
/* Feature */
.feature {
    height:400px;
    
    position:relative;
    
    color:#fff;
    text-shadow:0 1px 1px rgba(0, 0, 0, 0.5);
    
    background:#333 url(http://www.placecage.com/1280/800/) center center no-repeat;
    background-size: cover;
}
.feature-content {
    height:300px;
    margin-top:-150px;
    
    position:absolute;
    top:50%;
    left:2em;
    z-index:2;
    
    opacity:0;
    
   -ms-animation:fadeInDown 1500ms 1000ms 1 forwards cubic-bezier(0.165, 0.840, 0.440, 1.000);
   -moz-animation:fadeInDown 1500ms 1000ms 1 forwards cubic-bezier(0.165, 0.840, 0.440, 1.000);
   -webkit-animation:fadeInDown 1500ms 1000ms 1 forwards cubic-bezier(0.165, 0.840, 0.440, 1.000);
   animation:fadeInDown 1500ms 1000ms 1 forwards cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.feature-contentcenter {
    display:table-cell;
    height:300px;
    
    vertical-align:middle;
}
.feature-contentlink {
    display:block;
    height:10px;
    visibility:hidden;
    
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    
    text-align:center;
    
    background:#fff;
    
   -ms-animation:slideUp 1500ms 3000ms 1 forwards cubic-bezier(0.165, 0.840, 0.440, 1.000);
   -moz-animation:slideUp 1500ms 3000ms 1 forwards cubic-bezier(0.165, 0.840, 0.440, 1.000);
   -webkit-animation:slideUp 1500ms 3000ms 1 forwards cubic-bezier(0.165, 0.840, 0.440, 1.000);
   animation:slideUp 1500ms...

JavaScript

/*** 
* Debounced event listener - http://jsfiddle.net/tD6FM/
***/
(function($,smartbind){
  var debounce = function (func, threshold, execAsap) {
    var timeout;

    return function debounced () {
      var obj = this, args = arguments;
      function delayed () {
        func.apply(obj, args);
      };

      if (timeout) {
        clearTimeout(timeout);
      } else if (execAsap) {
        func.apply(obj, args);
        return;
      }
      timeout = setTimeout(delayed, threshold || 200);
    };
  }
  // Smartbind
  jQuery.fn[smartbind] = function(event,func,threshold,execAsap){ return func ? this.bind(event, debounce(func,threshold,execAsap)) : this.trigger(event); };

})(jQuery,'smartbind');

/**
* Fiddle specific code
**/
$(document).ready(function () {
    // Resize
    var setHeight, lastSeenHeight, $win, $target;    
    $win = $(window);
    $target = $('.feature');
    setHeight = function () {
        var newHeight = $win.height();
        
        if (lastSeenHeight !== newHeight) {
            lastSeenHeight = newHeight;
            $target.css('height', newHeight);
        }
    };
    $win.smartbind('resize', setHeight);
    setHeight();
    
    // Click
    var $doc;
    $doc = $('html,body');
    $('.feature-contentlink').on('click', function (event) {
        event.preventDefault(); 
        
        $doc.stop().animate({ scrollTop: $('.content').first().offset().top }, 1000);
    });
});