Elementorギャラリーで波のホバーエフェクトを作成する方法：完全なチュートリアル

ウェブデザインにおいて、ホバーエフェクトは、ユーザーが画像やボタンの上にマウスを移動させたときに表示される、非常に人気のあるダイナミックエフェクトです。波のホバー効果これは波のうねりをシミュレートしたソフトで魅力的なアニメーション効果で、ホバリングすると画像が水の波のようにダイナミックに見えます。この記事では、Elementorライブラリにこのエフェクトを実装する方法を順を追って説明します。

予備的

Elementorで波のホバーエフェクトを作成するには、以下のものが必要です：

1. エレメンタ プラグインElementorプラグインがインストールされ、有効になっていることを確認してください。より高度なスタイルが必要な場合は エレメンタル・プロこのチュートリアルはElementorの無料版で実装できます。
2. カスタムCSSElementor Proを使用している場合は、カスタムCSSを要素のCSSセクションのカスタマイズコードを追加します。

波のホバー効果を作成する手順

ステップ 1: Elementor ギャラリーウィジェットの追加

1. WordPressのダッシュボードを開き、次の場所に移動します。 ページ > 新しいページを追加または既存のページを編集します。
2. エレメンタール エディタ左のツールバーにドラッグ＆ドロップします。 イメージアーカイブ ウィジェット（ギャラリー）をページに追加し、表示したい画像をアップロードします。

3. ギャラリーのレイアウトをあなたのデザインニーズに合わせて設定します。

ステップ2：画像にクラス名を追加

ウェーブ効果を特定の画像に簡単に適用するにはカスタムクラス名これにより、CSSコードはこれらの画像に対してのみ機能するようになります。これにより、CSSコードはこれらの画像でのみ動作します。

1. ギャラリーウィジェットを選択し 高いレベル ラベル

2. ある CSSクラス フィールドにカスタム・クラス名を入力します。 波乗り.

ステップ 3: カスタム CSS コードの追加

次に、CSSを使って波のホバー効果を実装します。以下のCSSコードは、ページのカスタムCSSセクション、またはテーマのカスタムCSS（ElementorがCSSの直接追加をサポートしていない場合）に追加できます。

/* ベーススタイル：ホバー効果画像の設定 */
.wave-hover img {
  display: block; /* 画像が適切にアニメーションすることを確認 */
  transition: transform 0.4s ease-in-out; /* スムーズなトランジション効果を追加します。
  will-change: transform; /* 変形が変更されることをブラウザに伝えることで、パフォーマンスを最適化します。
}

/* ウェーブホバー効果 */
.wave-hover img:hover {
  transform: translateY(-10px) rotate(2deg) scale(1.05); } /* wave-hover */ }.
  animation: wave 0.6s ease-in-out infinite; /* アニメーションを適用します。
}

/* 波のアニメーションを定義します。
キーフレーム wave {
  0%, 100% { } /* アニメーションを適用します。
    transform: translateY(-10px) rotate(2deg); /* 始点と終点が同じ、スムーズなループ */
  }
  25% {
    transform: translateY(-15px) rotate(-2deg); /* 画像は上にシフトし、わずかに反転します */。
  }
  50% {
    transform: translateY(0px) rotate(2deg); /* 画像を最初の回転に戻す */。
  }
  75% {
    transform: translateY(-5px) rotate(-1deg); /* 画像が下に移動し、わずかに回転します */。
  }
}

コードの説明

• .wave-hover img: これはデフォルトの状態スタイルで、画像の遷移効果を設定し、ホバー時の波の効果へのスムーズな遷移を可能にします。
• .wave-hover img:hoverマウスを画像の上に置くと、画像が少し上に移動し、回転してズームインし、波のアニメーションを開始します。
• キーフレーム: 波のアニメーションのキーフレームを定義し、ホバー時に画像が上下にうねり、波の効果を生み出します。

ステップ 4: ページを保存してプレビュー

上記の手順が完了したら、ページを保存し、プレビューをクリックします。プレビューページでは、画像の上にマウスカーソルを置くと、画像から波のような上下効果最新バージョンは、ユニークでダイナミックなビジュアル体験をユーザーに提供します。

オプション・ステップ：エフェクト・パラメーターの調整

効果パラメータは、設計要件に応じて微調整が可能です：

• 振幅調整中 トランスレートY 値は波の効果の大きさを制御します。値が大きいほど、より顕著な波が発生します。
• アニメーション速度調整 アニメーション 属性に含まれる期間（例えば 0.6s)は、ウェーブエフェクトのスピードをコントロールすることができます。
• 回転角:: 変更 回転 値は画像の回転角度を調整します。

さらなる最適化：シャドウ効果の追加

効果に奥行きを持たせるために、ホバー効果に影を追加して、変動する画像をより立体的に見せることもできます。

.wave-hover img:hover {
  transform: translateY(-10px) rotate(2deg) scale(1.05)；
  アニメーション：ウェーブ0.6sイーズインアウト無限；
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0, 0.2)；
}

概要

ホバーエフェクトは、ウェブデザインでよく使われるダイナミックなエフェクトで、ユーザーが画像やボタンの上にマウスを移動させたときにインタラクティブ性を示します。波のホバーエフェクトは波の満ち引きをシミュレートし、画像にマウスを乗せたときに水のようなダイナミックな効果を与えます。この記事では、Elementor ライブラリでこのエフェクトを実装する方法について説明します。画像ライブラリのセットアップ、カスタムクラス名の追加、CSS 波アニメーションコードの記述、必要に応じてエフェクトの大きさ、速度、影を調整することで、ウェブサイトをより鮮やかにし、ユーザーを惹きつけることができます。