ホバーで回転メニューホイールを作成する方法

ホバー時に回転するメニューホイールを作成することは、Webサイトに役立つリンクを表示するための楽しい方法です。 これは、ヘッダーに複数のアクションコールを提供して、ユーザーが移動する必要のある場所に誘導するための優れた方法です。 そしてそれはあなたのブログのためのクールなサブカテゴリーメニューでもあるでしょう。

このチュートリアルでは、Diviでホバー時に回転するメニューホイールを作成する方法を紹介します。 これは、組み込みのDiviオプションとカスタムCSSのいくつかのスニペットを組み合わせて使用​​することで実行できます。

スニークピーク

レイアウトを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。

チュートリアルに行きましょう。

私たちのYoutubeチャンネルを購読する

始めるために必要なもの

開始するには、次のものが必要です。

1. Diviテーマがインストールされ、アクティブになっています
2. フロントエンドでゼロから構築するために作成された新しいページ（ビジュアルビルダー）

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

Diviでスピニングメニューホイールデザインを作成する

基本的な考え方

ホイールは、高さと幅を500px、角を50％丸くして、行を円形の要素に変えることで作成されます。 各メニューリンクは個別のテキストモジュールで作成され、各テキストモジュールを行の半径（中心）に沿って回転させることにより、円形の行の周囲に沿って配置されます。 この設定は、Diviで曲線テキストを作成する方法と似ています。

セクションと行1を作成します

1列の行を持つ通常のセクションを作成します。

次に、次の内容のテキストモジュールを行に追加します。

次に、テキストデザインを次のように更新します。

テキストフォント：Share Tech
テキスト文字の間隔：1px
見出し2テキストサイズ：8vw

行2を追加してホイールを構築します

次に、行1の下に新しい1列の行を追加する必要があります。

リンクにテキストモジュールを追加する前に、行をホイールとして設計する必要があります。 ホイールの設計を行うには、列にかなりの最適化が必要になります。 開始するには、行2の設定を開き、以下を更新します。

背景色：＃02366b
背景グラデーションの左の色：rgba（0,0,0,0.45）
背景のグラデーションの正しい色：＃02366b
グラデーションタイプ：ラジアル
半径方向：中心
開始位置：36％
終了位置：0％

カスタムガター幅を使用：はい
側溝幅：1
幅：500px
最大幅：500px（デスクトップ）、自動（タブレットと電話）
高さ：500px（デスクトップ）、自動（タブレットと電話）
パディング（デスクトップ）：0px上、0px下
パディング（タブレットと電話）：上20px、下20px、左20px
マージン（電話）：-10％右

行の高さと幅の両方を500pxに設定して、完全な正方形にする必要があります。 これにより、Diviの丸みを帯びた角（境界半径）オプションを使用して、完全な円形を作成できます。

丸みを帯びた角：50％

次に、次のようにボックスシャドウを使用して、別のレベルの円のデザインを追加できます。

ボックスシャドウ：スクリーンショットを参照
ボックスシャドウブラー強度：0px
ボックスシャドウスプレッド強度：210px
影の色：rgba（2,54,107,0.66）

次に、行のコンテンツを垂直方向の中央に配置するために、CSSの小さなスニペットを追加します。 [詳細設定]タブで、メイン要素に次のカスタムCSSを追加します。

display:flex;
align-items:center;

今のところ、これで行の設定が処理されます。 後で回転ホバー効果を追加するために戻ってきます。

リンクの追加

ホイール内の各リンクは、テキストモジュールで作成されます。 合計6つのテキストモジュールを作成します。 5つのテキストモジュールはホイールへのリンクを保持し、1つのテキストモジュールにはメニュータイトルが含まれます。

新しいテキストモジュールを作成することから始めます。

次に、テキスト設定を次のように更新します。

本文内容：「リンクアイテム」

テキストフォント：Share Tech
テキストテキストの色：#ffffff
テキストテキストサイズ：16px（デフォルト）、20px（ホバー）
テキスト文字の間隔：1px
テキスト行の高さ：60px
幅：250px（デスクトップ）、自動（タブレットと電話）
高さ：60px
パディング：残り20px

今のところ設定を保存します。 次に、テキストモジュールを4回複製して、合計5つのテキストモジュールを作成します。

リンク/テキストモジュールの配置

これで、ホイールの周囲に沿ってリンクを配置する準備が整いました。 これを行うために、モジュールを所定の位置に移動/移動および回転する変換オプションを使用して、各テキストモジュールを更新します。

これを簡単にするには、ワイヤーフレームビューモードを展開し、上部のリンク1から下部のリンク5までテキストモジュールにラベルを付けます。

リンク1

リンク1の編集から始めます。リンク1のテキストモジュール設定を開き、以下を更新します。

変換変換Y軸：120px（デスクトップ）、0px（タブレットと電話）
変換回転Z軸：60度（デスクトップ）、0px（タブレットと電話）
変形原点：50％100％（右中央）

リンク2

リンク2のテキストモジュール設定を開き、以下を更新します。

変換変換Y軸：60px（デスクトップ）、0px（タブレットと電話）
変換回転Z軸：30度（デスクトップ）、0px（タブレットと電話）
変形原点：50％100％（右中央）

リンク3

リンク3のテキストモジュールは中央にあるので、そのままにしておくことができます。

リンク4

リンク2のテキストモジュール設定を開き、以下を更新します。

変換変換Y軸：-60px（デスクトップ）、0px（タブレットと電話）
変換回転Z軸：-30度（デスクトップ）、0px（タブレットと電話）
変形原点：50％100％（右中央）

リンク5

リンク2のテキストモジュール設定を開き、以下を更新します。

変換変換Y軸：-120px（デスクトップ）、0px（タブレットと電話）
変換回転Z軸：-60度（デスクトップ）、0px（タブレットと電話）
変形原点：50％100％（右中央）

それでは、これまでの結果を確認してみましょう。 テキストモジュール内のリンク/テキストが円の周囲に沿って完全に回転することに注目してください。

メニューラベルの追加

メニューラベルを追加するには、既存の5つのテキストモジュールの上部に別のテキストモジュールを追加する必要があります。 先に進み、リンク1の上に新しいテキストモジュールを追加します。

次に、本文の内容を次のように更新します。

<p>menu</p>

メニューラベルがapタグでラップされていることを確認してください。 これにより、行の高さがテキスト設定で認識されるようになります。

次に、デザインを高速化するために、リンク3のテキストモジュールのモジュールスタイルをコピーし、それらのモジュールスタイルを新しいテキストモジュールに貼り付けます。

次に、以下を更新します。

行の高さ：300px（デスクトップ）、20px（タブレットと電話）
高さ：デフォルト設定に戻す（自動）

行の高さは、コンテンツの列の高さと同じになるように300pxである必要があります。これも300pxです（それぞれの高さが60pxの5つのテキストモジュールは300pxに等しくなります）。 これにより、テキストが垂直方向の中央に配置されたままになります。

次に、メニューラベルのテキストモジュールを180度回転させて、ホイールの反対側に正しく表示されるようにする必要があります。 これにより、訪問者は、リンクを表示するホバー状態の前にメニューラベルを表示できます。

変換回転Z軸：180度（デスクトップ）、0度（タブレットと電話）
変形原点：50％100％（右中央）

完了したら、メニューラベルのテキストモジュールに絶対位置を指定する必要があります。 これを行うには、次のカスタムCSSをメイン要素に追加します。

position: absolute !important;

結果を確認してください。 メニュー項目がホイールの右側に逆さまになっているのがわかります。

行/ホイールにスピニングホバー効果を追加する

行に回転ホバー効果を追加するには、次のように行設定を更新します。

変換回転Z軸：180度（デスクトップ）、0度（ホバー、0度（タブレットと電話）

次に、遷移設定を次のように更新します。

移行時間：450ms
移行速度曲線：イーズインアウト

次に、ホバー時にホイールがどのように回転するかを確認します。

セクションの2列レイアウトの作成

現在、レイアウトは2つの1列の行を積み重ねて構成されています。 ただし、flex cssプロパティを使用して、2つの行を水平方向に揃えることができます。 これを行うには、カスタムCSSの小さなスニペットをセクションに追加します。 完了したら、間隔を少し調整して、見栄えを良くする必要があります。

セクション設定を開き、次のカスタムcssをメイン要素に追加します。

display:flex;

行1の間隔を更新する

次に、行1のサイズと間隔を次のように更新します。

幅：40％（デスクトップ）、100％（タブレットと電話）
マージン（デスクトップ）：残り5％
マージン（タブレット）：左5％、右5％
マージン（電話）：5％右

最後の仕上げ

タブレットや携帯電話のディスプレイでは、リンク1テキストモジュールに上部マージンを追加する必要があります。

マージン（タブレット）：30pxトップ

また、いつでもセクションにセクションディバイダーを追加して、デザインを完成させることができます。

最終結果

それでは、最終結果を確認しましょう。

代替ハーフホイールデザイン

クールな代替設計の1つは、ホイールの右半分をセクションの外側に非表示にして、リンクが非表示になり、ホバーすると表示されるようにすることです。 これを行うには、先に進んで、作成したばかりのデザインを保持しているセクション全体を複製します。 重複するセクションで、行1の設定を次のように更新します。

幅：70％（デスクトップ）

次に、次のようにホイールをセクションの外側に押すために、行2の設定を更新します。

マージン：-250px右

ホイールの全幅が500pxであり、行のちょうど半分を非表示にするため、-250pxを使用する必要があります。

次に、次のようにセクションの可視性を非表示に設定します。

これが最終的なデザインです。

最終的な考え

回転するリンクホイールは、訪問者を微妙でユニークなホバー効果で引き付けることができるエレガントなデザイン要素の1つです。 そして、Diviの組み込みのデザイン設定だけで、このデザインをどれだけ実行できるかは非常に驚くべきことです。 これにより、次のプロジェクトのデザインツールベルトに少し余分なものが追加されることを願っています。

コメントでお返事をお待ちしております。

乾杯！