jQuery回転ナビゲーションボタン-フロントエンドQ&A-php.cn

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

WBOY

リリース： 2023-05-12 10:20:36

オリジナル

573 人が閲覧しました

モバイルデバイスとレスポンシブ 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: アニメーション効果を追加する

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

単純な反転エフェクト

.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 属性を使用して、直線の反転を実現します。ラインとパンを上下に動かします。同時に、中央の直線を透明に設定して、隠し効果を実現します。

波形エフェクト

.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 度回転するように設定し、中央の直線は回転します。中心を中心に回転します。

バウンスエフェクト

.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 サイトの他の関連記事を参照してください。