Morphing means to change or morphs one image or shape into another. It is a special effect in motion pictures and animations to give them a flawless transition. To add some special effect to your website image ElementsKit is presenting you a fully customizable widget name 画像モーフィング.
With ElementsKit, you can easily create interactive image transitions by utilizing an 画像モーフィング widget. It lets you customize effects, direction, and animation controls with flexibility.
Quick Steps:
1. Enable the ElementsKit Image Morphing widget.
2. Open a page with Elementor and drag & drop the Image Morphing widget.
3. Customize content: choose effect type, add image, and adjust morphing settings (style, direction, duration, etc.).
4. Style the design by adjusting image size, opacity, filters, and shape settings.
5. Click Publish/Update to apply the morphing effect on your site.
ElementsKit Image Morphing #
First, install and activate ElementsKit プロ plugin on your WordPress dashboard.
STEP 1: Enable the Widget #
- Go to your WordPress Dashboard
- Find ElementsKit
- Click Widgets
- Turn ON the Image Morphing widget
- 変更を保存します
STEP 2: Edit a Page with Elementor #
Select a page where you need to apply image morphing and edit it with Elementor.
- Search Image Morphing widget
- Drag and Drop it simply
STEP 3: Customize ElementsKit Image Morphing widget #
エフェクトタイプの選択 - 効果を選択します 画像、色、グラデーションカラー オプション。
コンテンツ #
エフェクトタイプの選択 - 効果を選択します 画像、色、グラデーションカラー オプション。
Image Effect
- Choose Image- Upload an image
- 画像サイズ- It will allow you to adjust the image size
- 画像 Resolution- You can adjust the image resolution from te options.
Color Effect:
ストロークを表示- もし、あんたが 色を選ぶ このフィールドでは次のことが可能になります ストロークの表示または非表示.
Gradient Color Effect:
もし、あんたが グラデーションカラーを選択してください エフェクトタイプとして、位置調整オプションがあります- 位置 X1、位置 X2、位置 Y1、および位置 Y2。
設定：
形状タイプ- Select Default then you will see the customization options below:
- Morphing Effect: Controls the easing and pacing of the transformation (e.g., Linear, EaseOutInQuad, EaseInCirc, etc.).
- Morphing Direction: Defines the sequence and order in which the SVG shapes transition into one another. Three options are- Normal, Reverse, and Alternate.
- ループ： Dictates whether the animation plays just once or repeats continuously.
- Duration(s): Sets the total time in seconds that it takes for one shape to fully morph into the next.
- Delay(s): Sets a pause in seconds before the morphing animation begins for the first time.
- End Delay(s): Sets a pause in seconds on the final shape before the animation loops or stops.
ただし、選択した場合 カスタムスタイル then you can generate a morphing SVG with blobmaker.
また、 独自のモーフィング SVG。アップロードする必要があることに注意してください 少なくとも 2 つの SVG モーフィング作業に。
スタイル #
スタイル オプションは、画像、色、およびグラデーションの効果で使用できます。
画像スタイル
このセクションでは、画像の幅、高さ、不透明度、CSS フィルター、画像ズーム、水平方向および垂直方向の画像位置を調整できます。
カラースタイル
カラー効果タイプには、次のオプションがあります。 SVGカラーをカスタマイズする.
グラデーションスタイル
がある 2色のオプション、それに応じて選択し、オフセットも調整する必要があります。
サペサイズ
This option is common for all the effect type. You can adjust the width and the height of the effects based on your needs.
これは、私たちがあなたのためにカスタマイズした画像モーフィングの一例です。
アニメーションや珍しい効果を通じてさまざまな画像を魅力的な方法で紹介するには、ElementsKit 画像モーフィング ウィジェットが最適です。
