Wix エディタ:サイトに Lottie アニメーションをインポートする
読了時間:3分
Lottie アニメーションは、サイトに追加できる高画質のアニメーションファイルです。LottieFiles アカウントからアニメーションを直接インポートすることで、コードを追加することなく、ユニークで活気のあるページを作成することができます。
![「レイラのスキューバアドベンチャー」と書かれたテキスト付きのライブサイト。クラゲと泡のアニメーションが再生されています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/05/16/9bf442b0-1550-4882-9f57-8af73cce3b88/c8c72d58-3089-4074-b23a-995d771bac07.gif)
始める前に:
アニメーションをインポートするには、LottieFiles アカウントが必要です。
ステップ 1 | Lottie アニメーションを追加する
「追加」パネルから Lottie アニメーション要素をサイトに追加することから始めましょう。
Lottie アニメーションをサイトに追加する方法:
- エディタ左側で「追加」
をクリックします。
- 「埋め込みコード」を選択します。
- 「アニメーション」までスクロールダウンします。
- 「Lottie の埋め込み」をクリックしてサイトに追加します。
![エディタの追加パネル。サイトに Lottie を追加するオプションの上にマウスオーバーしているカーソル。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/06/20/94528412-8968-41df-bd50-6a99fa7776e7/ba3194d0-ecd7-4c88-afcc-38d8e8d8c139.png)
ステップ 2 | アニメーション URL をコピーする
サイトに要素を追加したら、Lottie の URL をコピーして選択したアニメーションをインポートします。自分のデザインから選択するか、LottieFiles.com で入手可能な数百もの無料アニメーションの 1つをインポートします。
アニメーションの URL を取得してコピーする方法:
- LottieFiles アカウントにログインします。
- アニメーションを選択します。
- 「Lottie Animation URL」下にあるコピーアイコン
をクリックします。
![lottiefiles.com にあるアニメーション URL のスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/05/16/b0157265-3a42-4824-8320-125445a6ba4c/b5b99758-02de-4d48-89f1-42cee0dd50b3.png)
ご存知でしたか?
Lottie アニメーションはベクターファイルであるため、デスクトップサイトとモバイルサイトの両方で画質を維持できます。
ステップ 3 | Wix サイトにファイルをインポートする
アニメーションの URL をコピーしたら、Wix サイト上の要素に貼り付けて、訪問者に楽しくユニークな体験を提供しましょう。
サイトにファイルをインポートする方法:
- エディタで Lottie アニメーション要素を選択します。
- 「設定」アイコン
をクリックします。
- 「アニメーション URL」下にファイルの URL を貼り付けます。
- キーボードの Enter キーを押します。
![エディタの「Lottie 設定」パネル。URL フィールドにマウスオーバーしているカーソル。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/06/20/665f26d1-dec6-463f-b827-596f669657a6/d3e8006d-4a9f-499b-b426-3d1bf21e8f60.png)
次のステップ:
- パネル上部の「動作をプレビュー」をクリックして、アニメーションの再生方法を確認します。
- 設定を使用して、アニメーションの再生方法を調整します。Lottie アニメーションの調整についての詳細はこちら