header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image

Wix Studio エディタ:アニメーションについて

2分
Wix のアニメーションをデザインに取り入れることで、デザインをさらにレベルアップさせることができます。Wix Studio エディタでは、表示させたいタイミングに基づいて 5種類のアニメーションを提供しています。
訪問者が要素にマウスオーバーしたり、クリックしたり、スクロールしたりしたときにアニメーションを表示します。また、要素が最初に読み込まれたときのエントランスアニメーションや、継続的にループするアニメーションを追加することもできます。

エントランスアニメーション

要素にエントランスアニメーションを追加して、訪問者に魅力的な体験を提供しましょう。要素が最初に表示されたときにアニメーションが表示されるため、注意を引くことができます。多くの種類から選択し、クライアントのニーズに合わせてカスタマイズできます。
ページ全体に適用され、読み込み時に表示されるエントランスアニメーションの例

ホバー・クリック操作

訪問者が要素にマウスオーバーまたはクリックしたときに表示されるクールなエフェクトを追加します。ホバー / クリックで、要素を変形させたり、移動させたり、新しいコンテンツを表示させたりすることができます。
デザイン済みのエフェクトから選択するか、正確な仕様でカスタムエフェクトを作成します。タイミング、順序、イージングを管理してすべてを結び付け、エディタから直接プレビューします。
要素間のインタラクションを作成することもできるため、ある要素にマウスオーバーまたはクリックすると、別の要素がアニメーション化されます。
以下の例では、段落にマウスオーバーすると、ボタンと画像が移動します。
ライブサイトでアニメーションの様子を示した GIF。

スクロールアニメーション

スクロールによるアニメーションでエンゲージメントを高め、面白いエフェクトを作成しましょう。アニメーションの進行状況は、訪問者が上下にスクロールすると前後に移動するスクロール位置に直接関連しています。
要素間のインタラクションを作成することもできるため、ある要素をスクロールすると、別の要素がアニメーション化されます。
以下の例では、タイトルまでスクロールするとリピーターが大きくなります。
ライブサイトでのスクロールアニメーションの例

ループアニメーション

連続的にループするアニメーションを使用して、デザインに躍動感を与えましょう。訪問者に注目してもらいたいどの要素にもループアニメーションを追加することができます。
ライブサイトに表示されたループアニメーションを含むテキストマスク要素の例
ページ全体に適用され、読み込み時に表示されるエントランスアニメーションの例
ライブサイトでアニメーションの様子を示した GIF。
ライブサイトでのスクロールアニメーションの例
ライブサイトに表示されたループアニメーションを含むテキストマスク要素の例