Wix Studio エディタ：メディア背景に WebGL エフェクトを追加する
9分
メディア背景を息をのむようなデザインに変えるように設計された WebGL エフェクトを取り入れて、クライアントのプロジェクトを一新しましょう。これらのエフェクトは最適なパフォーマンスを保証しながら、サイト訪問者を魅了します。さまざまなプリセットから選択し、プロパティを調整して、いつ有効にするかを決定します。スクロール時に自動的に、または訪問者のマウスの動きで有効にすることもできます。
WebGL エフェクトを追加する
「要素設定パネル」に移動して、セクションのメディア背景に WebGL エフェクトを追加します。作成したいデザインや操作に応じて、さまざまなプリセットから選択できます。
注意：
スクロールエフェクトの背景と WebGL エフェクトを組み合わせることはできません。
WebGL エフェクトを追加する方法：
- 該当するセクションの背景に画像または動画を追加します。
注意：WebGL エフェクトは、GIF 背景や、タイルとしてフィットするように設定されたメディア背景ではサポートされていません。 - キャンバス上のセクションを選択します。
- WebGL エフェクトを適用します：
- エディタ右上の「要素設定パネルを開く」アイコン
をクリックします。
- 「アニメーションとエフェクト」タブ
をクリックします。 - 「WebGL エフェクト」下の「＋追加」をクリックします。
- リストからエフェクトを選択します。
- エディタ右上の「要素設定パネルを開く」アイコン
ヒント：
プリセットアイコンにマウスオーバーして、どのように表示されるかをプレビューします。「アニメーションを調整」をクリックして、キャンバス上でエフェクトをプレビューすることもできます（「エディタでプレビュー」トグルが有効になっていることを確認してください）。
WebGL エフェクトをカスタマイズする
WebGL エフェクトをカスタマイズして、微妙な歪みを加えたり、大胆でダイナミックな動きを追加したりして外観や動作を微調整しましょう。各エフェクトには、強度、速度、方向など、独自の調整可能な設定があるので、コンテンツとの相互作用を完全に制御することができます。
一部のエフェクトでは、自動再生、スクロール、マウスの動き、または複数のアクションの組み合わせなど、クライアントのサイトでのトリガーを選択することができます。
WebGL エフェクトをカスタマイズする方法：
- 該当するセクションを選択します。
- エディタ右上の「要素設定パネルを開く」アイコン をクリックします。
- 「アニメーションとエフェクト」タブ をクリックします。
- 変更したいエフェクトをクリックします。
- 「アニメーションを調整」をクリックして設定を変更します：
ノイズトレース
液化
スリットスキャン
をクリックしてトリガーを追加し、トリガーの横にある「削除」アイコン 
をクリックしてトリガーを削除します。
RGB オーブ
リップル
RGB スプリット
パネル下部の「エディタでプレビュー」トグルはデフォルトで有効になっており、キャンバス上でエフェクトの動作を確認することができます。
WebGL エフェクトを削除する
以前にセクション背景に追加した WebGIF エフェクトは、いつでも削除することができます。
WebGL エフェクトを削除する方法：
- 該当するセクションを選択します。
- エディタ右上の「要素設定パネルを開く」アイコン をクリックします。
- 「アニメーションとエフェクト」タブ をクリックします。
- WebGL エフェクト横の「その他のアクション」アイコン
をクリックします。 - 「削除」をクリックします。
よくある質問
Wix Studio エディタでの WebGL エフェクトに関する詳細は、以下の質問をクリックしてください。
WebGL エフェクトはタッチスクリーン端末でも機能しますか？
エディタで WebGL エフェクトを追加するオプションがグレーで表示されるのはなぜですか？
