WordPressで作るウェブサイト&サイト運営・集客をわかりやすく学べます

WordPressで作るウェブサイト&サイト運営・集客をわかりやすく学べます

【Elementorの新機能】Lottiefiles アニメーションの使い方

【Elementorの新機能】Lottiefiles アニメーションの使い方

Lottie(ロッティー)アニメーション機能

Elementorプラグインの有料のPro版に、Lottie(ロッティー) アニメーション機能が追加されました。

当サイトでも、メニューや記事内に使用しています。

Elementor有料のPro版で使用できます。

LottieFiles」と連携され簡単に設定が可能です。

 

 

 Lottieアニメーションについて

Lottieはbodymovinと呼ばれるAfter Effects拡張機能を使用して、作成したアニメーションを「JSONファイル」としてエクスポートされたアニメーションデータです。

Airbnbが開発し「Lottie」は、Android、iOS、Web、Windows用アニメーションライブラリで、

これまでWEBサイトにアニメーションを載せることは面倒でしたが、そのアニメーションの実装を簡単に行うことができます。

通常は、動画などのmov、mp4ファイルやGIFアニメーショに比べてもファイルサイズが格段に軽いので、今までのホームページの作り方、見せ方も大きく変わります。
小さな画像を拡大すると画像が荒くなりますが、LottieのアニメーションファイルはSVGをつかっているので解像度を気にせずアニメーション画像の拡大縮小が自由自在です。

※ SVGとは「Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)」の略で「解像度を気にせず大きさを変えられるベクター画像」です。

ElementorプラグインでのLottieの使い方

Elementorプラグインの有料のPro版のみLottie(ロッティー)アニメーション機能を使うことができます。

「Lottie」で検索をします。

ちなみに、このキャプチャーで2つ「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(ロッティー)アニメーション機能を紹介しました。

 

WordPressに限らず、Canvaの画像編集やサイト運営に関係する内容と、受講生さんからのご質問等で共通な内容も掲載していきます。

Canvaバナー おすすめ画像編集ソフトです。当サイトのアイキャッチ画像やバナー、Instagram用の画像や当サイトのチラシもこちらのCanvaで作っていますよ!無料版で十分です。  
無料で予約サイトが作れ、月額課金のサブスクの決済も導入できます。Zoomとも連携し、予約が入るとURLが自動発行される便利機能も無料で使えます。
 カテゴリー
翻訳
PAGE TOP