Wix Studio エディタ：Lottie アニメーションファイルを追加・カスタマイズする
読了時間：4分
Lottie ファイルは、クライアントサイトに高画質のアニメーションを追加するのに最適なソースです。URL からアニメーションをインポートしたら、必要に応じてサイズを変更し、連続ループで再生するかどうかを決定できます。
この記事では、以下の項目について説明します：
始める前に：
アニメーションをインポートするには、LottieFiles アカウントが必要です。
LottieFiles からアニメーションをインポートする
必要な数だけ Lottie アニメーションを追加して、デザインを盛り上げましょう。LottieFiles からリンクをコピーし、Wix Studio エディタに直接貼り付けてください。アニメーションは新しいページ要素としてすぐに追加されます。
または、新しい Lottie アニメーション要素を追加し、関連する URL を設定パネルに貼り付けることもできます。
Lottie アニメーション要素を追加する方法：
- エディタ左側で「要素を追加」
をクリックします。 - 「埋め込み・SNS」をクリックします。
- 「Lottie アニメーション」をクリックします。
- 「Lottie アニメーション」横の「サイトに追加」アイコンをクリックします。
- （別のブラウザタブで）LottieFiles アカウントからアニメーションの URL をコピーします。
- エディタにアニメーションの URL を貼り付けます：
- エディタで Lottie アニメーション要素をクリックします。
- 「設定」アイコン
をクリックします。 - 「アニメーション URL」下に URL を貼り付けます。
- キーボードの Enter キーを押します。
次のステップ：
設定パネル上部の「動作をプレビュー」をクリックして、公開する前に表示を確認します。
ブレイクポイントを操作する場合：
Lottie アニメーションのサイズは、ブレイクポイントごとにカスタマイズできるので、どの画面でも理想的に表示されます。
Lottie アニメーションを変更する
別の Lottie アニメーションに切り替えたい場合は、要素の設定パネルで新しい URL を貼り付けることで簡単に変更できます。
アニメーションを変更する方法：
- Lottie アニメーション要素を選択します。
- 「設定」アイコン をクリックします。
- 「アニメーション URL」下に新しいアニメーションの URL を貼り付けます。
アニメーションがループ再生するように設定する
Lottie アニメーションの再生方法を 1回だけにするか、ループ再生にするかを選択できます。
アニメーションの再生方法を設定する方法：
- Lottie アニメーション要素を選択します。
- 「設定」アイコン をクリックします。
- 「ループ再生」横のトグルをクリックして、オンまたはオフにします。
Lottie アニメーションに代替テキストを追加する
アニメーションに代替テキストを追加する方法：
- Lottie アニメーション要素を選択します。
- 「設定」アイコン をクリックします。
- 「アニメーションテキスト」までスクロールダウンします。
- 「アニメーションの代替テキストを入力してください」下にテキストの説明を入力します。
- キーボードの Enter キーを押します。
お役に立ちましたか？
|