Diviの任意の要素にホバーチルト効果を追加する方法

Webデザインにホバーチルト効果を追加することは、DiviWebサイトに命を吹き込むための楽しく魅力的な方法の1つです。 通常、このタイプの設計には、プラグインまたはより高度なコード（このチュートリアルのように）が必要です。 ただし、このプロセスは、Tilt.js（jQueryの軽量ホバーチルト効果）を使用するとはるかに簡単になります。 Tilt.jsを使用すると、ホバーチルト効果を数分で簡単に適用できます。

このチュートリアルでは、Diviの要素にホバーチルト効果を追加する方法を紹介します。 tile.js jQueryスニペットとDiviビルダーの組み合わせを使用して、画像、モジュールの列、行などに印象的なホバー傾斜効果を追加する方法を示します。 驚くべき3D視差効果を追加する方法も紹介します。

始めましょう！

スニークピーク

このチュートリアルの背後にある機能のライブデモについては、このcodepenをチェックしてください。

そして、このチュートリアルで構築するデザインを簡単に見てみましょう。

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

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

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

無料でダウンロード

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

ダウンロード

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

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
3. 「最初から構築」オプションを選択します。

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

Tilt.jsを使用するための基本

Tilt.jsは、jQuery用の軽量視差ホバー傾斜効果です。 jQueryを数行使用するだけで、ページ上の任意の要素にホバーチルト効果を追加できます。 最大10個のオプション（ドキュメントを参照）が付属しており、簡単に追加して、スケールや美しいグレア効果などの傾斜効果のデザインと機能を制御できます。

最も基本的なレベルでは、tilt.jsライブラリにアクセスすると、ホバー時に傾斜させる要素にCSSクラスを追加し、単純なjQueryスニペットを使用して同じクラスのjQueryオブジェクトに傾斜関数を適用できます。 。

たとえば、「et-js-tilt」という名前の画像モジュールにカスタムCSSクラスを追加するとします。

その後に行う必要があるのは、次のjQueryスニペットを追加して、画像にホバーチルト効果を追加することだけです。

$(".et-js-tilt").tilt();

次に、傾斜効果に追加のオプションを設定できます。 たとえば、次のコードスニペットを使用して、スケールとグレア効果を追加できます。

$(".et-js-tilt").tilt({
  glare: true,
  maxGlare: 0.7,
  scale: 1.1
});

結果はこれになります…

より高度な効果を得るには、transform：translateZ（）を任意の子要素に追加して、3D視差効果を取得できます。 これについては後で詳しく説明します。

これで、tilt.jsの使用方法の基本を理解したので、Diviでの使用方法を見ていきましょう。

Diviの任意の要素にホバーチルト効果を追加する方法

Diviモジュールにチルトホバー効果を追加する

デフォルトの通常のセクションに3列の行を追加します。

画像モジュールの追加

最初の列に、イメージモジュールを追加します。

注：任意のモジュールを使用できます。 画像モジュールである必要はありません。

お好みの画像をアップロードしてください。 自家製クッキーレイアウトパックのものを使用しています。

画像モジュールクラスの追加

[詳細設定]タブで、次のCSSクラスを追加します。

• CSSクラス：et-js-tilt

このクラスは、後で傾斜機能のセレクターとして使用されます。

画像モジュールのコピーと貼り付け

次に、画像モジュールをコピーして、残りの2つの列のそれぞれに1つずつ貼り付けます。

必要に応じて、複製した画像を新しい画像に置き換えることができます。 各画像モジュールにCSSクラス「et-js-tilt」があることを確認してください。

tile.jsJQueryを追加します

画像を傾斜させるために必要なtilt.jsライブラリとコードスニペットを追加するには、コードモジュールを使用します。

まず、既存の行の下に新しい1列の行を追加します。

次に、コードモジュールを新しい行に追加します。

次に、CDNからtilt.jsをインポートするスクリプト（https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery）を追加して、tilt.jsライブラリにアクセスする必要があります。 min.js）。 次のスクリプトをコードボックスに貼り付けます。

スクリプトタグ内で次のsrcを使用して、ライブラリをインポートします。

src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"

次のようになります。

それを使用するコードを追加する前に、tilt.jsをインポートすることが重要です。 したがって、tilt.jsを指すスクリプトの後に、追加する必要のあるJQueryをラップするために必要なスクリプトタグを追加します。 次に、次のJQueryをスクリプトタグの間に貼り付けます。

jQuery(document).ready(function ($) {
  if ($(window).width() > 980) {

    $(".et-js-tilt").tilt({
      glare: true,
      maxGlare: 0.7,
      scale: 1.1,
      perspective: 300,
    });

  }
});

ブラウザーの幅が980pxより大きい場合に実行されるifステートメント内にtilt（）関数があることに注意してください。 これにより、効果がデスクトップでのみ発生するようになります。

結果は次のとおりです。

行に傾斜ホバー効果を追加する

前に述べたように、このホバーチルト効果をDiviの任意の要素に追加できます。 これには、行全体が含まれます。 さらに、行内の各モジュールの傾斜効果を維持しながら、行に傾斜効果を追加できます。

これがその方法です。

行を複製し、一意のCSSクラスを行に追加する

画像の既存の行を複製してから、複製した行の設定を開きます。 [詳細設定]タブで、次のように行に一意のCSSクラスを指定します。

• CSSクラス：et-row-js-tilt

jQueryを追加する

次に、前の傾斜関数の下に次のjQueryを追加して、行に別の傾斜関数を適用します。

    $(".et-row-js-tilt").tilt({
      scale: 1,
      perspective: 1200,
    });

この傾斜効果では、スケールを1に戻し、遠近法の値を増やして、傾斜がより微妙になることに注意してください。

結果は次のとおりです。

行にカーソルを合わせるとアクティブになる傾斜機能があり、各画像モジュールにも前に追加したのと同じ傾斜効果があることに注意してください。 これは、ネストされた傾斜効果インスタンスを適用する方法です。

複数のDiviモジュールを備えた列に傾斜ホバー効果を追加する

場合によっては、モジュールの列に傾斜効果を追加すると便利です。 これにより、Diviを使用して列内に複数のモジュールを設計し、それらすべての要素を1つのユニットとして傾斜させることができます。 これを行う方法の例を示すために、画像モジュール、テキストモジュール、およびボタンモジュールを備えた列に傾斜ホバー効果を追加します。

新しい行を追加

まず、前の画像行の下に新しい1/6 2/31/6列行を作成します。

画像モジュールの追加

列2（中央の列）内に、新しい画像モジュールを追加します。

モジュールに画像をアップロードし、画像の配置を中央に設定します。

テキストモジュールを追加

画像モジュールの下に、次のH2見出しのテキストモジュールを追加します。

<h2>Local Organic</h2>

次に、見出し2のスタイルを次のように更新します。

• 見出し2フォント：Berkshire Swash
• 見出し2テキストの配置：中央
• 見出し2のテキストの色：＃000000
• 見出し2テキストサイズ：60px（デスクトップ）、32px（タブレット）、20px（電話）
• 見出し2行の高さ：1.2em

ボタンモジュールの追加

テキストモジュールの下に、ボタンモジュールを追加します。

ボタンのテキストを更新して「AboutUs」を読み、次のようにデザイン設定を更新します。

• ボタンの配置：センタラー
• ボタンのテキストサイズ：18px
• ボタンのテキストの色：#fff
• ボタンの背景色：＃000
• ボタンの境界線の幅：0px
• ボタンの境界線半径：100px
• ボタンフォント：流砂
• ボタンのフォントの太さ：太字
• パディング：上16px、下16px、左30px、右30px
• ボックスシャドウ：スクリーンショットを参照

列の設定

3つのモジュールが終了したら、それらのモジュールの親列（列2）の設定を開き、以下を更新します。

• 背景色：＃f5cee6

• パディング：50px（上下）、20px（左右）

列へのCSSクラスの追加

[詳細設定]タブで、次のCSSクラスを追加します。

• CSSクラス：et-column-js-tilt

jQueryを追加して、列に傾斜効果を適用します

列に傾斜効果を追加するために、列のCSSクラスを対象とするjQueryの別の同様のスニペットを追加できます。 行をターゲットとする前のスニペットの下に次のスニペットを貼り付けます。

    $(".et-column-js-tilt").tilt({
      scale: 1.1,
      perspective: 1000,
    });

これが最終結果です。

内部要素への3D視差効果の追加

より高度なホバーチルト効果のために、列の内部モジュールに3D視差効果を追加できます。 遠近法とtransform：translateZ（）の組み合わせを使用すると、ホバー傾斜効果がアクティブなときに、列内の各モジュールを3D空間にポップアウトさせることができます。

これがその方法です。

前の行を複製

まず、中央の列に傾斜効果を追加して、前の行を複製します。

一意の列クラスを追加する

次に、次のように、中央の列（列2）を一意のCSSクラスで更新します。

• CSSクラス：et-column-js-tilt-3d

カスタムCSS

内部モジュールが3D効果を保持することを確認するには、次のカスタムCSSを列のメイン要素に追加します。

transform-style: preserve-3d;

jQueryとCSSを追加する

次に、次のように、列をターゲットとする前の傾斜関数スニペットの下にjQueryのスニペットをさらにいくつか追加します。

    const columnTilt3d = $(".et-column-js-tilt-3d").tilt({
      scale: 1.1,
      perspective: 1000,
    });
    columnTilt3d.on("tilt.mouseEnter", function (e) {
      $(e.target).addClass("tilt-active");
    });
    columnTilt3d.on("tilt.mouseLeave", function (e) {
      $(e.target).removeClass("tilt-active");
    });

このjQueryは、前の例と同じように、別の基本的な傾斜関数を列に追加します。 ただし、コードは、傾斜効果がアクティブになるたびに、新しいクラス（「傾斜アクティブ」）を列に切り替えます。 この新しいクラスを使用して、列にカーソルを合わせると、各モジュールにtransform：translateZ（）値を適用できます。 これにより、ポップアウトの3D視差効果が作成されます。

これを行うには、次のカスタムCSSをコードボックス/コンテンツの上部に追加し、CSSを必要なスタイルタグでラップしていることを確認します。

  .et-column-js-tilt-3d.tilt-active .et_pb_image {
    transform: translateZ(100px);
  }
  .et-column-js-tilt-3d.tilt-active .et_pb_text {
    transform: translateZ(40px);
  }
  .et-column-js-tilt-3d.tilt-active .et_pb_button {
    transform: translateZ(50px);
  }

次に、最終結果を確認します。 3つのモジュールが傾斜効果中に回転すると、3D空間でどのように飛び出すかに注目してください。

最終結果

これが私たちの例の最終結果の別の見方です。

最終的な考え

Tilt.jsが提供するホバーチルト効果は、実際に試すのが楽しいものです。 このチュートリアルではいくつかの基本的な例を使用しましたが、これらのホバーチルト効果を事前に作成されたレイアウトまたは独自のサイトに適用するフィールドデイを簡単に行うことができます。 楽しみ！

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

乾杯！