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

Wix Studio エディタ:ループアニメーションを追加する

4分
連続的にループするアニメーションを使用して、デザインに躍動感を与えましょう。訪問者に注目してもらいたいどの要素にもループアニメーションを追加することができます。
ライブサイトに表示されたループアニメーションを含むテキストマスク要素の例
この記事では、以下の項目について説明します:
ヒント:
デスクトップブレイクポイントにアニメーションを追加すると、小さいブレイクポイントにも適用されます。ただし、ブレイクポイントごとに異なるアニメーションを設定したり、同じアニメーションをカスタマイズしたりすることは可能です。

ループアニメーションを追加する

ループアニメーションは特定の要素やセクション、またはサイトページ全体に追加することができます。

ループアニメーションを追加する方法:

  1. 該当する要素またはセクションを選択します。
  2. エディタ右上の「要素設定パネルを開く」矢印アイコン  をクリックします。
  3. 操作」タブ  をクリックします。
  4. ループ」下の「+追加」をクリックします。
  5. リストからアニメーションを選択します。
    ヒント:アニメーションにマウスオーバーすると、アニメーションのプレビューが表示されます。
利用可能なループアニメーションと、マウスオーバーするとプレビューが表示される GIF

ループアニメーションをカスタマイズする

アニメーションを選択したら、希望通りの動作になるように設定します。アニメーションの所要時間を選択したり、強度を設定したり、リピート間の遅延時間を追加したりできます。

ループアニメーションをカスタマイズする方法:

  1. 該当する要素、セクション、またはページを選択します。
  2. エディタ右上の「要素設定パネルを開く」矢印アイコン  をクリックします。
  3. 操作」タブ  をクリックします。
  4. 変更したいアニメーションをクリックします。
  5. アニメーションを調整」をクリックして設定を変更します:
    • 方向:アニメーションの方向を選択します(例:横、縦)。
    • 強度:アニメーションの強弱を調整します。
    • 所要時間:アニメーションの所要時間を変更します。
    • リピート遅延時間:アニメーションの無限リピートの間に遅延時間(秒単位)を追加します。
    • イージング:アニメーションがどの程度徐々にイーズイン・イーズアウトするかを選択します。
注意:
利用可能な設定は、選択したアニメーションによって異なります。
「ブリーズ」ループアニメーションで利用可能な調整オプションのスクリーンショット

ループアニメーションを削除する

ループアニメーションは要素設定パネルからいつでも削除できます。

ループアニメーションを削除する方法:

  1. 該当する要素、セクション、またはページを選択します。
  2. エディタ右上の「要素設定パネルを開く」矢印アイコン  をクリックします。
  3. 操作」タブ  をクリックします。
  4. 該当するアニメーションにマウスオーバーし、「その他のアクション」アイコン をクリックします。
  5. 削除」をクリックします。
要素設定パネルからループアニメーションを削除しているスクリーンショット
ライブサイトに表示されたループアニメーションを含むテキストマスク要素の例
利用可能なループアニメーションと、マウスオーバーするとプレビューが表示される GIF
「ブリーズ」ループアニメーションで利用可能な調整オプションのスクリーンショット
要素設定パネルからループアニメーションを削除しているスクリーンショット