Wix Studio エディタ：プリセットクリックまたはホバー操作を追加する

この記事内

「操作」を追加して、訪問者がクリックまたはマウスオーバーした際に、要素がアニメーション化されるようにします。要素を簡単にアニメーション化したい場合は、プリセットから「拡大」、「ムーブ」、「フェード」などを選択し、好みに合わせて調整することができます。

アニメーション化する要素には、訪問者がクリックやマウスオーバーする要素だけでなく、ページ上の別の要素を選択することもできます。いずれの場合も、外観やタイミングなどを細かく制御できるため、ライブサイトに効果的なエフェクトを追加することができます。

利用可能なアニメーションプリセットにはどのようなものがありますか？

まず、操作をトリガーする要素を選択します。これは、訪問者がアニメーションを表示する前にマウスオーバーまたはクリックする要素です。次に、要素設定パネルに移動し、新しい操作を追加します。

ヒント：

要素に複数の操作を追加して、ホバーまたはクリックで異なるアニメーションをトリガーすることもできます。

要素とトリガーを選択したら、その要素がトリガーされた際の操作を設定します。クリック時またはマウスオーバー時のアニメーションの挙動を選択し、アニメーションが適用される要素を選択して、プリセットからアニメーションを選択します。

注意：

利用可能なアニメーションは、選択した要素によって異なります。

（設定パネルで）「ホバー時」と「クリック時」の動作を選択します：
- アニメーションを開始：要素をクリックまたはマウスオーバーすると、選択したアニメーションが開始されます。
- アニメーションをリセット：要素をクリックまたはマウスオーバーすると、適用されていたアニメーションがリセットされます。
- トグルのオン / オフ：要素をクリックするとアニメーションが有効となり、もう一度クリックするとアニメーションが無効となります。
  注意：このオプションは、クリック操作でのみ使用できます。
「アニメーション要素」を選択します：
- 選択した要素自体にアニメーションを適用する：要素名をクリックします（選択した要素名の横に「（同パーツ）」と表示されます）。
- ページ上の別の要素にアニメーションを適用する：ドロップダウンから要素を選択するか、「キャンバスで選択」をクリックしてページ上から選択します。
  ヒント：「Cmd」または「Ctrl」キーを押しながら子要素を選択します。
アニメーションを選択します：
1. 「プリセット」タブをクリックします。
2. リストからアニメーションを選択します。

ヒント：

クリックまたはホバーで表示する要素を設定すると、キャンバス上に市松模様のオーバーレイで表示されます。これは、要素が最初は透明であることを示します。

この表示はいつでもオフにすることができます。Wix Studio アイコン

をクリックし、「表示」にマウスオーバーし、「透明な要素」をクリックします。

アニメーションを設定したら、必要に応じてその動作をカスタマイズします。「所要時間」「遅延時間」、「イージング」などの設定を調整して、効果的なアニメーションに仕上げることができます。

注意：

利用可能な設定は、選択したプリセットアニメーションによって異なります。