slowbarheadercomps

In this example below you will see how to do a slowbarheadercomps with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by gasolinewaltz, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright gasolinewaltz ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>slowbarheadercomps</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <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>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/gasolinewaltz/slowbarheadercomps-jmpzPq */
* {
  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
*/
.slide {
  height: 200vh;
  margin: 0;
  padding: 13em 0 0 0;
  position: relative;
}

.slide1 {
  background: #67809F;
}

.slide2 {
  background: #E5E1EE;
}

.slide3 {
  background: #90F3FF;
}

.slide4 {
  background: #68EDC6;
}

/*
Navigation Stylezzz
*/
header {
  position: relative;
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  top: 0;
  width: 100%;
  overflow: hidden;
}

header nav {
  text-align: center;
  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;
  -webkit-transform: rotate(-1.5deg);
          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;
  -webkit-transform: translate3d(0px, 0px, 0px);
          transform: translate3d(0px, 0px, 0px);
  z-index: -1;
}

/*
Effect one, part one:

Grow outward 
*/
nav.effect1-a li.logo-container {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

nav.effect1-a {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

nav.effect1-a li.nav-left {
  -webkit-transform: rotate(7deg);
          transform: rotate(7deg);
}

nav.effect1-a li.nav-right {
  -webkit-transform: rotate(-7deg);
          transform: rotate(-7deg);
}

/*
Effect 1 part b

shrink upwards
*/
nav.effect1-b {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}

nav.effect1-b ul {
  margin: 15px 0;
}

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

nav.effect1-b li .circle {
  -webkit-transform: translateY(-50px) scaleX(15);
          transform: translateY(-50px) scaleX(15);
  width: 260px;
}

nav.effect1-b li.logo-container {
  -webkit-transform: scale(1);
          transform: scale(1);
}

nav.effect1-b li.nav-left {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

nav.effect1-b li.nav-right {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

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

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

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

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

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

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

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

nav.effect3-default {
  -webkit-transform: scale(1);
          transform: scale(1);
  height: 68px;
}

nav.effect3-default ul {
  margin: 2px 0;
}

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

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

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

nav.effect3-a {
  -webkit-transform: scale(0.85);
          transform: scale(0.85);
}

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

nav.effect3-b {
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}

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

nav.effect4-default {
  -webkit-transform: scale(1);
          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 {
  -webkit-transform: none;
          transform: none;
  border-radius: 100%;
  transition: all 1s ease;
}

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

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

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

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

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


/*Downloaded from https://www.codeseek.co/gasolinewaltz/slowbarheadercomps-jmpzPq */
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
          };
        });
      }
    }
  });

Comments