jQuery回転ナビゲーションボタン

モバイル デバイスとレスポンシブ Web デザインの人気に伴い、ユーザー エクスペリエンスを向上させるために回転ナビゲーション ボタンを使用する Web サイトが増えています。従来のナビゲーション メニューと比較して、この種のナビゲーション ボタンはシンプルで操作が簡単で、さまざまなデバイス サイズにうまく適応できます。

この記事では、jQuery を使用して回転ナビゲーション ボタンを作成する方法を検討し、一般的に使用される回転アニメーション効果とその他の関連テクニックをいくつか紹介します。

ステップ 1: HTML と CSS レイアウト

まず、HTML ドキュメント内に回転ナビゲーション ボタンの基本構造を作成する必要があります。

<div class="rotate-btn">
  <span class="line line1"></span>
  <span class="line line2"></span>
  <span class="line line3"></span>
</div>

ここで div を作成します。 element には 3 つの spam 要素が含まれており、ナビゲーション ボタンの 3 本の直線を表すために使用されます。 CSS スタイルを使用してこれらの要素のスタイルを設定します。

.rotate-btn {
  display: block;
  cursor: pointer;
  position: relative;
  width: 40px;
  height: 40px;
}

.line {
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #000;
  transition: transform .3s ease-in-out;
}

.line1 {
  top: 0;
}

.line2 {
  top: 50%;
  transform: translateY(-50%);
}

.line3 {
  bottom: 0;
}

上記の CSS スタイルでは、スピン ナビゲーション ボタンの幅と高さを 40px に設定し、その位置を相対位置として指定します。同時に、絶対配置を使用して 3 つの線分の位置とスタイルを設定します。ここで注意する必要があるのは、回転アニメーション効果を実現するために、transform 属性とtransition 属性を使用していることです。

ステップ 2: jQuery コードを追加する

次に、jQuery を使用してインタラクティブな効果を追加する必要があります。まず jQuery ライブラリを HTML ファイルに追加し、次のコードを記述します。

$(document).ready(function() {
  $('.rotate-btn').click(function() {
    $(this).toggleClass('active');
  });
});

上記のコードでは、jQuery の Ready メソッドを使用して、ドキュメントのロード後にスクリプト コードが実行されるようにします。次に、click メソッドに回転ナビゲーション ボタンのクリック イベントを追加し、ボタンがクリックされたときに、toggleClass メソッドを使用してボタンのアクティブ クラスを切り替えます。

ステップ 3: アニメーション効果を追加する

回転ナビゲーション ボタンをより鮮やかにするために、スタイルとアニメーションのテクニックを使用して視覚効果を高めることができます。以下に、いくつかの一般的な回転アニメーション エフェクトを示します。

1. 単純な反転エフェクト

.rotate-btn.active .line1 {
  transform: translateY(6px) rotate(-45deg);
}

.rotate-btn.active .line2 {
  opacity: 0;
}

.rotate-btn.active .line3 {
  transform: translateY(-6px) rotate(45deg);
}

このエフェクトでは、回転属性と平行移動 Y 属性を使用して、直線の反転を実現します。ラインとパンを上下に動かします。同時に、中央の直線を透明に設定して、隠し効果を実現します。

2. 波形エフェクト

.rotate-btn.active .line1 {
  transform: translateY(6px) rotate(45deg);
}

.rotate-btn.active .line2 {
  transform: rotate(-45deg);
}

.rotate-btn.active .line3 {
  transform: translateY(-6px) rotate(135deg);
}

このエフェクトでは、最初と最後の直線がそれぞれプラスまたはマイナス 45 度回転するように設定し、中央の直線は回転します。中心を中心に回転します。

3. バウンスエフェクト

.rotate-btn.active .line1 {
  transform: translateY(10px);
}

.rotate-btn.active .line2 {
  transform: scale(0.8);
}

.rotate-btn.active .line3 {
  transform: translateY(-10px);
}

このエフェクトでは、直線を垂直方向に沿って上下に移動させながら、中央の直線を縮小させます。

ここでは 3 つの効果のみを紹介しますが、実際には、ナビゲーション ボタンを回転させるアニメーション効果には多くの種類があり、開発者は必要に応じて調整および変更できます。

概要

この記事では、回転ナビゲーション ボタンを作成する基本的なプロセスを紹介し、jQuery と CSS を使用してインタラクティブな効果やアニメーション効果を実現する方法について説明しました。この記事を学習することで、回転ナビゲーション ボタンを作成する基本的なスキルを習得したと思います。また、この機能を独自の Web サイトで使用して、ユーザー エクスペリエンスと Web サイトの美しさを向上させることができます。

以上がjQuery回転ナビゲーションボタンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。