AirBnBが監修している新しいアニメーションフォーマットであるLottie。Gifアニメより高機能かつ軽量なので使い勝手がいいです。 またベクターなので解像度に依存しないのも魅力です。
Lottieの埋め込みには2種類があります。LottieプレイヤーとDotLottieプレイヤーです。DotLottieのほうがより軽量のアニメーションになります。
まず、Lottieサイトのダッシュボードからコピーした、埋め込みコードをhtmlの表示したい位置に貼り付けます。
<script>タグと<lottie-player>もしくは<dotlottie-player>タグが貼り付けられると思います。
<lottie-player>もしくは<dotlottie-player>のsrc属性にダウンロードしたJSONファイルのファイルパスを設定します。
こうすることで、lottieのアニメーションファイルそのものを自分でホストすることになります。lottieサイトの自分のアカウント状態に依存せずにアニメーションを埋め込むことができます。
<lottie-player>および<dotlottie-player>タグには、loop、autoplay、controls属性など、通常のvideoタグにつけられるような属性がつけられます。
<lottie-player>および<dotlottie-player>タグはブロック形式要素なので、通常のdivのようにcssにて形成ができます。
LottieはCORS（Cross-Origin Resource Sharing）：オリジン間リソース共有ポリシーのセキュリティの都合上、サーバーから起動したhtmlでないとアニメーションを起動してくれません。
ローカルでテストする場合はVSCodeのLive Serverプラグインで起動するのが簡単です。またnode.jsやpythonにてローカルサーバを立ち上げることも可能です。
node.jsの場合…
・公式サイトよりnode.jsをインストール
・ターミナルで以下を実行
・npm install -g http-server
・http-server
・[localhost：表示されたポート] にアクセス
pythonの場合
・公式サイトよりpythonをインストール
・ターミナルで以下を実行
・python -m http.server
・[localhost:表示されたポート] にアクセス
Lottie Playerの埋め込み
<div class="lottie-playler">
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="cat.json" background="#ffffff" speed="1" style="width: 300px; height: 300px" loop autoplay controls direction="1" mode="normal"></lottie-player>
</div>
Dot Lottie Playerの埋め込み
<div class="dotlottie-player">
<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
<dotlottie-player src="walk.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></dotlottie-player>
</div>