令和モーションエフェクト Motion Effects

令和になりますね。

令和とは全く関係ありませんが。。文字を使ったパララックスを作ってみたいと思います。

さてElementor Pro 2.5になって搭載されたMotion Effectsの紹介をします。

こんなアニメーションを作ります。

https://elecre.net/reiwa

まずスクロールさせるためにセクションの上のマージンを800とかにします。

見出しウィジェットを2つ配置して、それぞれに「令」「和」と入力。

分かりやすく文字サイズを200とかに設定。Custom Positioningよりインラインに。

 

 

セクションのカラムを選択してHorizontal Alignを中央にします。

これについては前回の以下記事を参考に。

インライン要素のボタンを均等配置

 

詳細タブのMotion Effetctsのチェックを入れてこのようにそれぞれ設定します。設定画面正直なところ直感的ではないですね。。ここは説明しづらいっす。

「令」と「和」については左右から表示されるように設定します。

「Reiwa」についてはフェードインで表示。。。したいのでDirectionをFade Outにします。う〜む直感的でない。

今までcssやjsで微調整していたことを考えるとすごく簡単にパララックス表示ができるようになりましたね( ^ ‿ ^)/

 

 

 

Elementorカテゴリ

Announce

New
arrival

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.

Announce

New
arrival

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.