Wix ヘルプセンター
    ホーム
  1. サイトの作成
  2. Wix エディタ
  3. その他
    4. Wix エディタ：Lottie アニメーションをカスタマイズ・調整する

Wix エディタ：Lottie アニメーションをカスタマイズ・調整する

読了時間：4分
Lottie アニメーションをインポートしたら、希望通りの見た目と動作になるよう調整します。ループ再生にするか、1回だけ再生するかを決め、ページの読み込み時にアニメーションが目立つようにエフェクトを適用することができます。
この記事では、下記の項目について説明します：

Lottie アニメーションを変更する

Lottie アニメーションを変更したい場合は、要素の設定パネルで別の URL を貼り付けることで簡単に変更できます。

アニメーションを変更する方法：

  1. LottieFiles アカウントにログインし、アニメーションのリンクをコピーします。
  2. エディタで Lottie 要素をクリックします。
  3. 「設定」アイコン  をクリックします。
  4. 「アニメーション URL」下に新しい URL を貼り付けます。
  5. キーボードの Enter キーを押します。
Lottie 設定パネル。URL フィールドにマウスオーバーしているカーソル。
ヒント：
「アニメーションを変更」をクリックすると、新しいブラウザタブが開き、LottieFiles に直接移動します。

アニメーションがループ再生するように設定する

サイトの雰囲気によっては、アニメーションをループ再生するように設定することもできます。これは、訪問者がページを開いている間、継続して再生されることを意味します。この設定を無効にして、ページの読み込み時に一度だけ再生されるようにすることもできます。

ループ再生を有効 / 無効にする方法：

  1. エディタで Lottie アニメーションをクリックします。
  2. 「設定」アイコン  をクリックします。
  3. 「ループ再生」の横にあるトグルをクリックして、オンとオフを切り替えます。
Lottie 設定パネル。「ループ再生」トグルにマウスオーバーしているカーソル。

アニメーション効果を追加する

Lottie の埋め込みには、独自のアニメーション効果が付属しています。ただし、Wix エディタからさらにエントランスアニメーションを追加することができます。これらのエフェクトはサイトの読み込み時に表示され、元のアニメーションの再生をキャンセルしたり、妨げたりすることはありません。

アニメーション効果を追加する方法：

  1. エディタで Lottie アニメーションをクリックします。
  2. 「アニメーション」アイコン  をクリックします。
  3. パネルからエフェクトを選択します。
  4. （オプション）「カスタマイズ」をクリックして、エフェクトの設定を調整します。
アニメーションパネル。「カーブ」エフェクトをクリックしているカーソル。
別のアニメーションに変更したい場合：
パネルで「なし」をクリックすると、余分なアニメーション効果を削除できます。

Lottie アニメーションに代替テキストを追加する

代替テキストとは、要素の説明文です。Lottie アニメーションに代替テキストを追加することで、スクリーンリーダーと検索エンジンに確実に読み取らせることができ、サイトのアクセシビリティや SEO ランキングを向上させることができます。

アニメーションに代替テキストを追加する方法：

  1. エディタで Lottie アニメーションをクリックします。
  2. 「設定」アイコン  をクリックします。
  3. 「アニメーションの代替テキストを入力してください」下にテキストの説明を入力するか、貼り付けます。
  4. キーボードの Enter キーを押します。
Lottie 設定パネル。代替テキストフィールドにマウスオーバーしているカーソル。

お役に立ちましたか？

|
この記事では下記を説明します：
  • Lottie アニメーションを変更する
  • アニメーションがループ再生するように設定する
  • アニメーション効果を追加する
  • Lottie アニメーションに代替テキストを追加する