ホームページにLottieアニメーションを配置するにはどうすればよいですか？

サポート
1

こんにちは！

ロゴのアニメーション版をデザインしました。ぜひこちらでご覧ください here！

これを Lottie ファイルのアニメーションとして .json 形式に変換し、ヘッダーにそのアニメーションを配置したいと考えています。
以下のコードをページに貼り付けるだけで実現できるはずです：

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets3.lottiefiles.com/packages/lf20_KrQ5B2.json"  background="transparent"  speed="1"  style="width: 600px;" autoplay >
</lottie-player>

しかし、Discourse プロジェクトで試しても動作しません。
なぜか理解できません。外部リソースを呼び出しているため、Discourse の環境に依存しないはずですよね？

他のトピックでは、カテゴリアイコンの代わりに Lottie アニメーションを使用できないという Discourse ユーザーの報告がありました。
しかし、私の場合、なぜ動作しないのかがわかりません（コードを body タグ内に貼り付ければ動作するはずです）。
どなたかお手伝いいただけますでしょうか？:slight_smile:

2

ロゴのアニメーションの使い方については確信が持てませんが、Discourse サイトでスクリプトを実行するには、content security policy script src サイト設定に https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js を追加する必要があります。そうして、スクリプトをテーマのヘッダーセクションに追加すると、私の環境ではアニメーションが表示されます。

3

問題なく動作しています！
ご回答ありがとうございます :slight_smile: