Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet">

<header>
    <nav id='main-nav'>
      <ul>
        <li class='nav-left'>
          <a href="#Press">Press</a>
        </li>
        <li class="logo-container">
          <h1>
            <img src="https://cdn.davecampion.com/16517/stagseperatorblack.png">
            
          </h1>
          <h2><a href="#Menu"> Menu </a></h2>
          <div class="circle"></div>
        </li>
        <li class='nav-right'>
          <a href="#Merch">Merch</a>
        </li>
      </ul>
    </nav>
</header>
<div id="ex1" class="slide slide1">
 
</div>
<div id="ex2" class="slide slide2">
</div>
<div id="ex3" class="slide slide3">
</div>
<div id="ex4" class="slide slide4">
</div>
<footer>
  <ul>
    <li><a href="#ex1"> ex 1 </a></li>
    <li><a href='#ex2'> ex 2 </a></li>
    <li><a href='#ex3'> ex 3 </a></li>
    <li><a href='#ex4'> ex 4  </a></li>
  </ul>
</footer>
              
            
!

CSS

              
                * {
  box-sizing: border-box;
}
body{
  line-height: 1.4;
  color: #222;
  font-family: "Open Sans Condensed", sans-serif;
  font-weight: bold;
  font-size: 32px;
  position: relative;
  z-index: 2;
}
footer{
  position: fixed;
  bottom: 0;
  background: transparent;
  text-align: center;
  width: 100%;
  box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.5);
}
footer li{
  display: inline-block;
  margin: 0 5%;
}
footer li a{
  text-decoration: none;
  color: #333;
  text-shadow: 0px 0px 1px rgba(235,235,235,0.7);
  font-variant: small-caps;
}
/*
Slides.... big and colorful
*/

$slide1-bg: #67809F;
$slide2-bg: #E5E1EE;
$slide3-bg: #90F3FF;
$slide4-bg: #68EDC6;
  
.slide{
  height: 200vh;
  margin:0;
  padding: 13em 0 0 0;
  position: relative;
}

.slide1{
  background: $slide1-bg;
}

.slide2{
  background: $slide2-bg;
}

.slide3{
  background: $slide3-bg;
}

.slide4{
  background: $slide4-bg;
}

/*
Navigation Stylezzz
*/
header{
  position: relative;
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  top: 0;
  width: 100%;
  overflow: hidden;
}
header nav{
  text-align: center;
  //background: rgba(0,0,0,0.1);
  transition: all 250ms ease-in;
}

header ul{
  display: inline-block;
  margin: 25px 0;
}
header li{
  position:relative;
  vertical-align: middle;
  display: inline-block;
  line-height: 1.4;
  margin: 0 55px;
  pointer-events: initial;
  transition: all 150ms ease-out;
  color: #333;
}
header li a{
  text-decoration: none;
  font-size: 22px;
  color:#112;
  text-shadow: 0px 0px 1px rgba(235,235,235,0.7);
  z-index: 999;
  transition: all 250ms ease-out;
}
header li.logo-container{
  width:260px;
  z-index: -1;
}
header li.logo-container img{
  position:relative;
  max-width: 260px;
  z-index: 10;
  padding: 0 25px;
  transition: all 250ms ease-out;
}
nav li.logo-container h1{
  transition: all 250ms ease-out;
  z-index: 9999;
}
nav h2{
  position: relative;
  color:black;
  z-index:9999999;
}
.slide h1{
  font-size: 72px;
  text-align: center;
  transform: rotate(-1.5deg);
  letter-spacing: 2px;
}
.circle{
  width:100%;
  height:260px;
  border-radius: 50%;
  background: #FDE3A7;
  position:absolute;
  top:-130px;
  transition: all 1s ease;
  transform: translate3d(0px, 0px, 0px);
  z-index: -1;
}

/*
Effect one, part one:

Grow outward 
*/

nav.effect1-a li.logo-container{
  transform: scale(1.05);
}
nav.effect1-a{
  transform: scale(1.05);
}
nav.effect1-a li.nav-left{
  transform: rotate(7deg);
}
nav.effect1-a li.nav-right{
  transform: rotate(-7deg);
}
/*
Effect 1 part b

shrink upwards
*/

nav.effect1-b{
  transform: scale(0.9);
}
nav.effect1-b ul{
  margin: 15px 0;
}
nav.effect1-b li.logo-container h1{
  transform: scale(0);
  height:0;
}
nav.effect1-b li .circle{
  transform: translateY(-50px) scaleX(15);
  width:260px;
}
nav.effect1-b li.logo-container{
  transform: scale(1);
}
nav.effect1-b li.nav-left{
  transform: rotate(0deg);
}
nav.effect1-b li.nav-right{
  transform: rotate(0deg);
}

nav.effect2-default{
  transform: scale(1);
}

nav.effect2-default li.logo-container h1{
  transform: scale(1);
  height: auto;
}

nav.effect2-default li .circle{
  transform: translateY(0) scaleX(1);
}

nav.effect2-a{
  transform: scale(0.77) translateY(-25px);
}

nav.effect2-b{
  transform: scale(0.77) translateY(0px);
}

nav.effect2-b li.logo-container h1{
  transform: scale(0);
  height: 0;
}

nav.effect2-b li .circle{
  transform: scaleX(10);
  border-radius: 0;
}

nav.effect3-default{
  transform: scale(1);
  height: 68px
}
nav.effect3-default ul{
  margin: 2px 0;
}

nav.effect3-default li.logo-container h1{
  transform: scale(1);
  height: auto;
}

nav.effect3-default li .circle{
  transform: translateY(-100%);
}

nav.effect3-default h2{
  display: none;
}

nav.effect3-a{
  transform: scale(0.85);
}
nav.effect3-a li .circle{
  transform: translateY(0) scaleX(10);
  width:100%;
}
nav.effect3-b {
  transform: scale(0.7);
}

nav.effect3-b li a{
  opacity: 0;
}

nav.effect4-default{
  transform: scale(1);
  height: 200px;
}
nav.effect4-default li h2{
  display: block;
}
nav.effect4-default ul{
  margin-top: 25px;
}

nav.effect4-default li a{
  opacity: 1;
}

nav.effect4-default li .circle{
  transform: none;
  border-radius: 100%;
  transition: all 1s ease;
}

nav.effect4-a li.logo-container{
  transform: translateY(-25px)
}

nav.effect4-a img{
  height:50px;
  margin-top: 15px
}

nav.effect4-b img{
  
}

nav.effect4-b li.logo-container{
  transform: translateY(-38px)
}

nav.effect4-b li .circle{
  transform: translateY(-10px) scaleX(10);
  border-radius: 0;
}

nav.effect4-b ul{
  margin-top:5px;
  transform: translateY(-50px)
}
              
            
!

JS

              
                var
    nav    = document.querySelector('nav'),
    shrunk = false,
    slideHeight = document.querySelector('.slide1').getBoundingClientRect().height,
    
    
    slide1 = document.querySelector('.slide1').getBoundingClientRect().top,
    slide2 = document.querySelector('.slide2').getBoundingClientRect().top,
    slide3 = document.querySelector('.slide3').getBoundingClientRect().top,
    slide4 = document.querySelector('.slide4').getBoundingClientRect().top,
    
    
    effectRatio = 2/7;

function slideRatio(h){
  return Math.floor(h + 700);
}

var leaveTop = function(){
    
      if(document.body.scrollTop > 0){
        nav.classList.add('effect1-a');
        window.removeEventListener('scroll',leaveTop);
        window.addEventListener('scroll', returnTop);
        //window.addEventListener('hashchange', returnTop);
      }
  
    },
    lastDelta = 0,
    up  = false,
    returnTop = _.throttle(function(){
      
      var scrollPoint = document.body.scrollTop;
     
      if(scrollPoint > lastDelta){
        up = false
      }else{
        up=true
      }
      
      lastDelta = scrollPoint;
      
      if( scrollPoint <= slide1 ){
          nav.classList.remove('effect1-a');
          window.removeEventListener('scroll',returnTop);
          window.addEventListener('scroll', leaveTop);
      }else if( scrollPoint > slideRatio(slide1) && !shrunk && !nav.classList.contains('effect1-b') ){
        nav.classList.add('effect1-b');
        shrunk = true;
      }else if( scrollPoint < slideRatio(slide1) && shrunk ){
        nav.classList.remove('effect1-b');
        shrunk = false;
      }else if( scrollPoint >= slide2 && !nav.classList.contains('effect2-default') ){
        nav.classList.add('effect2-default');
        shrunk = false;
      }else if( scrollPoint < slide2 && nav.classList.contains('effect2-default') ){
        nav.classList.remove('effect2-default');
        shrunk = true;
      }else if( scrollPoint > slide2+150 && !nav.classList.contains('effect2-a')){
        nav.classList.add('effect2-a');
      }else if( scrollPoint < slide2+150 &&  nav.classList.contains('effect2-a')){
        nav.classList.remove('effect2-a');
      }else if(scrollPoint > slideRatio(slide2) && !nav.classList.contains('effect2-b')){
        nav.classList.add('effect2-b');
      }else if(scrollPoint < slideRatio(slide2) && nav.classList.contains('effect2-b')){
        nav.classList.remove('effect2-b');
      }else if(scrollPoint >= slide3 && !nav.classList.contains('effect3-default')){
        nav.classList.add('effect3-default');
      }else if( scrollPoint < slide3 && nav.classList.contains('effect3-default')){
        nav.classList.remove('effect3-default');
      }else if( scrollPoint > slide3 + 150 && !nav.classList.contains('effect3-a') ){
        nav.classList.add('effect3-a');
      }else if( scrollPoint < slide3 + 150 && nav.classList.contains('effect3-a') ){
        nav.classList.remove('effect3-a');
      }else if( scrollPoint > slideRatio(slide3) && !nav.classList.contains('effect3-b') && !up ){
        nav.classList.add('effect3-b');
      }else if( (scrollPoint < slideRatio(slide3) && nav.classList.contains('effect3-b')) || up && !nav.classList.contains('effect4-default') ){
        nav.classList.remove('effect3-b');
      }else if(scrollPoint >= slide4 && !nav.classList.contains('effect4-default')){
        nav.classList.add('effect4-default');
      }else if( scrollPoint < slide4 && nav.classList.contains('effect4-default')){
        nav.classList.remove('effect4-default');
      }else if( scrollPoint > slide4 + 150 && !nav.classList.contains('effect4-a') ){
        nav.classList.add('effect4-a');
      }else if( scrollPoint < slide4 + 150 && nav.classList.contains('effect4-a') ){
        nav.classList.remove('effect4-a');
      }else if( scrollPoint > slideRatio(slide4) && !nav.classList.contains('effect4-b') ){
        nav.classList.add('effect4-b');
      }else if( scrollPoint < slideRatio(slide4) && nav.classList.contains('effect4-b') ){
        nav.classList.remove('effect4-b');
      }
      
    },50);


window.addEventListener('scroll', leaveTop);
/*

dirty smooth scroll
*/

// Select all links with hashes
$('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // On-page links
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname
    ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $(nav).hide();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
          // Callback after animation
          // Must change focus!
          $(nav).show();
          var $target = $(target);
          $target.focus();
          if ($target.is(":focus")) { // Checking if the target was focused
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
            $target.focus(); // Set focus again
          };
        });
      }
    }
  });
              
            
!
999px

Console