Menu icon animation

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

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

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

Technologies

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

<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/apollo55/menu-icon-animation-ABbug */

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;
  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;
  transition: stroke-dashoffset .5s;
}

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

.content .header__fake.animated svg circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .5s;
}

/*Downloaded from https://www.codeseek.co/apollo55/menu-icon-animation-ABbug */
var $header = $('.header__fake');

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

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

Comments