ogLLPO

index.html

<div class="container">
  <header id="l1">
  </header>
  <a href="#l3" id="scroll-down"></a>
  <header id="l2">
  </header>
  <section id="l3">
    <div class="gap"></div>
    <div class="grid"></div>
  </section>
</div>

ogLLPO.markdown

ogLLPO

A Pen by Captain Anonymous on CodePen.

License.

script.traceur

$( window ).scroll(function() {
  var scrollPos = $(window).scrollTop();
  $( "header#l1" ).css( "height", 650-scrollPos );
  if (scrollPos >= 650) {
    $( "header#l2" ).css( "position", "absolute" ).css("top", "650px");
  } else {
    $( "header#l2" ).css( "position", "fixed" ).css("top", "0");
  }
  if (scrollPos >= 450) {
        $( "#scroll-down" ).css( "z-index", "0" );
  } else {
        $( "#scroll-down" ).css( "z-index", "25" );
  }
});



    $(document).ready(function(){
      $('a[href*=#]').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
        && location.hostname == this.hostname) {
          var $target = $(this.hash);
          $target = $target.length && $target
          || $('[name=' + this.hash.slice(1) +']');
          if ($target.length) {
            var targetOffset = $target.offset().top;
            $('html,body')
            .animate({scrollTop: targetOffset}, 1000);
           return false;
          }
        }
      });
    });

style.less

body {
  margin: 0;
}
  
.container {
  
  > header, > section {
  left: 50%;
  margin-left: -512px;
  width: 100%;
  }
  
  > header, > section .grid {
  background: url(https://cdn.invisionapp.com/cdn/10c26a71aceec73b766c717532c66ca3/screens/53588992/2/mhdsKGgGUQA4I4AArdfUXGlGOqRg9m8XXu6cbNvbefdZJLinq4FX1ufqMr2j7RW4B3GfolJzH4L9PSg9qiwdtg4/Desktop.png) 0 0 no-repeat;
  }
}

#scroll-down {
  display: block;
  width: 45px;
  height: 25px;
  z-index: 25;
  background: url(https://projects.invisionapp.com/assets/2403969/1097714/4AEA90F27E77C1C1F2C737BBF0DE44C8B5E7FB7AA5740011B3AD381F70C6DAF8/preview?w=758);
  top: 612px;
  left: 50%;
  margin-left: -22.5px;
  position: fixed;
}

header {
  z-index: 10;
  top: 0;
  overflow: hidden;
  position: fixed;
  color: white;
  height: 650px;
  z-index: 100;
}

#l2 {
  background-position: 0 -656px ;
  z-index: 0;
  height: 450px;
  h1{
    color: red; 
  } 
}

#l3{
  position: relative;
  z-index: 20;
  margin-top: 660px;
  .gap {
    height: 450px;
  }
  .grid {
    width: 100%;
    height: 2000px;
    background-position: 0 -1122px ;
    background-color: #fff;
  }
}