Lottie playerを使ってアニメーションを表示

この記事は約 2 分で読めます。
Lottieとは、Airbnbが開発した
アニメーションライブラリです。
Lottieは JSONベースの
アニメーション ファイル形式で、
Webサイト上で高クオリティの
アニメーションを簡単に表示することができます。
Lottieについて詳細はこちらを参照ください。
Lottieを使えば、
ちょっとしたコードだけで簡単に
アニメーションを表示することができます。
Lottieの公式サイトに用意されている
「LottieFiles」から
世界中のクリエイターが投稿している
アニメーションをLottieを使って
サイトに表示させるところをやってみます。

まずは、
お好みのアニメーションを
選ぶところから始めます。

お好きなアニメをクリックすると
ポップアップ画面が表示されるので、
<html> をクリックします。

Generate Codeで
アニメーションを調整します。
width、heightなどのパラメータを調整、
再生ボタンなどのControlsはいらないので
チェックは外しておきます。

あとはコードをコピーして、
自分のブログに貼り付けるだけです。
結果は以下になります。
LottieFiles by Amzad Hossain
こんな感じで
簡単にアニメーションを
表示させることが
出来ます。
※ 上記の説明画像とは
違うアニメーションを表示しています。
LottieFilesで利用可能なすべての公開ファイルは、
特に明記されていない限り、
クリエイティブ・コモンズ(CC) 表示(BY)の下で配布されます。
LottieFilesは、可能な限り
元のアニメーションへのリンクと一緒に
アトリビューションを配置することをお勧めします。
LottieFilesは、クリエイターが
適切にクレジットされている限り共有することができます。
以下は、
可愛らしい猫のアニメーションを
ピックアップしてみました。
LottieFiles by Mikhail Voloshin
貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
Posted by FOUR 4to6
関連記事

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

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

WordPress ブロックエディタのプレビューメッセージを変更する
Block Editor Handbookには、 エディタエクスペリエンスの動作 ...

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

テーマ Luxeritasでプッシュ通知を試してみる
Push.jsを使って、 WEBブラウザからのプッシュ通知を 送信してみます。 ...
ディスカッション
コメント一覧
まだ、コメントがありません