Lottie interactivity library with Lottie animations

この記事は約 3 分で読めます。
「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はフレームごとにシークします。
貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
Posted by FOUR 4to6
関連記事

前橋初市まつり 規模を縮小し開催
前橋三大まつりの一つである前橋初市まつりはその昔、毎月4と9の日に開かれていた六 ...

テーマ Luxeritasでプッシュ通知を試してみる
Push.jsを使って、 WEBブラウザからのプッシュ通知を 送信してみます。 ...

ASCII文字のクリスマスツリー
※ クリスマスソングが、 ストリーミング再生されます。 音量に注意して下さい。 ...

コメント投稿者のurlのlink-targetを_blankに且つ自サイトには付けない
当ブログの人気記事に 「テーマ Luxeritas(ルクセリタス) の “プチ” ...

Can I Useをブログに埋め込む
Can I Use のブラウザ対応表を ブログ内に埋め込んでみましょう。 Can ...

WordPress ブロックエディタのプレビューメッセージを変更する
Block Editor Handbookには、 エディタエクスペリエンスの動作 ...
ディスカッション
コメント一覧
まだ、コメントがありません