jQuery と CSS3 の見事なハンバーガー変形アニメーション効果-CSSチュートリアル-php.cn

jQuery と CSS3 の見事なハンバーガー変形アニメーション効果

黄舟

リリース： 2017-01-18 14:04:21

オリジナル

1519 人が閲覧しました

簡単なチュートリアル

これは、jQuery と CSS3 を使用して作成されたクールなハンバーガー変形アニメーション特殊効果です。この特殊効果は、jQuery を通じてボタンイベントをアタッチし、CSS3 変換とアニメーションを通じてアニメーション効果を作成します。

使い方

HTML構造

このハンバーガー変形アニメーション特殊効果のHTML構造は以下の通りです:

<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スタイル

ハンバーガーメニューボタンの基本スタイルは以下の通りです:

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

ログイン後にコピー

6つのアニメーションは以下の通りです。スタイルで使用されます: activeTop、activeMid、activeMenu、reverseTop、reverseMid、reverseMenu。ハンバーガーボタンをそれぞれ変形したり初期状態に戻したりするために使用します。

JavaScript

この特殊効果は、jQuery コードを使用して、対応する要素の対応するクラスを追加および削除し、マウスクリックイベントをハンバーガーボタンにバインドします。

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

ログイン後にコピー

上記は、jQuery と CSS3 による見事なハンバーガー変形アニメーションの特殊効果の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。