jQuery et CSS3 superbes effets d'animation de déformation de hamburger-tutoriel CSS-php.cn

jQuery et CSS3 superbes effets d'animation de déformation de hamburger

黄舟

Libérer： 2017-01-18 14:04:21

original

1583 Les gens l'ont consulté

Bref tutoriel

Il s'agit d'un effet spécial d'animation de déformation de hamburger sympa créé à l'aide de jQuery et CSS3. Cet effet spécial attache des événements de bouton via jQuery et crée des effets d'animation via la transformation et l'animation CSS3.

Comment utiliser

Structure HTML

La structure HTML de l'effet spécial d'animation de déformation hamburger est la suivante :

<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>

Copier après la connexion

Style CSS

Hamburger Le style de base du bouton de menu est le suivant :

.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;
}

Copier après la connexion

Six animations sont utilisées dans le style : activeTop, activeMid, activeMenu, reverseTop, reverseMid et reverseMenu. Utilisé respectivement pour déformer et revenir à l'état initial du bouton hamburger.

JavaScript

Cet effet spécial utilise le code jQuery pour ajouter et supprimer les classes correspondantes pour les éléments correspondants et lier les événements de clic de souris au bouton hamburger.

&#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();
    }
  });
});

Copier après la connexion

Ce qui précède est le contenu des superbes effets spéciaux d'animation de déformation de hamburger de jQuery et CSS3. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (m.sbmmt.com) !