crftロゴ

Lottie

Lottie

Elementor プロ版-Lottie

 AirBnbが開発しているウェブアニメーションソリューション、Lottie を埋め込むウィジェットです。Lottieはマイクロアニメーヨンやマイクロユーザーインターフェイスと呼ばれる、ちょっとした動きでユーザーの操作を促す要素として重要視されています。

 アニメーションファイルは BodyMovin Adobe AfterEffects にインストールして独自に作成するか、インターネットにあるライブラリから利用することができます。 Lottie Files にはフリーのLottieファイルが公開されています。

Lottieを編集:コンテンツ

Lottie

 ファイルをメディアライブラリか外部urlで指定します。またアニメーションをクリックしたときの遷移先も指定することができます。

Elementor Lottieを編集

設定

Trigger

 アニメーションの再生のきっかけの設定です。Viewport(ページ上に現れたとき)、On Click、On Hover、Scroll、なし、から選択することができます。

Triger:Scroll

lottieスタイル

Lottieを編集:スタイル

 配置したアニメーションの大きさを調節することが可能です。

 さらにロールオーバーしたときの効果をCSS Effectsを使って指定することが可能です。