![見出し画像](https://assets.st-note.com/production/uploads/images/75480117/rectangle_large_type_2_eacc1cbfc6dbd65d0e4ed6cbd61acc78.png?width=1200)
【Wix EditorX】 Lottieアニメーションを配置する方法
今回は、Lottieアニメーションをwixに配置する場合の手順を紹介します。
EditorXでの基礎アニメーションに触れてきましたが、回転・ループのように、不可能なこともチラホラ見つかりました。
Lottieを使えば、SVGなので解像度を気にせずに、GIFやMP4よりも軽い、リッチなアニメーションを加えることができます。
とっても簡単にできたので、Wixでサイト制作をする方はぜひ使ってみてください!
1. Lottieのアニメーションを用意する
自分でAEなどでアニメーションを作り、書き出しておきます。
Lottieで書き出す方法は下記を参考にしてみてください。
▼ 参考:
またLottieFilesでは無料・有料の素材がDLできるので、こちらを使ってみるのも◎
2. EditorXで「ウィジェットの埋め込み」を呼び出す
EditorXを開き、アニメーションを配置したい部分に
下記の手順で「ウィジェットの埋め込み」を呼び出します。
![](https://assets.st-note.com/img/1648097459896-x3NZ7VVOqL.png)
↓
![](https://assets.st-note.com/img/1648097444834-95oCJX0O4F.png?width=1200)
3.「コードを入力」欄にコードを貼付け
![](https://assets.st-note.com/img/1648517596989-0xmpSj9oqY.png)
↓
![](https://assets.st-note.com/img/1648517605669-AmwvOD4P8f.png?width=1200)
↓
![](https://assets.st-note.com/img/1648517612580-lx0FI7NObN.png?width=1200)
↓
![](https://assets.st-note.com/production/uploads/images/75279170/picture_pc_d55a78c60ba3a3988b974414a9188638.gif)
このようにとっても簡単なステップで、Lottieアニメーションを組み込むことができました!
また「マウスオーバーで再生する」「スクロールで再生・巻き戻しする」など、操作と紐づけることもできそうです。
今後のデザイン提案に生かせそうな機能ですね、改めてWixいいなと思いました。
今後も色々試してみたいと思います!
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか?