prototype for Turbulence homepage by mushon

script.js

$( 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;
          }
        }
      });
    });

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  body {
    margin: 0;
  }
  .container {
    width: 100%;
  }
  .container > header,
  .container > section {
    left: 50%;
    margin-left: -512px;
    width: 1024px;
  }
  .container > header,
  .container > 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;
  }
  #l2 h1 {
    color: red;
  }
  #l3 {
    position: absolute;
    z-index: 20;
    margin-top: 660px;
  }
  #l3 .gap {
    height: 450px;
  }
  #l3 .grid {
    width: 100%;
    height: 2000px;
    background-position: 0 -1122px;
    background-color: #fff;
  }
</style>

<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>

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
  $( 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;
        }
      }
    });
  });
</script>

ogLLPO.markdown

ogLLPO
------


A [Pen](http://codepen.io/anon/pen/ogLLPO) by [Captain Anonymous](http://codepen.io/anon) on [CodePen](http://codepen.io/).

[License](http://codepen.io/anon/pen/ogLLPO/license).

style.css

body {
  margin: 0;
}
.container {
  width: 100%;
}
.container > header,
.container > section {
  left: 50%;
  margin-left: -512px;
  width: 1024px;
}
.container > header,
.container > 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;
}
#l2 h1 {
  color: red;
}
#l3 {
  position: absolute;
  z-index: 20;
  margin-top: 660px;
}
#l3 .gap {
  height: 450px;
}
#l3 .grid {
  width: 100%;
  height: 2000px;
  background-position: 0 -1122px;
  background-color: #fff;
}

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;
  }
}