LottieFilesがさらに身近になった!
LottieFilesって?
厳密にいうとピクセル画像のハンドルも可能みたいですが、基本ベクターベースのアニメーションをウェブサイトに実装できる技術で、なぜかAirbnb が開発したみたいです。
LottieFiles のサイトを見てみると錚々たるブランドがLottieFilesを採用しているということになっています。
LottieFilesはマイクロアニメーションなどと呼ばれるUIやUXに使うアニメーション実装に便利とされています。
作成する環境も柔軟性があって、AfterEffects用のプラグイン からAfterEffectsのアニメーションを条件付きではあるけど書き出すことも可能です。
Elementorを使うと簡単に実装できる
ElementorをPro にするとLottieウィジェット を使って簡単にLottieFilesアニメーションを実装することができるようになります。
ウィジェットをページにドロップしてLottieFilesを選択するだけ。
Gutenbergのブロックに対応したLottie
WordpressではGutenbergがどんどん進化していて、リリースも近いとされているWordpress 6.xでは大きくビジュアルエディターとして進化するとされています。
そのGutenbergのコンセプトのひとつブロックに対応したLottieFilesのプラグインがリリースされました。
GutenbergのブロックパネルからLottieFilesサイトで公開されているライブラリに直接アクセスして埋め込むことが可能になります。
もちろんWordpressのメディアライブラリから自作したLottieFilesアニメーションを指定することも可能になります。
スクロールエフェクトなどにも対応しているようで、これは使えそうです。
筆者もLottieFiles作ってます
当サイトcrft主宰者の筆者もLottiFilesのファンで、LottieFilesサイトにプロフィールページ を持っています。
作成したアニメーションはすべて無料で公開しています。
使えるかどうかはわかりませんが、役に立つとおもったら遠慮なく使ってください。
-
LottieFilesがさらに身近になった!の関連リンク