Home >Web Front-end >CSS Tutorial >jQuery and CSS3 stunning hamburger deformation animation effects

jQuery and CSS3 stunning hamburger deformation animation effects

黄舟
黄舟Original
2017-01-18 14:04:211567browse

Brief Tutorial

This is a cool hamburger deformation animation special effect made using jQuery and CSS3. This special effect attaches button events through jQuery and creates animation effects through CSS3 transform and animation.

How to use

HTML structure

The HTML structure of the hamburger deformation animation effect is as follows:

<div class=&#39;container&#39;>
  <div class=&#39;burger&#39;>
    <div class=&#39;burger__line-top&#39;></div>
    <div class=&#39;burger__line-mid&#39;></div>
    <div class=&#39;burger__menu&#39;>
      <p>MENU</p>
    </div>
  </div>
</div>

CSS style

Hamburger menu button The basic style is as follows:

.burger {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 71px;
  height: 71px;
  cursor: pointer;
}
.burger__line-top {
  width: 100%;
  height: 8px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 1px 0 #fff;
}
.burger__line-mid {
  margin-top: 17px;
  width: 100%;
  height: 8px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 1px 0 #fff;
}
.burger__menu {
  margin-top: 10px;
}
.burger__menu p {
  text-align: center;
  font-size: 20px;
  font-family: &#39;Open Sans&#39;, sans-serif;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 1px #fff;
  letter-spacing: 3px;
}

Six animations are used in the style: activeTop, activeMid, activeMenu, reverseTop, reverseMid and reverseMenu. Used respectively to deform and return to the initial state of the hamburger button.

JavaScript

This special effect uses jQuery code to add and remove corresponding classes for corresponding elements, and bind mouse click events to the hamburger button.

&#39;use strict&#39;;
$(document).ready(function () {
  var $burger = $(&#39;.burger&#39;),
      $topLine = $(&#39;.burger__line-top&#39;),
      $midLine = $(&#39;.burger__line-mid&#39;),
      $menuLine = $(&#39;.burger__menu&#39;),
      anim = false;
 
  var changeClasses = {
    addActive: function addActive() {
      for (var i = 0; i <= 2; i++) {
        $burger.children().eq(i).removeClass(&#39;reverseLine&#39; + (i + 1)).addClass(&#39;activeLine&#39; + (i + 1));
      }
    },
    addReverse: function addReverse() {
      for (var i = 0; i <= 2; i++) {
        $burger.children().eq(i).removeClass(&#39;activeLine&#39; + (i + 1)).addClass(&#39;reverseLine&#39; + (i + 1));
      }
    }
  };
 
  var timeouts = {
    initial: function initial(child, Y, rot, scale) {
      $burger.children().eq(child).css(&#39;transform&#39;, &#39;translateY(&#39; + Y + &#39;px) rotate(&#39; + rot + &#39;deg) scale(&#39; + scale + &#39;,1)&#39;);
    },
    afterActive: function afterActive() {
      var _this = this;
 
      // ES6
      setTimeout(function () {
        _this.initial(0, 12, 45, 1.40);
        _this.initial(1, -12, -45, 1.40);
        _this.initial(2, 35, 0, 1);
        $burger.children().eq(2).css(&#39;opacity&#39;, &#39;0&#39;);
        anim = true;
      }, 1300);
    },
    beforeReverse: function beforeReverse() {
      var _this2 = this;
 
      setTimeout(function () {
        for (var i = 0; i <= 2; i++) {
          _this2.initial(i, 0, 0, 1);
        }
        $burger.children().eq(2).css(&#39;opacity&#39;, &#39;1&#39;);
        anim = false;
      }, 1300);
    }
  };
 
  $burger.on(&#39;click&#39;, function () {
    if (!anim) {
      changeClasses.addActive();
      timeouts.afterActive();
    } else if (anim) {
      changeClasses.addReverse();
      timeouts.beforeReverse();
    }
  });
});

The above is the content of the stunning hamburger deformation animation special effects of jQuery and CSS3. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn