coolmenupart2

by Sam Fereday

HTML

<div class="hero">
  <div class="sp sp1"></div>
  <div class="banner-content">
    <div class="sp sp2">
      <p>
        Turducken tongue brisket t-bone tenderloin kielbasa. Ground round sausage corned beef biltong.
      </p>
    </div>
    <div class="sp sp3">
      <button>
        Find out more
      </button>
    </div>
  </div>
</div>
<nav>
  <ul>
    <li>
      <a href="#" class="activate">
        <span class="ltext">Mobile Solutions</span>
        <span class="sp sp1"></span>
        <span class="sp sp2"></span>
        <span class="ltbg"></span>
      </a>
    </li>
  </ul>
</nav>

SCSS

// Animates transparent layer
@keyframes top {
  from {
    height: 5px;
  }
  to {
    height: 500px;
  }
}

@keyframes bottom {
  from {
    height: 5px;
  }
  to {
    height: 60px;
  }
}

// Animates text layer
@keyframes text {
  from {
    top: 8px;
  }
  to {
    top: -120px;
  }
}

// Animates transparent layer bg image
@keyframes bg {
  from {
    background-position: -10% 0;
    opacity: 0;
  }
  to {
    background-position: 0 0;
    opacity: 0.7;
  }
}

// Animates banner area layers
@keyframes herobg {
  from {
    background-position-x: 20%;
    opacity: 0;
  }
  to {
    background-position-x: -340%;
    opacity: 1;
  }
}

@keyframes herocontent {
  from {
    left: 100%;
  }
  to {
    left: 0;
  }
}

// Site styles
body {
  padding: 0;
  margin: 0;
  font: 75%/1.8em arial;
}

* {
  box-sizing: border-box;
}

// Specific to hero only
.hero {
  width: 100%;
  min-height: 32em;
  position: relative;
  overflow: hidden;
  background: url('https://www.toptal.com/designers/subtlepatterns/patterns/contemporary_china_2.png');
  &.active {
    .sp1 {
      animation: herobg 0.3s forwards;
      -webkit-filter: grayscale(1);
      filter: grayscale(1);
    }
    .sp2 {
      animation: herocontent 0.3s 0.2s forwards;
    }
    .sp3 {
      animation: herocontent 0.3s 0.4s forwards;
    }
  }
  .banner-content {
    height: 50vh;
    width: 50%;
    padding: 7em 0 0;
    float: right;
    position: relative;
  }
  .sp {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 35em;
    &.sp1 {
      overflow: hidden;
      width: 76%;
      opacity: 0;
      //left: 5%;
      background: url('http://www.pngall.com/wp-content/uploads/2016/04/Happy-Person.png') no-repeat 0 100%;
    }
    &.sp2 {
      top: 3em;
      left: 100%;
      font-size: 2em;
      line-height: 1.2em;
    }
    &.sp3 {
      left: 100%;
      height: auto;
      top: auto;
      bottom: 0;
    }
    button {
      padding: 0.8em;
      font-size: 0.9em;
     ...

JavaScript

let hero = document.querySelector('.hero');
let link = document.querySelector('.activate');
let state = 1;

link.addEventListener('click', function() {

  state *= -1;

  hero.className = state < 0 ? 'hero active' : 'hero';
  link.className = state < 0 ? 'activate active' : 'activate';

});