Wix Studio エディタ：アニメーションについて
5分
Wix のアニメーションをデザインに取り入れることで、デザインをさらにレベルアップさせることができます。Wix Studio エディタでは、表示させたいタイミングに基づいて 5種類のアニメーションを提供しています。
訪問者が要素にマウスオーバーしたり、クリックしたり、スクロールしたりしたときにアニメーションを表示します。また、要素が最初に読み込まれたときのエントランスアニメーションや、継続的にループするアニメーションを追加することもできます。
注意：
アニメーションサイズは、ページが最初に読み込まれたときに特定のブラウザに応じて計算されます。ハンドルをドラッグしてブラウザウィンドウのサイズを変更すると、アニメーションが正しく表示されないことがあります。適切に表示するためにページを再読み込みすることが推奨されます。
エントランスアニメーション
要素にエントランスアニメーションを追加して、訪問者に魅力的な体験を提供しましょう。要素が最初に表示されたときにアニメーションが表示されるため、注意を引くことができます。多くの種類から選択し、クライアントのニーズに合わせてカスタマイズできます。
ホバー・クリック操作
訪問者が要素にマウスオーバーまたはクリックしたときに表示されるクールなエフェクトを追加します。ホバー / クリックで、要素を変形させたり、移動させたり、新しいコンテンツを表示させたりすることができます。
デザイン済みのエフェクトから選択するか、正確な仕様でカスタムエフェクトを作成します。タイミング、順序、イージングを管理してすべてを結び付け、エディタから直接プレビューします。
要素間のインタラクションを作成することもできるため、ある要素にマウスオーバーまたはクリックすると、別の要素がアニメーション化されます。
以下の例では、段落にマウスオーバーすると、ボタンと画像が移動します。
スクロールアニメーション
スクロールによるアニメーションでエンゲージメントを高め、面白いエフェクトを作成しましょう。アニメーションの進行状況は、訪問者が上下にスクロールすると前後に移動するスクロール位置に直接関連しています。
要素間のインタラクションを作成することもできるため、ある要素をスクロールすると、別の要素がアニメーション化されます。
以下の例では、タイトルまでスクロールするとリピーターが大きくなります。
ループアニメーション
連続的にループするアニメーションを使用して、デザインに躍動感を与えましょう。訪問者に注目してもらいたいどの要素にもループアニメーションを追加することができます。
メディア背景用の WebGL エフェクト
メディア背景を息をのむようなデザインに変えるように設計された WebGL エフェクトを取り入れて、クライアントのプロジェクトを一新しましょう。これらのエフェクトは最適なパフォーマンスを保証しながら、サイト訪問者を魅了します。さまざまなプリセットから選択し、プロパティを調整して、いつ有効にするかを決定します。スクロール時に自動的に、または訪問者のマウスの動きで有効にすることもできます。
よくある質問
アニメーションエフェクトに関する詳細については、以下の質問を選択してください。
どのような要素にアニメーションを追加することができますか？
どのように始めたらよいですか？
をクリックします。
を開き、アニメーションの種類を設定します。Wix アプリに関連する要素をアニメーション化することはできますか？
1つの要素に複数のアニメーションを含めることはできますか？
1つの要素でアニメーションを組み合わせるにはどうすればよいですか？
