Wix エディタ:アニメーションを追加・カスタマイズする
4分
アニメーションを使ってサイトに命を吹き込みましょう。「フロートイン」や「ズームイン」などのエフェクトを追加して、想像力に豊んだ印象的なページを作成します。アニメーションの再生方法とタイミング(1回のみ、スクロールで表示、ループで表示)を選択できます。
アニメーションはさまざまなパーツに適用でき、デスクトップサイトとモバイルサイトの両方で同じパーツに異なるエフェクトを適用することもできます。モバイルアニメーションは小さな画面に合わせてデザインされているので、どのデバイスからでも訪問者を驚かせることができます。

アニメーションに問題がある場合:
こちらの手順に従って、ライブサイトでアニメーションが正常に機能するか確認してください。
パーツにアニメーションを追加する
パーツにアニメーションを追加して、ダイナミックで魅力的なサイトを作りましょう。各アニメーションには独自のエフェクトがそれぞれ異なるため、それらをさまざまな要素と組み合わせて、訪問者に印象を残すことができます。
ヒント:
グループを選択し、「アニメーション」アイコン
をクリックすると、パーツのグループにアニメーションを追加することができます。

アニメーションを追加する方法:
- エディタで該当するパーツをクリックします。
- 「アニメーション」アイコン をクリックします。
- 利用可能なオプションからアニメーションを選択します。
- エントランス:アニメーションは、選択されたパーツが画面に表示された時にのみ再生されます。
- ループ:アニメーションはループ再生されます。
- スクロール:パーツがスクロールして表示されたときにアニメーションが再生されます。

注意:
ヘッダーのパーツは、最初にページにアクセスした際に 1回だけアニメーション化されます。
アニメーションをカスタマイズする
パーツにアニメーションを追加したら、サイトの雰囲気に合わせてカスタマイズできます。
強さ、方向、待機時間などの設定を調整して、インパクトを与え、訪問者を惹きつけましょう。
注意:
利用可能なカスタマイズオプションは、選択したアニメーションによって異なります。
アニメーションをカスタマイズする方法:
- エディタで該当するパーツをクリックします。
- 「アニメーション」アイコン をクリックします。
- 「カスタマイズ」をクリックし、オプションを使用してアニメーションを調整します:
- 強さ:ドロップダウンメニューをクリックし、再生時のアニメーションの強さを選択します。
- 方向:時計回りや右からなど、アニメーションが入る方向を選択します。
- 距離:スライダーを使用して、エフェクトの始点から終点までの距離を変更します。
- エフェクト時間:スライダーを使用して、アニメーションを再生する時間を調整します。
- 待機時間:スライダーをドラッグして、ページの読み込みからアニメーションの開始までの待機時間を調整します。
- アニメーションタイプ:スクロール時のアニメーションの種類をイン、アウト、または連続から選択します。
- モーションスタイル:「弱」や「ミディアム」などの動きの強度を選択します。

モバイルサイトにアニメーションを追加する
デスクトップサイトのパーツにアニメーションを追加するだけでなく、モバイルサイトのパーツにもアニメーションを追加することで、訪問者がどの端末からでも快適に閲覧できるようになります。
モバイル用のアニメーションは、小さい画面の解像度やサイズに合わせて特別に設計されているため、間隔を気にする必要はありません。
注意:
アニメーション効果はさまざまな画面サイズに最適化されるため、デスクトップで追加したアニメーション効果は、モバイルサイトには引き継がれません。モバイルサイトでもパーツをアニメーション化するには、以下の手順に従ってください。
モバイルでアニメーションを追加する方法:
- モバイルエディタにアクセスします。
- 該当するパーツを選択します。
- 「アニメーション」アイコン をクリックします。
- 利用可能なオプションからアニメーションを選択します。

Velo に関する重要なお知らせ:
Velo(コード)を使用してパーツを表示または非表示にする場合は、そのアニメーションも Velo で設定する必要があります。