Animated angled navbar

by jorgeluis

HTML

<header class="masthead">
  <div id="logo-canvas"></div>
  <a class="brand" href="#">Home</a>
</header>

CSS

* {
  box-sizing: border-box;
}
body {
  padding: 0;
  background: #123;
  height: 1000px; /* just to test scrolling */
}

.masthead {
  position: fixed;
  width: 110%;
  padding: 1em;
  height: 60px;
  background: rgba(255, 255, 255, 0.1);
}

#logo-canvas {
  position: absolute;
  width: 100%;
  height: 120px;
  left: -5%;
  bottom: 0;
  background: #fff;
  transform-origin: 15% 100%;
  transform: rotate(-10deg);
  
  transition: background-color 0.5s ease-out;
}
.fixed #logo-canvas {
  background-color: rgba(230, 255, 255, 0.9);
}

.brand {
  position: relative;
}

JavaScript

var hdr = document.querySelector('.masthead');
var canv = document.querySelector('#logo-canvas');
var range = 60;

window.addEventListener('scroll', function() {

	if( window.scrollY <= range ) {
	  hdr.classList.remove('fixed');
		canv.style.webkitTransform = 'rotate(' + (window.scrollY/range *10 -10) + 'deg)';
  } else {
  	hdr.classList.add('fixed');
  	canv.style.webkitTransform = 'rotate(0)';
  }

});