Wix Studio エディタ:カスタムクリックまたはホバー操作を作成する
読了時間:7分
「操作」を追加して、訪問者が要素をクリックまたはマウスオーバーした際のアニメーションを作成しましょう。操作はトリガーとなる同じ要素をアニメーション化することも、ページ上の別の要素をアニメーション化することもできます。
カスタム操作を使用すると、アニメーションをゼロからデザインすることができます。また、アニメーションのタイミングを制御して、より効果的にすることもできます。
![ライブサイトでのカスタムホバーアクション(操作)の例](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/05/01/a9172250-6510-45e0-b893-154cbdd9933c/50a9266e-ecee-4e1e-aa6f-6529ce3a7b3b.gif)
ステップ 1 | トリガー(クリックまたはホバー)を追加する
まず、操作をトリガーする要素を選択します。これにより、その要素がクリックまたはマウスオーバーのどちらの条件でアニメーション化されるかが決まります。
ヒント:
要素に複数の操作を追加して、ホバーまたはクリックで異なるアニメーションをトリガーすることもできます。
トリガーを追加する方法:
- 操作をトリガーする要素を選択します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。
- 「操作」タブ
をクリックします。
- 「ホバー」または「クリック」を選択します。
- 「+追加」をクリックします。
![新しいホバーまたはクリック操作を追加している、要素設定パネルの「操作」タブのスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/07/31/d075aa2e-69e6-488f-a4ac-25f9cf6ab765/aab086a3-f037-4aaa-bca3-1ca8f9ef2d37.png)
ステップ 2 | 操作を設定する
アニメーション化する要素、表示するアニメーション、ホバーまたはクリック時のアクション(アニメーションの適用、オン / オフの切り替えなど)を選択できます。
操作を設定する方法:
- 「ホバー時」または「クリック時」下のドロップダウンからオプションを選択します:
- アニメーションを開始:要素をクリックまたはマウスオーバーすると、選択したアニメーションが開始されます。
- トグルのオン / オフ:トグルの有効と無効を切り替えるように、要素をクリックするとアニメーションが有効となり、もう一度クリックするとアニメーションが無効となります。
- アニメーションをリセット:要素をクリックまたはマウスオーバーすると、適用されていたアニメーションがリセットされます。
- 「アニメーション要素」下のドロップダウンからオプションを選択します:
- 選択した要素自体にアニメーションを適用する:要素名をクリックします(選択した要素名の横に「(同パーツ)」と表示されます)。
- ページ上の別の要素にアニメーションを適用する:ドロップダウンから要素を選択するか、「キャンバスで選択」をクリックしてページ上から選択します。
ヒント:「Cmd」または「Ctrl」キーを押しながら子要素を選択します。
- 「カスタム」タブをクリックします。
- 「カスタムアニメーションを作成」をクリックします。
ヒント:
作成したカスタムアニメーションは、後で他の要素で使用できるように保存されます。
![まだアニメーションを保存していない場合のカスタムタブのスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/07/31/6cadcdbf-39e4-4ac9-8971-7ce47deeec55/d371a5dc-0304-4cb8-9b7b-e1b7634e5071.png)
ステップ 3 | アニメーションをカスタマイズする
次に、アニメーションをゼロから作成します。あらゆる種類のレイアウトとデザイン変換を追加して、要素のサイズ(スケーリング)、位置(移動)、角度(回転)、塗りつぶし色などを変更します。
また、作成したアニメーションを補完するために、要素の初期ステートをデザインすることもできます。これは、訪問者が操作する前の要素の読み込み時の様子です。さらに、アニメーションの継続時間とイージングを設定することで、全体をまとめることができます。
アニメーションをカスタマイズする方法:
- アニメーションのカスタマイズ方法を選択します:
要素のデザインを調整する
要素の初期ステートをデザインする
アニメーションの時間とイージングを設定する
2.(オプション)フローティングバーの「再生」
をクリックして、アニメーションをプレビューします。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/05/01/8c702daa-4fd3-477c-86f7-7b1d0cf14f2d/7f0ed3dc-3083-43a4-85ff-08300c76cfdc.png)
3. 準備ができたら、「完了」をクリックします。
![キャンバス上のアニメーションのプレビューを示した GIF](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/31/bff6fb27-8b32-480c-aadb-3f98d48ece6e/79c294e0-e9b3-4c55-8384-b845492b817b.gif)
ヒント:![ホバー時に表示されるように設定されたボタンで、Wix Studio エディタのキャンバス上で市松模様のオーバーレイとともに表示されます。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/09/04/8fe76097-c872-436d-88fc-035d90f3fcd1/d5c61611-0db7-4e1a-b0c3-af8e6dc9baa3.png)
クリックまたはホバーで表示する要素を設定すると、キャンバス上に市松模様のオーバーレイで表示されます。これは、要素が最初は透明であることを示します。
![ホバー時に表示されるように設定されたボタンで、Wix Studio エディタのキャンバス上で市松模様のオーバーレイとともに表示されます。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/09/04/8fe76097-c872-436d-88fc-035d90f3fcd1/d5c61611-0db7-4e1a-b0c3-af8e6dc9baa3.png)
この表示はいつでもオフにすることができます。Wix Studio アイコン
をクリックし、「表示」にマウスオーバーし、「透明な要素」をクリックします。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/09/04/0c626c40-da6b-4834-bcde-aeb4492fc503/5ace8822-fd66-4d57-85a8-c39e8be441cd.png)
よくある質問
操作を作成する際の詳細については、以下の質問をクリックしてください。
選択した要素自体にアニメーションを適用した場合はどのように表示されますか?
ページ上の別の要素にアニメーションを適用した場合はどのように表示されますか?
1つの要素で他の複数の要素のアニメーションをトリガーすることはできますか?
1つの要素に複数のアニメーションを含めることはできますか?
お役に立ちましたか?
|