2週間前に投稿

Lottie interactivity library with Lottie animations

この記事は約 3 分で読めます。

4.5

「Lottie playerを使って
アニメーションを表示」と言う
記事をご紹介いたしましたが、
今日は
interactivity libraryを使用して、
アニメーションに
インタラクティブ機能を追加してみます。

確認事項

interactivity libraryを
使用するには、
lottie-playerが必要です。
プレーヤーのリポジトリは
こちらをクリックしてください。

以下が、
lottie-player のCDN。

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

interactivity library のCDN

<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>

任意のID付埋め込みコードを
追加します。

id="firstLottie"
<lottie-player id="firstLottie" src="https://assets2.lottiefiles.com/packages/lf20_i9mxcD.json" style="width:400px; height: 400px;">"></lottie-player>

scriptを追加します。
player:」には先ほどの
埋め込みコードで指定した
IDを書きます。

player:'#firstLottie',
LottieInteractivity.create({
  mode:"scroll",
  player:'#firstLottie',
  actions: [
    {
      visibility: [0,1],
      type: "seek",
      frames: [0, 300]
    }
  ]  
});

結果は以下。

LottieFiles by Ilya Pavlov

この例は、
スクロールと同期しています。
アニメーションが
ビューポートに入ると
すぐにスクロール効果が
アクティブになります。
ウェブサイトを下にスクロールすると、
Lottieはフレームごとにシークします。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました

Lottie interactivity library with Lottie animations