Elementorプラグインの有料のPro版に、Lottie（ロッティー） アニメーション機能が追加されました。
当サイトでも、メニューや記事内に使用しています。
Elementor有料のPro版で使用できます。
「LottieFiles」と連携され簡単に設定が可能です。
Lottieアニメーションについて
Lottieはbodymovinと呼ばれるAfter Effects拡張機能を使用して、作成したアニメーションを「JSONファイル」としてエクスポートされたアニメーションデータです。
Lottieは、Airbnb社が開発したアニメーション形式で、ベクターアニメーションを実現するためのJSON形式ファイルです。Lottieは、Adobe After Effectsなどのアニメーション制作ツールで作成したアニメーションを、Webサイトやモバイルアプリなどのアプリケーション上で再生することができます。
「Lottie」は、Android、iOS、Web、Windows用アニメーションライブラリで、
これまでWEBサイトにアニメーションを載せることは面倒でしたが、そのアニメーションの実装を簡単に行うことができます。
通常は、動画などのmov、mp4ファイルやGIFアニメーショに比べてもファイルサイズが格段に軽いので、今までのホームページの作り方、見せ方も大きく変わります。
小さな画像を拡大すると画像が荒くなりますが、LottieのアニメーションファイルはSVGをつかっているので解像度を気にせずアニメーション画像の拡大縮小が自由自在です。
※ SVGとは「Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）」の略で「解像度を気にせず大きさを変えられるベクター画像」です。
LottieFilesでは、世界中のクリエイターが作成したLottieアニメーションファイルを共有しており、誰でもダウンロードして利用することができます。また、LottieFiles上でアニメーションファイルを編集したり、アニメーションのライブラリを作成したりすることもできます。
LottieFilesは、WordPressやWebサイトやモバイルアプリのデザインにおいて、アニメーションやイラストレーションを実現するために、広く利用されています。また、UIやUXの改善にも役立ち、ユーザー体験を向上させることができます。
Lottie（ロッティー）アニメーションの見本
ElementorプラグインでのLottieの使い方
Elementorプラグインの有料のPro版のみLottie（ロッティー）アニメーション機能を使うことができます。
「Lottie」で検索をします。
ちなみに、このキャプチャーで２つ「Lottie」項目が表示されているのは、Elementorプラグイン本体のウィジェットと、Elementorプラグインのアドオンでの項目ですので、皆さんの画面には表示されている方と表示されていない方もいます。
こちらがサンプルの「Lottieファイル」です。
「Lottie」編集画面
lottiefiles.comにアクセスします
https://lottiefiles.com/ にアクセスします。
こちらに無料アカウント登録をして、「Lottieファイル」を探します。
「Lottieファイル」は、無料と有料がありますので、今回は無料のものを利用します。
Christmasで検索しました。
「Lottieファイル」は、無料と有料がありますので、「Free」でソート検索をします。
「Lottieファイル」の詳細画面です。
このページの下の方にある「Elementorプラグイン」のマークをクリックします。
「Lottieファイル」のダウンロード画面です。
ダウンロードボタンをクリックします。
このページの下にもLottie（ロッティー）アニメーションのElementorでの手順が記載されています。
「Lottieファイル」の拡張子は、「.json」です。
補足：（JSON）ジェイソンファイルについて
JavaScript Object Notation（JSON）は、ジェイソンと読みます。
JSONは、JavaScriptのオブジェクト記法を用いたデータ交換フォーマットでファイルが軽量で、コーディングも少なくて済み、処理が高速なため様々な部分で利用されています。
アップロードボタンをクリックしてJSONファイルをアップロードします。
「設定」をクリックします。
こちらが「Lottie」の設定画面です。
「Lottie」の設定画面で、動きのスピードを変更できます
今回使用した「Lottie」ファイルはクリスマスのオーナメントがただ動いているだけのシンプルなものなのでこの設定は使いませんが、もっと複雑な動きのアニメーションの場合は、開始と終わりの位置を指定することができます。
アニメーションをループで再生する場合は、「Loop」の「はい」にチェックを入れます。
「Lottie」の設定画面の、「スタイル」の幅を変更して、大きさを変更します。
透明度を変更することもできます。
ホバーという項目がElementorプラグインではほぼすべてのウィジェット（パーツ）についています。
ホバーは、マウスのカーソルをのせた際に、色を変えたり、動いたり等の変更をする項目ですので、必須の項目ではありませんが、少しおしゃれに、凝ったデザインにすることができます。
（※ホバーは、スマホやタブレットではホバーの状態がないため（指を乗せたらタップすることになるため）使わず、パソコンのみの設定です。）
Elementorプラグインに慣れてきたら、ホバーも活用していきましょう！
トリガー設定
トリガーを設定することができます。
トリガーとは、どういうきっかけでLottie（ロッティー）アニメーションを動かすのかの設定です。
Trigger設定の「vewpoint」について
vewpointは、普通に表示された場合です。ただ「Lottieアニメーション」ファイルを表示させる場合にはこちらを選択します。
Trigger設定の「on Click」について
on Clickは、「Lottieアニメーション」ファイルをクリックした場合にアニメーションの再生がスタートされます。
Trigger設定の「on Hover」について
on Hoverは、「Lottieアニメーション」ファイルの上にマウスカーソルが乗った場合にアニメーションの再生がスタートされます。
Trigger設定の「Scroll」について
Scrollは、ページをスクロールした際に、「Lottieアニメーション」ファイルの再生がスタートされます。
これらを活用していくと、面白い動きを作ることができますね。
Lottie（ロッティー）アニメーション機能を紹介しました。
