Temporary overlay, useful as home page intro.

index.html

<div id="overlay">
  <div class="overlay-inner">
    An inspiration bit of text.
  </div>
</div>

<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor mollis dui, a adipiscing turpis suscipit at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque porttitor imperdiet porttitor. Phasellus et odio tincidunt, pharetra turpis a, tincidunt magna. Etiam euismod sodales nisl sed tempor. Nullam vestibulum et nibh eget viverra. Phasellus a nunc nec lectus lacinia pulvinar eget vitae augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam gravida sem nec sapien sodales vestibulum. Phasellus vel ultricies felis. Sed augue mi, tempus ut tristique vel, vehicula vitae justo.</p>

  <p>Ut posuere magna et odio vulputate cursus. Maecenas ultricies ante turpis, eget porta sapien interdum id. Pellentesque commodo venenatis nulla at porttitor. Duis at ligula ut diam fringilla facilisis. Fusce dapibus neque felis, ut imperdiet felis lacinia in. Duis ullamcorper turpis ac elit fringilla posuere. Praesent pharetra nisl volutpat ipsum imperdiet, ac volutpat nibh feugiat. Duis dignissim, massa quis dapibus hendrerit, nisi ligula pretium mauris, eu auctor orci urna et augue. Aliquam viverra ligula nec sem ullamcorper, at venenatis augue fermentum. Ut porttitor dignissim erat, ac tincidunt leo fringilla eget. Nullam vestibulum urna at diam ultrices, nec porta justo laoreet. Vestibulum vitae sodales ligula, porttitor sollicitudin nulla. Etiam bibendum luctus urna, sit amet semper elit feugiat sed.</p>

  <p>Integer rutrum ultrices est eu sollicitudin. Sed et lacinia enim. Morbi a libero eu arcu facilisis iaculis ut sit amet odio. Donec convallis lobortis interdum. Vivamus molestie odio non volutpat lobortis. Donec at ornare diam, id pellentesque nibh. Donec gravida pretium ligula, eu luctus ligula vestibulum quis. Donec placerat venenatis nulla mollis varius. Etiam imperdiet felis tempor, volutpat lacus ac, tristique tellus. Mauris placerat volutpat nunc, in placerat risus ornare et. Curabitur lacinia urna id nibh aliquam, tincidunt lacinia urna pulvinar. Suspendisse erat lectus, suscipit a scelerisque sed, consectetur eget nulla. Nulla laoreet risus non justo dignissim varius. Proin interdum at dolor vel mattis. Nunc elementum nisl urna, id cursus felis iaculis a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor mollis dui, a adipiscing turpis suscipit at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque porttitor imperdiet porttitor. Phasellus et odio tincidunt, pharetra turpis a, tincidunt magna. Etiam euismod sodales nisl sed tempor. Nullam vestibulum et nibh eget viverra. Phasellus a nunc nec lectus lacinia pulvinar eget vitae augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam gravida sem nec sapien sodales vestibulum. Phasellus vel ultricies felis. Sed augue mi, tempus ut tristique vel, vehicula vitae justo.</p>

  <p>Ut posuere magna et odio vulputate cursus. Maecenas ultricies ante turpis, eget porta sapien interdum id. Pellentesque commodo venenatis nulla at porttitor. Duis at ligula ut diam fringilla facilisis. Fusce dapibus neque felis, ut imperdiet felis lacinia in. Duis ullamcorper turpis ac elit fringilla posuere. Praesent pharetra nisl volutpat ipsum imperdiet, ac volutpat nibh feugiat. Duis dignissim, massa quis dapibus hendrerit, nisi ligula pretium mauris, eu auctor orci urna et augue. Aliquam viverra ligula nec sem ullamcorper, at venenatis augue fermentum. Ut porttitor dignissim erat, ac tincidunt leo fringilla eget. Nullam vestibulum urna at diam ultrices, nec porta justo laoreet. Vestibulum vitae sodales ligula, porttitor sollicitudin nulla. Etiam bibendum luctus urna, sit amet semper elit feugiat sed.</p>

  <p>Integer rutrum ultrices est eu sollicitudin. Sed et lacinia enim. Morbi a libero eu arcu facilisis iaculis ut sit amet odio. Donec convallis lobortis interdum. Vivamus molestie odio non volutpat lobortis. Donec at ornare dia, id pellentesque nibh. Donec gravida pretium ligula, eu luctus ligula vestibulum quis. Donec placerat venenatis nulla mollis varius. Etiam imperdiet felis tempor, volutpat lacus ac, tristique tellus. Mauris placerat volutpat nunc, in placerat risus ornare et. Curabitur lacinia urna id nibh aliquam, tincidunt lacinia urna pulvinar. Suspendisse erat lectus, suscipit a scelerisque sed, consectetur eget nulla. Nulla laoreet risus non justo dignissim varius. Proin interdum at dolor vel mattis. Nunc elementum nisl urna, id cursus felis iaculis a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

script.js

$(document).ready(function($) {

  var keys = [37, 38, 39, 40];
  function preventDefault(e) {
    e = e || window.event;
    if (e.preventDefault)
      e.preventDefault();
    e.returnValue = false;  
  }
  function keydown(e) {
    for (var i = keys.length; i--;) {
      if (e.keyCode === keys[i]) {
        preventDefault(e);
        return;
      }
    }
  }
  function wheel(e) {
    preventDefault(e);
  }
  function disable_scroll() {
    if (window.addEventListener) {
      window.addEventListener('DOMMouseScroll', wheel, false);
    }
    window.onmousewheel = document.onmousewheel = wheel;
    document.onkeydown = keydown;
  }
  function enable_scroll() {
    if (window.removeEventListener) {
      window.removeEventListener('DOMMouseScroll', wheel, false);
    }
    window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
  }

  disable_scroll();
  $("#overlay").delay(3000).animate({opacity: "0"}, 2000, function() {
    $(this).remove();
    enable_scroll();
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

html{
  margin:0;
  padding:0;
  overflow-y: scroll;
}
.no-scroll {
  height: 100%;
  overflow: hidden;
}
body{
  font-size:20px;
  font-family:'Proxima Nova',sans-serif;
  -webkit-font-smoothing:antialiased;
  font-weight:300;
  width: 100%;
  height: 100%;
  line-height:1.5;
  margin:0;
  padding:0;
}
.content {
  width: 800px;
  margin: 0 auto;
  font-size: .8em;
  padding: 6em 0;
}
p {
  margin: 0 0 1em 0
}
#overlay {
  position: absolute;
  color:rgba(249,252,255,1); /*White*/
  background:rgba(0,3,6,0.98); /*Black*/
  width: 100%;
  height: 100%;
  z-index:999;
  display:table;
  text-align: center;
  font-size: 3em;
}
.overlay-inner {
  display:table-cell;
  vertical-align: middle;
}

temporary-overlay-useful-as-home-page-intro.markdown

Temporary overlay, useful as home page intro.

A Pen by James Truhlar on CodePen.

License.