Fold-away hero

fold-away-hero.markdown

Fold-away hero

Let the hero-section fold away as you scroll down the site, until only the nav-bar is left

A Pen by Jeppe Stougaard on CodePen.

License.

index.html

<header id="home">
  <div class="hero">
    <div class="overlay"></div>
    <h1>Fold-away</h1>
  </div>
</header>
<div class="sticky-wrapper">
<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#item1">Item1</a></li>
    <li><a href="#item2">Item2</a></li>
    <li><a href="#">Item3</a></li>
    <li><a href="#">Item4</a></li>
    <li><a href="#">Item5</a></li>
  </ul>
</nav>
</div>
<section id="item1">
  <h1>Some section</h1>
</section>
<section id="item2">
  <h1>Other section</h1>
</section>

script.js

$(window).scroll(function() {
  var heroHeight = $('header').height();
  var yPosition = $(document).scrollTop();
  
    
  if (yPosition <= heroHeight) {
    var effectFactor = yPosition / heroHeight;
    var rotation = effectFactor * (Math.PI / 2 - Math.asin( (heroHeight - yPosition) / heroHeight ));
    $('.hero').css({
      '-webkit-transform': 'rotateX('+rotation+'rad)',
      'transform': 'rotateX('+rotation+'rad)',
    })
    .find('.overlay').css('opacity', effectFactor);
  }
  
  
  /**
   * Sticky nav-bar
   */
  if (yPosition <= heroHeight) {
    $('nav').removeClass('fixed');
  } else {
    $('nav').addClass('fixed');
  }
  
});

scripts

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

style.css

@import url(https://fonts.googleapis.com/css?family=Raleway:700);

html, body {
  height:100%;
  padding:0;
  margin:0;
  font-family: Raleway,sans-serif;
  color:#FFF;
}
h1 {
  margin:0;
  display: table-cell;
  vertical-align: middle;
  text-align:center;
  letter-spacing: -4px;
  font-size:100px;
  font-weight:700;
  text-transform:uppercase;
  text-shadow:1px 1px 1px rgba(0,0,0,0.5);
}
h1::before, h1::after {
    width: 220px;
    height: 1px;
    border-top:4px double #FFF;
    content:"";
    display:block;
    margin:20px auto;
}
header {
  height: calc(100% - 65px);
  background:#333;
  
  -webkit-perspective: 1500px;
  perspective: 1500px;
  perspective-origin: center bottom;
}
.hero {
  position:relative;
  background:#333 url(http://jstougaard.com/assets/images/bg-hero2.jpg) no-repeat center center;
  background-size:cover;
  height: 100%;
  width:100%;
  
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  
  display:table;
}
.hero .overlay {
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  opacity:0;
  background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
}

nav {
  background:#171717;
  height:65px;
}
nav.fixed {
  position:fixed;
  top:0;
  left:0;
  right:0;
}
.sticky-wrapper {
  height:65px;
}
nav ul {
  list-style:none;
  padding:0;
  margin:0;
  text-align:center;
}
nav ul li {
  display:inline-block;
}
nav ul a {
  height:65px;
  line-height:65px;
  padding:10px 15px;
  color:#A1A1A1;
  
  
  font-size: 14px;
  letter-spacing: 2px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration:none;
}

section {
  height: 100%;
  width:100%;
  display:table;
}
section#item1 {
  background:#006ca3;
}
section#item2 {
  background:#00a69a;
}