Wix Studio エディタ:アニメーションについて
読了時間:2分
Wix のアニメーションをデザインに取り入れることで、デザインをさらにレベルアップさせることができます。Wix Studio エディタでは、表示させたいタイミングに基づいて 5種類のアニメーションを提供しています。
訪問者が要素にマウスオーバーしたり、クリックしたり、スクロールしたりしたときにアニメーションを表示します。また、要素が最初に読み込まれたときのエントランスアニメーションや、継続的にループするアニメーションを追加することもできます。
エントランスアニメーション
要素にエントランスアニメーションを追加して、訪問者に魅力的な体験を提供しましょう。要素が最初に表示されたときにアニメーションが表示されるため、注意を引くことができます。多くの種類から選択し、クライアントのニーズに合わせてカスタマイズできます。
![ページ全体に適用され、読み込み時に表示されるエントランスアニメーションの例](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/20/80cb1c8e-40af-4268-bbcf-632ab45c5c17/b78bc7bc-cbd1-43b7-82b1-d2774712bbe3.gif)
ホバー・クリック操作
訪問者が要素にマウスオーバーまたはクリックしたときに表示されるクールなエフェクトを追加します。ホバー / クリックで、要素を変形させたり、移動させたり、新しいコンテンツを表示させたりすることができます。
デザイン済みのエフェクトから選択するか、正確な仕様でカスタムエフェクトを作成します。タイミング、順序、イージングを管理してすべてを結び付け、エディタから直接プレビューします。
要素間のインタラクションを作成することもできるため、ある要素にマウスオーバーまたはクリックすると、別の要素がアニメーション化されます。
以下の例では、段落にマウスオーバーすると、ボタンと画像が移動します。
![ライブサイトでアニメーションの様子を示した 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)
スクロールアニメーション
スクロールによるアニメーションでエンゲージメントを高め、面白いエフェクトを作成しましょう。アニメーションの進行状況は、訪問者が上下にスクロールすると前後に移動するスクロール位置に直接関連しています。
要素間のインタラクションを作成することもできるため、ある要素をスクロールすると、別の要素がアニメーション化されます。
以下の例では、タイトルまでスクロールするとリピーターが大きくなります。
![ライブサイトでのスクロールアニメーションの例](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/27/7f03d14c-ca43-4837-9e5f-a9a023a228df/23e05c1b-2649-4ecf-9384-8ca3c34deab0.gif)
ループアニメーション
連続的にループするアニメーションを使用して、デザインに躍動感を与えましょう。訪問者に注目してもらいたいどの要素にもループアニメーションを追加することができます。
![ライブサイトに表示されたループアニメーションを含むテキストマスク要素の例](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/27/f409ba72-a6c8-4700-af6a-881d90c3955e/39264414-a46e-4610-9022-713ffcbb4283.gif)