Wix エディタ：アニメーションを追加・カスタマイズする
読了時間：4分
アニメーションを使用して、サイトに命を吹き込みましょう。「フロート」や「ズームイン」などの効果を追加して、想像力に富んだ印象的なページを作成し、訪問者の注意を引き付けましょう。
デスクトップとモバイルサイトの両方で、さまざまなパーツにアニメーションを適用したり、同じパーツに異なる効果（エフェクト）を適用したりすることができます。モバイルサイトのアニメーションは、小さい画面に合わせて設定されているため、訪問者の心をつかむことができます。モバイルサイトでのアニメーション効果の詳細についてはこちら
この記事では、下記の項目について説明します：
パーツにアニメーションを追加する
パーツにアニメーションを追加して、サイトをダイナミックで魅力的なものにしましょう。アニメーションにはそれぞれ異なる効果があるため、異なる要素を組み合わせて、訪問者に印象を与えることができます。
アニメーションを追加する方法：
- エディタで該当するパーツを選択します。
- 「アニメーション」アイコン
をクリックします。 - 利用可能なオプションからアニメーションを選択します。
注意：
パーツからアニメーションを削除するには、パーツ上で「アニメーション」アイコン 
をクリックし、「なし」
をクリックします。
をクリックし、「なし」 をクリックします。ヒント：
グループを選択し、「アニメーション」アイコン をクリックすると、パーツのグループにアニメーションを追加することができます。
をクリックすると、パーツのグループにアニメーションを追加することができます。アニメーションをカスタマイズする
パーツにアニメーションを追加したら、サイトの雰囲気に合わせてカスタマイズできます。
強さ、方向、待機時間などの設定を調整して、インパクトを与え、訪問者を惹きつけましょう。
アニメーションをカスタマイズする方法：
- エディタで該当するパーツを選択します。
- 「アニメーション」アイコン をクリックします。
- 「カスタマイズ」をクリックし、オプションを使用してアニメーションを調整します：
- 強さ：ドロップダウンメニューをクリックし、再生時のアニメーションの強さを選択します。
- 方向：時計回りや右からなど、アニメーションが入る方向を選択します。
- 距離：スライダーを使用して、エフェクトの始点から終点までの距離を調整します。
- エフェクト時間：スライダーを使用して、アニメーションを再生する時間を調整します。
- 待機時間：スライダーをドラッグして、ページの読み込みからアニメーションの開始までの待機時間を調整します。
- 初回読み込みのみ：トグルをクリックして、ページが初めて読み込まれたときにのみアニメーションを表示するかどうかを設定します。
注意：
利用可能なカスタマイズオプションは、選択したアニメーションによって異なります。
モバイルサイトにアニメーションを追加する
デスクトップサイトのパーツにアニメーションを追加するだけでなく、モバイルサイトのパーツにもアニメーションを追加することで、訪問者がどの端末からでも快適に閲覧できるようになります。
モバイル用のアニメーションは、小さい画面の解像度やサイズに合わせて特別に設計されているため、間隔を気にする必要はありません。
注意：
デスクトップ版とモバイル版の両方のサイトでパーツをアニメーション化するには、それぞれのエディタを使用してエフェクトを追加する必要があります。デスクトップで追加したアニメーション効果は、モバイルとは異なる画面サイズに最適化されるため、モバイル版のサイトには引き継がれません。
モバイルでアニメーションを追加する方法：
- モバイルエディタにアクセスします。
- 該当するパーツを選択します。
- 「アニメーション」アイコン をクリックします。
- 利用可能なオプションからアニメーションを選択します。
重要：
- ヘッダー内のパーツに追加されたアニメーション効果は、そのパーツが最初に読み込まれたときにのみ表示されます。
- パーツが Velo を使用して非表示または表示されている場合は、そのアニメーションも Velo で設定する必要があります。Velo のパーツの詳細についてはこちら（英語）
アニメーションに問題がある場合：
こちらの手順に従って、ライブサイトでアニメーションが正常に機能するかご確認ください。
お役に立ちましたか？
|