Wix Harmony エディタ：アニメーションを追加・カスタマイズする

この記事内

パーツにアニメーションを追加する
アニメーションをカスタマイズする
モバイルサイトにアニメーションを追加する

パーツにアニメーションを追加すると、任意のパーツを目立たせて訪問者の目を引くことができます。アニメーションの種類は「開始」、「スクロール」、「ループ」、「マウスエフェクト」から好みのものを選択することができます。

それぞれのアニメーションは、方向、距離、待機時間、速度などの設定を細かくカスタマイズすることができます。また、モバイル用のアニメーションは小さな画面サイズに合わせて設計されているため、どのデバイスでも美しく表示されます。

Wix Harmony ランディングページに、アニメーションテキストが表示されている GIF。「フォールド」テキストアニメーションはサイトの上部から下に向かって飛んでいるように見えます。

ヒント：

同じパーツに異なるアニメーションとエフェクトを適用することができます。

パーツにアニメーションを追加する

パーツにアニメーションを追加して、サイトに躍動感を与えます。アニメーションは、4種類の中から好みのものを選択することができます。

アニメーションを追加する方法：

エディタに移動します。
該当するパーツをクリックします。
アクションバーで「アニメーション」アイコンをクリックします。
利用可能なオプションからアニメーションを選択します。
- 開始：アニメーションは、パーツが表示された際に一度のみ再生されます。
- ループ：アニメーションが繰り返し再生されます。
- スクロール：訪問者がページを上下にスクロールさせながらパーツに近づくと、アニメーションが再生されます。
- マウスエフェクト：訪問者のカーソルがパーツにマウスオーバーすると、アニメーションが動き始めます。

注意：

ヘッダーのパーツは、最初にページにアクセスした際に 1回だけアニメーション化されます。

アニメーションをカスタマイズする

パーツにアニメーションを追加したら、サイトの雰囲気に合わせてカスタマイズします。強さ、方向、待機時間などのオプションを調整して、思い通りの効果を作成することができます。

注意：

利用可能なレイアウトオプションは、選択したアニメーションによって異なります。

アニメーションをカスタマイズする方法：

エディタに移動します。
該当するパーツを選択します。
アクションバーで「アニメーション」アイコンをクリックします。
（まだ選択していない場合）利用可能なオプションからアニメーションを選択します。
「カスタマイズ」をクリックして選択したアニメーションを調整します：
- 強さ：ドロップダウンメニューをクリックし、再生時のアニメーションの強さを選択します。
- 方向：時計回りや右からなど、アニメーションが入る方向を選択します。
- 距離：スライダーを使用して、エフェクトの始点から終点までの距離を変更します。
- エフェクト時間：スライダーを使用して、アニメーションを再生する時間を調整します。
- 待機時間：スライダーをドラッグして、ページの読み込みからアニメーションの開始までの待機時間を調整します。
- 速度：スライダーをドラッグして、エフェクトの速度を変更します。数値が低いほど、エフェクトは速くなります。
- 移動軸：要素を横、縦、または両方の軸で移動するかを決定します。
- アニメーションタイプ：スクロール時のアニメーションの種類をイン、アウト、または連続から選択します。
- 回転軸：パーツが移動を開始する参照ポイントを選択します。
- モーションスタイル：「弱」や「ミディアム」など、動きの強さを選択します。