6 CSS ハンバーガーアニメーション_html/css_WEB-ITnose

CSS と少しの JavaScript を使用して、「ハンバーガー」アニメーションを生成する方法を示しました。

前回の記事で、ナビゲーション バー メニュー (「ハンバーガー アイコン」とも呼ばれる) のアニメーションに関するインスピレーションを公開しました。その結果、ファンの皆様からたくさんのお褒めの言葉をいただきましたこと、心より感謝申し上げます。

私はこの側面にもっと取り組むことにしたので、一連の異なるアニメーション実装を書きました。この記事では、6 種類の「ハンバーガー」アニメーションの強化版を紹介します。

アニメーションをトリガーするために少し JavaScript を使用しました。学習を続ける前に、デモをご覧ください (翻訳者: 開けない場合は、記事の下部にあるデモをクリックしてください)

変更点

以前に書いたコード あまりきれいではありません。変更の主な目的は、コードをよりきれいに、より整理することです。

まず、意味のないdivをbutton要素に置き換えました。これにより、コードが読みやすくなります。

次に、ラッパー クラス名を .hamburger と名付けました。 .hamburger 内には別の要素 (span タグ) があり、そのクラス名を .icon として配置しました

Essence

私たちの .icon 要素はラップされて、完成したアイコン。

アニメーションをよりスムーズにするには、中央のバーが十分に柔軟である必要があるため、.icon 要素を使用してハンバーガーのパティ部分として機能します。

アイコンのラッピング部分に関しては、.hamburger はラッパーとして機能するだけでなく、アニメーション全体の完成も支援します。したがって、ハンバーガーの上部と下部は .hamburger 擬似クラスによって埋められます。

HTML

<button class="hamburger hamburger-cancel">  <span class="icon"></span></button>

ご覧のとおり、button 要素は .hamburger の役割を果たします。別のクラス名 (.hamburger-cancel) は、ハンバーガーの種類 (パンフライドチキンドラムスティック、ビッグマックなど) を区別するために使用されます。当店では6種類の味のハンバーガーをご用意しております。

JavaScript

最初に述べたように、切り替えに小さな JS コードを使用します。以下は私のコード スニペットです

var el = document.querySelectorAll('.hamburger');for(i=0; i<=el.length; i++) {  el[i].addEventListener('click', function() {    this.classList.toggle('active');  }, false);}

上記の JavaScript は主に、クリック時間をバインドすることで、対応する要素に .active クラスを追加します。 。 優れた。

コード

以下の CSS コードは、ハンバーガー要素のデフォルト状態を設定します。フォントサイズは適切に調整できますが、もちろん最大フォントサイズはアイコンを超えることはできません

構造仕様に加えて、アニメーションをよりスムーズにするために CSS トランジションプロパティも使用します。

さて、ハンバーガーのアイコンを描いてみましょう。次の定義により、プロセス全体をより明確に理解できます。

明らかに、すべてのアイコンの 3 つのストライプには、抽出できるいくつかの共通の特徴があります。

上記のコードでは、.hamburger に 3 本のバーを描画しました。少し隙間を与えると、ハンバーガーのアイコンがはっきりと見えます。

見た目をすっきりさせるために、border-radius 属性を設定します。要素にはテキストがないため、背景色を設定します。

予想通り、山東チヂミを描きました。次のアニメーション部分に進みましょう。

アニメーション

6 種類のハンバーガーを 1 つずつ分析してみましょう。

垂直

最も簡単な方法を使用して、ハンバーガーを回転するには、アクティブな状態で 90 度回転するだけで済みます。または、270 度回転するだけで、よりかっこよく見えます。

.hamburger { font-size: 60px; display: inline-block; width: 1em; height: 1em; padding: 0; cursor: pointer; transition: transform .2s ease-in-out; vertical-align: middle; border: 0 none; background: transparent; }/** * Button height fix for Firefox */.hamburger::-moz-focus-inner { padding: 0; border: 0 none; }/** * Focus fix for Chrome */.hamburger:focus { outline: 0; }

'シェイプアップ。

もちろん、ただ回すだけでは十分ではありません。回転しながら Y 軸を変更する必要があります。そうしないと、距離が少し遠くなります。

.hamburger:before,.hamburger:after { content: ""; }.hamburger:before,.hamburger .icon,.hamburger:after { display: block; width: 100%; height: .2em; margin: 0 0 .2em; transition: transform .2s ease-in-out; border-radius: .05em; background: #596c7d; }/** * Styles for the active `.hamburger` icon */.hamburger.active:before,.hamburger.active .icon,.hamburger.active:after { background: #2c3e50; }

プラス記号

このアニメーションは次のようなものです:

- 上のバンズが移動および回転して垂直バーとして機能します
- 下のバンズが移動および回転して水平線として機能します

これら3 ハンバーガーからプラスへのアニメーションは、アクション

/** * VERTICAL HAMBURGER */.hamburger.hamburger-vertical.active { transform: rotate(270deg); }

/** * CLOSE/CANCEL/CROSS */.hamburger.hamburger-cancel.active .icon { transform: scale(0); }.hamburger.hamburger-cancel.active:before { transform: translateY(.4em) rotate(135deg); }.hamburger.hamburger-cancel.active:after { transform: translateY(-.4em) rotate(-135deg); }

/** * PLUS */.hamburger.hamburger-plus.active .icon { transform: scale(0); }.hamburger.hamburger-plus.active:before { transform: translateY(.4em) rotate(90deg); }.hamburger.hamburger-plus.active:after { transform: translateY(-.4em) rotate(180deg); }

同様の実装をオンラインで探したところ、Sara の Navicon トランスミコンがクールで堅牢で、より魅力的であることがわかりました。

この記事を楽しんでいただければ幸いです。以下でご意見やご提案をお気軽に共有してください。読んでくれてありがとう。

http://helkyle.com/demos/hamburger-icons.html’ target=’__blank’>クリックしてデモを表示します

この記事は @Rahul Arora による翻訳に基づいており、私自身の理解と意味が含まれています。うまく翻訳されていない点や間違っている点があれば、アドバイスをお願いします。この翻訳を転載したい場合は、英語の出典を明記してください: http://w3bits.com/animated-hamburger-icons/