Wix Studio エディタ:ループアニメーションを追加する
読了時間:4分
連続的にループするアニメーションを使用して、デザインに躍動感を与えましょう。訪問者に注目してもらいたいどの要素にもループアニメーションを追加することができます。
![ライブサイトに表示されたループアニメーションを含むテキストマスク要素の例](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/27/f409ba72-a6c8-4700-af6a-881d90c3955e/39264414-a46e-4610-9022-713ffcbb4283.gif)
この記事では、以下の項目について説明します:
ヒント:
デスクトップブレイクポイントにアニメーションを追加すると、小さいブレイクポイントにも適用されます。ただし、ブレイクポイントごとに異なるアニメーションを設定したり、同じアニメーションをカスタマイズしたりすることは可能です。
ループアニメーションを追加する
ループアニメーションは特定の要素やセクション、またはサイトページ全体に追加することができます。
ループアニメーションを追加する方法:
- 該当する要素またはセクションを選択します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。
- 「操作」タブ
をクリックします。
- 「ループ」下の「+追加」をクリックします。
- リストからアニメーションを選択します。
ヒント:アニメーションにマウスオーバーすると、アニメーションのプレビューが表示されます。
![利用可能なループアニメーションと、マウスオーバーするとプレビューが表示される GIF](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/07/27/8c036724-b23a-4181-acbb-ad26cd86a1cc/8b5b1d4d-f437-49bb-8662-60ed17f1f94f.gif)
ループアニメーションをカスタマイズする
アニメーションを選択したら、希望通りの動作になるように設定します。アニメーションの所要時間を選択したり、強度を設定したり、リピート間の遅延時間を追加したりできます。
ループアニメーションをカスタマイズする方法:
- 該当する要素、セクション、またはページを選択します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。
- 「操作」タブ
をクリックします。
- 変更したいアニメーションをクリックします。
- 「アニメーションを調整」をクリックして設定を変更します:
- 方向:アニメーションの方向を選択します(例:横、縦)。
- 強度:アニメーションの強弱を調整します。
- 所要時間:アニメーションの所要時間を変更します。
- リピート遅延時間:アニメーションの無限リピートの間に遅延時間(秒単位)を追加します。
- イージング:アニメーションがどの程度徐々にイーズイン・イーズアウトするかを選択します。
注意:
利用可能な設定は、選択したアニメーションによって異なります。
![「ブリーズ」ループアニメーションで利用可能な調整オプションのスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/07/27/1d953ea9-4b34-4367-a79a-0cbcca6e45c9/cfc29ad4-7a9c-4f6b-aa97-d36048f49c87.png)
ループアニメーションを削除する
ループアニメーションは要素設定パネルからいつでも削除できます。
ループアニメーションを削除する方法:
- 該当する要素、セクション、またはページを選択します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。
- 「操作」タブ
をクリックします。
- 該当するアニメーションにマウスオーバーし、「その他のアクション」アイコン
をクリックします。
- 「削除」をクリックします。
![要素設定パネルからループアニメーションを削除しているスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/07/27/e522b028-7d01-433e-b7e1-08f979e53d8f/13891867-0b1b-4662-a81c-99a0e62631de.png)