Wix Studio エディタ:プリセットクリックまたはホバー操作を追加する
読了時間:6分
「操作」を追加して、訪問者がクリックまたはマウスオーバーした際に、要素がアニメーション化されるようにします。要素を簡単にアニメーション化したい場合は、プリセットから「拡大」、「ムーブ」、「フェード」などを選択し、好みに合わせて調整することができます。
アニメーション化する要素には、訪問者がクリックやマウスオーバーする要素だけでなく、ページ上の別の要素を選択することもできます。いずれの場合も、外観やタイミングなどを細かく制御できるため、ライブサイトに効果的なエフェクトを追加することができます。
![ライブサイトでアニメーションの様子を示した GIF。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/05/01/fb00c2e2-b82d-4e8b-9ade-d785e42e9746/0090f6ba-a0ae-4d78-99a8-c3fe41d27454.gif)
ステップ 1 | トリガー(クリックまたはホバー)を追加する
まず、操作をトリガーする要素を選択します。これは、訪問者がアニメーションを表示する前にマウスオーバーまたはクリックする要素です。次に、要素設定パネルの「操作」タブに移動し、新しい操作を追加します。
ヒント:
要素に複数の操作を追加して、ホバーまたはクリックで異なるアニメーションをトリガーすることもできます。
トリガーを追加する方法:
- 操作をトリガーする要素を選択します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。
- 「操作」タブ
をクリックします。
- 「ホバー」または「クリック」を選択します。
- 「+追加」をクリックします。
![新しいホバーまたはクリック操作を追加している、要素設定パネルの「操作」タブのスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/09/15/ee7d2495-ffb9-44a9-8782-3d5ce5d86a59/3312e80b-a45d-458e-bef6-eeb15a93b5ef.png)
ステップ 2 | 操作を設定する
要素とトリガーを選択したら、その要素がトリガーされた際の操作を設定します。クリック時またはマウスオーバー時のアニメーションの挙動を選択し、アニメーションが適用される要素を選択して、プリセットからアニメーションを選択します。
注意:
利用可能なアニメーションは、選択した要素によって異なります。
操作を設定する方法:
- (操作設定パネルで)「ホバー時」と「クリック時」の動作を選択します:
- アニメーションを開始:要素をクリックまたはマウスオーバーすると、選択したアニメーションが開始されます。
- アニメーションをリセット:要素をクリックまたはマウスオーバーすると、適用されていたアニメーションがリセットされます。
- トグルのオン / オフ:要素をクリックするとアニメーションが有効となり、もう一度クリックするとアニメーションが無効となります。
注意:このオプションは、クリック操作でのみ使用できます。
- 「アニメーション要素」を選択します:
- 選択した要素自体にアニメーションを適用する:要素名をクリックします(選択した要素名の横に「(同パーツ)」と表示されます)。
- ページ上の別の要素にアニメーションを適用する:ドロップダウンから要素を選択するか、「キャンバスで選択」をクリックしてページ上から選択します。
ヒント:「Cmd」または「Ctrl」キーを押しながら子要素を選択します。
- アニメーションを選択します:
- 「プリセット」タブをクリックします。
- リストからアニメーションを選択します。
![プリセット操作にマウスオーバーするとプレビューが表示されることを示した GIF](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/09/15/1103ad93-e177-4a28-a60d-d3378824ceca/e9f9f2f3-9a38-4e65-af1a-166d561fdc60.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)
ステップ 3 |(オプション)アニメーションを調整する
アニメーションを設定したら、必要に応じてその動作をカスタマイズします。「所要時間」「遅延時間」、「イージング」などの設定を調整して、効果的なアニメーションに仕上げることができます。
注意:
利用可能な設定は、選択したプリセットアニメーションによって異なります。
アニメーションを調整する方法:
- (要素設定パネルで)下部の「アニメーションを調整」をクリックします。
- 利用可能な設定を、好みに合わせてカスタマイズします:
- 遅延時間:スライダーをドラッグして、アニメーションが開始するまでの秒数を設定します。
- 所要時間:スライダーをドラッグして、アニメーションが継続する秒数を設定します。
- イージング:ドロップダウンから、アニメーションのイーズインとイーズアウトの方法を選択します。
- スケーリング:要素をどれくらい拡大または縮小するかを選択します。
- 角度:動きの角度を変更します。
- 距離:要素をページ上のデフォルトの位置から遠ざけたり近づけたりします。
- 方向:要素が回転する方向を変更します。
- (オプション)「プレビュー」をクリックしてアニメーションの表示を確認し、必要に応じて調整します。
![要素設定パネルで、プリセットのアニメーションの設定を調整する様子を示したスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/09/15/75b26bed-635c-4a2a-8873-128ba64789d4/217251a3-290b-4064-a80f-51c42b2f9ec2.png)
よくある質問
操作の作成に関する詳細については、以下の質問をクリックしてください。
選択した要素自体にアニメーションを適用した場合はどのように表示されますか?
ページ上の別の要素にアニメーションを適用した場合はどのように表示されますか?
1つの要素で他の複数の要素のアニメーションをトリガーすることはできますか?
1つの要素に複数のアニメーションを含めることはできますか?
お役に立ちましたか?
|