Menu icon animation

CSS/SVG version of https://dribbble.com/shots/1746065-Floating-burger-2-0Forked from Marius Balaj's Pen Menu icon animation.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Menu icon animation</title>
  
  <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>
  
    <div class="content">

        <h2>Scroll to see the magic.</h2>

        <div class="header__fake">

            <div class="icn__wrap">
                <i class="icn__hamburger"></i>
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="58px" height="58px" viewBox="0 0 16 16" preserveAspectRatio="none">
                    <circle cx="8" cy="8" r="6.215" transform="rotate(90 8 8)"></circle>
                </svg>
            </div>
            <i class="btm__border"></i>

        </div>


        <h1>Tah-da!<span>Now scroll back up.</span></h1>

    </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

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

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */

body {
  background: #02021a url("https://i.imgur.com/705GHlC.jpg") no-repeat 0 0;
  background-size: 100% auto;
  color: #fff;
  font-family: Open sans;
}

.content {
  width: 480px;
  position: relative;
  margin: 0 auto;
}

.content h2 {
  margin: 35px 0 0;
}

.content h1 {
  text-align: center;
  margin: 1000px 0 200px;
}

.content h1 span {
  display: block;
  width: 100%;
  margin: 5px 0 0;
  opacity: .5;
}

.content .header__fake {
  position: fixed;
  top: 15px;
  left: 50%;
  margin-left: -240px;
  width: 480px;
}

.content .header__fake i {
  display: block;
}

.content .header__fake .btm__border {
  height: 1px;
  background: #fff;
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  -webkit-transition: left 0.3s;
  transition: left 0.3s;
}

.content .header__fake .icn__wrap {
  cursor: pointer;
  float: right;
  width: 58px;
  position: relative;
  height: 58px;
}

.content .header__fake .icn__wrap .icn__hamburger {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-6px);
  transform: translateX(-50%) translateY(-6px);
  display: block;
  width: 18px;
  height: 1px;
  z-index: 999;
  background: #fff;
}

.content .header__fake .icn__wrap .icn__hamburger:after,
.content .header__fake .icn__wrap .icn__hamburger:before {
  content: "";
  float: left;
  display: block;
  width: 100%;
  height: 1px;
  background: #fff;
  margin: 5px 0 0;
}

.content .header__fake .icn__wrap .icn__hamburger:before {
  margin: 6px 0 0;
}

.content .header__fake .icn__wrap svg {
  z-index: 10;
}

.content .header__fake .icn__wrap svg circle {
  fill: none;
  stroke: #fff;
  stroke-width: .5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 39 39;
  stroke-dashoffset: -39;
  -webkit-transition: stroke-dashoffset .5s;
  transition: stroke-dashoffset .5s;
}

.content .header__fake.animated .btm__border {
  right: 25px;
  left: 100%;
}

.content .header__fake.animated svg circle {
  stroke-dashoffset: 0;
  -webkit-transition: stroke-dashoffset .5s;
  transition: stroke-dashoffset .5s;
}
/* Downloaded from https://www.codeseek.co/ */
var $header = $('.header__fake');

$(window).scroll(function() {
  var scroll = $(window).scrollTop();

  if(scroll > 20) {
    $header.addClass('animated');
  } else {
    $header.removeClass('animated');
  }
});

This awesome code ( Menu icon animation ) is write by Reinhard, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Reinhard