Portfolio BLog: C5log

Lottieを表示してみよう

Lottie-webライブラリで、Lottieを表示する最小限のコード

<div class="lottie"></div> <!-- Lottieの入れ物となる要素を配置する(空でOK) -->

<!-- Lottie-webライブラリの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.11.0/lottie.min.js"></script>

<script>
  lottie.loadAnimation({
    container: document.querySelector('.lottie'), /* Lottieの入れ物要素を指定する */
    renderer: 'svg', /* SVGとして描画する */
    loop: true, /* アニメーションを繰り返すかどうか(true: 繰り返す、false: 一度だけ、整数: 繰り返し回数-1) */
    autoplay: true, /* 自動的にアニメーションを再生するかどうか(true: 再生する、false: 再生しない) */
    path: 'https://assets6.lottiefiles.com/packages/lf20_gfgnjnyb.json' /* LottieのJSONファイルのパスを指定する  */
  });
</script>