Crocoblockが展開するJetプラグイン全20種類の中の1つ、『JetTricks』（ジェットトリックス）についてくわしく解説をしていきます！
JetTrickの使い方を動画でご覧になりたい方はこちらからどうぞ！
JetTricksの購入方法
JetTricksのご購入を希望される方はこちらをクリックするとJetTricks購入画面へジャンプします。
また、JetTricksの購入からサイトへインストール、アクティベートする方法につきましては『Crocoblockのメンバーシップ【JetEngine】の購入からアクティベートする方法』の記事を参考にしていただけます。
※上記記事ではJetEngineで説明をしていますが、購入するプラグインが違うだけでやり方はすべて同じです。
JetTricksの価格
JetTricksの単品の値段は、1サイトで年間19ドル、サイト数無制限で年間$39ドルです。
また、All-InclusiveプランとはJetTricksを含むCrocoblock全20プラグインが使用可能なプランです。
サポートするサイト数や使用期限などにより価格は変動します。
All-Inclusiveプランの価格・使用期限の情報につきましては『JetEngineの使い方』のページの『Crocoblock全プラグインが使用可能なセットプランの価格』のセクションをご覧ください。
JetTricksには8つの機能がある
JetTricksには全部で8つの機能が内蔵されていますが、その内の3つがJetTricksのオリジナルのウィジェット、その他の5つはElementorのウィジェットやカラム、セクションに追加される機能になります。
JetTricksの3つのウィジェット
JetTricksの5つの機能
以下の5つの機能はすべて『高度な設定』の中に収容されていますが、機能によりどの（ウィジェット・カラム・セクション）高度な設定にあるかは異なります。
- Tooltip：ウィジェット
- Satelite：ウィジェット
- Parallax Scrolling Effect：ウィジェット
- Sticky Column：カラム
- Section Particles：セクション
Tooltip
『Tooltip』（ツールチップ）は画像やテキストなどElementorのウィジェットの要素付近に吹き出しとテキストを表示させることのできる機能です。
Tooltipの機能は『ウィジェット』の『高度な設定』の中にあります。
上記画像は、画像にTooltipの機能を追加したときの表示画面です。
Tooltipを入れた要素にバウスオーバーするとこのように吹き出しとテキストが現れます。
また、吹き出しの中に画像などを追加するオプションなどもあります。
Satelite
『Satelite』（サテライト）は画像やテキストなどElementorのウィジェットの要素付近にテキストやアイコン、画像を表示させることのできる機能です。
Sateliteの機能は『ウィジェット』の『高度な設定』の中にあります。
上記画像は、以下の各要素にSateliteの機能を追加したときの表示画面です。
- 見出し（画面上部）：テキスト
- 画像左 / 画像中央：アイコン
- 画像右：画像
なお、表示させるテキストやアイコン、画像の位置や大きさなどはSateliteのエディターより自由に変更が可能です。
Parallax Scrolling Effect
『Parallax Scrolling Effect』（パララックス スクローリング エフェクト）は、画像やテキストが画面スクロールと共についてくる機能です。
Parallax Scrolling Effectの機能は『ウィジェット』の『高度な設定』の中にあります。
ElementorにもParallaxの機能は存在しますが、JetTricksとの大きな違いはJetTricksは背景ではなくウィジェット自体にParallaxの機能を付けることができます。
上記動画では、左側の猫の画像と右側の『探しています』の張り紙の画像が画面スクロールと共についてくる様子を見ることができます。
Sticky Column
『Sticky Column』（スティッキーカラム）は、カラムをStickyにすることができる機能です。
Sticky Columnの機能は『カラム』の『高度な設定』の中にあります。
ElementorにもStickyの機能は内蔵されていますがJetTricksとの大きな違いは、ElementorはウィジェットにStickyをつけられるのに対し、JetTricksはカラムにSticky機能が付けられるため、Sticky機能を追加したカラムに入ったすべての要素がStickyになります。
上記動画はJetTricksのSticky Coulmn機能を使って、スクロールにより画像をつなぎ合わせてたものを映したサンプルです。
サンプルでは3つのセクションにそれぞれ3つのカラムを挿入し、それぞれ中央のカラムに画像を挿入し、その画像の入ったカラムにSticky機能を追加しています。
３つの分かれたパーツがスクロールによりつなぎ合わさり一つの絵になるのと、それぞれの画像と同列の左右のカラムは固定されている様子を動画でご覧いただけます。
また、ElementorのSticky機能の使い方については【Elementor Pro テーマビルダーで投稿ページのレイアウトの作り方】の記事の『画像が画面スクロールと共についてくる設定の仕方』のセクションで説明をしていますのでよかったら参考にしてください。
Section Particles
『Section Particles』（セクション パーティクル）はセクションの背景にJSONファイルで作られた格好いいアニメーションをSection ParticlesのエディターにJSONコードを入れるだけで簡単に挿入することができます。
Section Particlesの機能は『セクション』の『高度な設定』の中にあります。
なお、エディター内にJSONファイルをダウンロードできるページに飛ぶことができ、そこからJOSNファイルを無料でダウンロードすることはもちろん、アニメーションを好みに応じてカスタムすることも可能です。
上記動画は猫の写った背景に星座のような物がチラチラ動いているJSONファイルのアニメーションを映したサンプルです。
HotSpotsウィジェット
『HotSpots』（ホットスポット）ウィジェットは1つの画像の所々にラベルやアイコンを配置し、吹き出しでの説明文やクリックでリダイレクトするリンクを付けられます。
Elementor Proにも『HotSpot』ウィジェットはあり、ほとんど機能は同じですがJetTricksのHotSpotsの方が若干設定が多いようです。
上記動画は猫が撫でられる場所ごとに感じていることをHotSpotで図解したもので、各HotSpotにマウスオーバーすると、さらに吹き出しでその箇所の情報が表示するのをご覧いただけます。
Read More Expandウィジェット
『Read More Expand』（リード モア エクスパンド）ウィジェットは『Read More』（もっと読む）のボタンを表示させるウィジェットで、そのボタンのクリックで隠していた要素を表示させることのできるウィジェットです。
上記動画では『Read More』のボタンをクリックすると隠れていた要素が出て、さらにその中に追加で別の『Read More』が出てそれをクリックするとさらに隠れていた要素が表示される、Read More Expandを応用し作成したサンプルです。
ですのでRead More（続きを読む）を繰り返すことにより、画面をどんどん下に拡張させていくようにサイトを表示することができます。
Unfoldウィジェット
『Unfold』（アンフォールド）ウィジェットは矢印やボタンなどをクリックするとテキストを表示させたり、隠したりすることのできるウィジェットです。
上記動画ではボタンをクリックすると一部隠れていたテキストが全文表示され、再度クリックするとまたテキストの一部が非表示になるのがご覧いただけます。
JetTricksの機能を使用しても編集画面が変わらないときはプレビューで確認
JetTricksの機能を使っても、編集画面に機能が綺麗に反映するときとしないときがたまにあります。
そのときはプレビュー画面でどのように反映しているのかをチェックする必要があります。
またロードが遅く、一度プレビューしたら編集画面に反映した。なんてこともあるので面倒ですが色々と試してみてください。
まとめ
JetTricksはCrocoblockの展開する全20種類のJetプラグインの内の一つで、JetTricksには8つの機能が収容されています。
JetTricksの8つの機能のうち、3つがウィジェットで、5つがElementorのウィジェットやセクション、カラムに追加される機能ですので、使用の際はどこに機能が収容されているのか最初のアプローチを間違えないようにしましょう。
JetTricks（ジェットトリックス）と言うだけに、要素に画像やテキスト、アニメーションを付けたり、スクロールによる面白いエフェクト、クリックによる要素の開閉など、サイトに動きをつけ視覚的に遊び心をプラスできるのがいいですね！
JetTricksの値段も一番安いプラン（JetTricks単品 / 1サイト / 1年）で19ドルなので割とお手頃ですね。
※JetTricksのご購入を希望される方はこちらをクリックするとJetTricks購入画面へジャンプします。
ただし、サイト機能をもっと拡張させたい場合はCrocoblockの全プラグインが使用できるプランがありますのでそちらの購入を検討されてもいいと思います。
また、Jetプラグインの中で一番根幹のプラグイン『JetEngine』もとってもおすすめですよ！
JetEngineの使い方もくわしく紹介していますのでよかったら参考にしてくださいね。