Wix Studio エディタ:エントランスアニメーションを追加する
読了時間:4分
要素にエントランスアニメーションを追加して、訪問者に魅力的な体験を提供しましょう。要素が最初に表示されたときにアニメーションが表示されるため、注意を引くことができます。多くの種類から選択し、クライアントのニーズに合わせてカスタマイズできます。
![ライブサイトのセクションの例で、各要素に独自のエントランスアニメーションがあります。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/20/08cda0fe-8d63-4b62-8182-264266262d50/3840b03b-dd9e-4675-bb32-0c42d128a960.gif)
この記事では、以下の項目について説明します:
エントランスアニメーションを追加する
特定の要素やセクション、またはサイトページ全体にエントランスアニメーションを追加できます。
エントランスアニメーションを追加する方法:
- 該当する要素、セクション、またはページを選択します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。
- 「操作」タブ
をクリックします。
- 「エントランス」下の「+追加」をクリックします。
- リストからアニメーションを選択します。
ヒント:アニメーションにマウスオーバーすると、アニメーションのプレビューが表示されます。 - (オプション)下部の「アニメーションを調整」をクリックして、方向、遅延、所要時間などの設定をカスタマイズします。
![アニメーションを選択しています](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/b05f5084-8296-4ca9-8f22-b63e9f9efe42/2023/07/20/b2bacfc1-540e-4fc9-b487-1b0cef2bf695/744868ce-8674-4092-ba48-1261d90b03ba.png)
エントランスアニメーションをカスタマイズする
アニメーションを選択したら、希望通りの動作になるように設定します。アニメーションの所要時間、開始時間、強度などを選択します。
エントランスアニメーションをカスタマイズする方法:
- 該当する要素、セクション、またはページを選択します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。
- 「操作」タブ
をクリックします。
- 変更したいアニメーションをクリックします。
- 「アニメーションを調整」をクリックして設定を変更します:
- 方向:アニメーションの方向を決定します。
ヒント:アニメーションの種類に応じて、方向を度数単位で設定する(例: 180°)か、ドロップダウンからオプションを選択します(例:時計回り)。 - 所要時間:アニメーションの所要時間を変更します。
- 遅延時間:ページ読み込みからアニメーションの開始までの時間を設定します。
- イージング:アニメーションがどの程度徐々にイーズインまたはイーズアウトするかを選択します。
- 方向:アニメーションの方向を決定します。
注意:
利用可能なレイアウトオプションは、選択したアニメーションによって異なります。
![リヴィールのエントランスアニメーションをカスタマイズする際に利用可能な設定を示したスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/b05f5084-8296-4ca9-8f22-b63e9f9efe42/2023/07/20/c20ed4a3-f611-494c-86c2-bff60659f1d2/0b4be75e-28b6-4ef6-951d-8796cc2b9f23.png)
エントランスアニメーションを削除する
エントランスアニメーションは、要素設定パネルからいつでも削除できます。
エントランスアニメーションを削除する方法:
- 該当する要素、セクション、またはページを選択します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。
- 「操作」タブ
をクリックします。
- (操作タブで)該当するアニメーションにマウスオーバーし、「その他のアクション」アイコン
をクリックします。
- 「削除」をクリックします。
![要素設定パネルでアニメーションを選択して削除する方法を示したスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/b05f5084-8296-4ca9-8f22-b63e9f9efe42/2023/07/20/78dc43b8-5f46-4263-8b63-713eb6e3e5f1/4940d302-f9e1-4949-93dc-3f8e5fbcbe91.png)