モーションエフェクトは、デザインに美しいトランジションやアニメーションを追加するための強力なコントロールセットです。
これまでは、アニメーションやモーションエフェクトを組み込むには、外部ライブラリやカスタムコードを使用する必要がありました。
Elementor Pro 2.5は、視差、アニメーション、その他のモーションエフェクトを作成するためのオールインワンソリューションを提供します。
スクロールエフェクト
スクロール エフェクトを使用して、ユーザーがページをスクロールしたときに驚くべきアニメーションやインタラクションを作成します。以下にスクロール効果のリストを示します。
縦スクロール
これは古典的な視差効果です。垂直スクロールは、スクロール中に要素をページとは異なる速度で、選択した方向と速度で移動させます。
横スクロール
水平スクロールとは、訪問者が上下にスクロールすると、それに応じて要素が左右に移動することを意味します。使用例 – 雲のあるセクションは、下にスクロールすると右に移動します。
透明性
透明度は、訪問者のスクロールに応じて、要素を徐々に透明化したり、可視化したりすることができます。例としては、スクロールに応じてタイトルが表示され、それに合わせて溶けていくというものがあります。
効果には4つの方向性があります。
フェードイン – 要素が透明な状態で始まり、徐々に見えるようになることを意味します。
フェードアウト – 要素が透明な状態で始まり、徐々に透明になります。
フェードアウトイン – 要素が可視状態で始まり、フェードアウトしてから再び可視状態になります。
フェードインアウト – 要素は透明な状態で始まり、可視状態になり、その後再び透明になります。
ぼかし
この設定は透明度に似ていますが、透明度の代わりに要素がぼやけます。良い例としては、ユーザーが下にスクロールしたときにのみ適切なフォーカスが得られる背景画像があります。
回転
ここでは、スクロールすると要素が回転します。下の画像の星の回転の例を見てみましょう。
注：2つの設定、XとYのアンカーポイントは、要素がスケールしたり回転したりする軸を決定します。向きを左上に設定すると、要素の左上の点を中心に回転します。向きを中心に設定した場合、回転はその中心を中心に回転します。この設定は、上記の「回転」効果と以下の「スケール」効果にのみ関係します。
スケール
スケールは、スクロールに応じて要素を拡大・縮小することができます。例。スクロールしながら成長する背景。
注：モーションエフェクトがモバイル、デスクトップ、またはタブレットで適用されるかどうかは、「Apply effects on」を使用して決定します。マウスエフェクトはデスクトップデバイスにのみ適用されます。
マウスエフェクト
マウストラック
訪問者のマウスの動きに関連して要素が動くようにすることで、奥行き感を演出します。
3Dチルト
マウストラックがマウスの動きに関連して要素を移動させるのと同様に、3Dチルト効果はカーソルの同じ動きに応じて要素を傾斜させます。
モーションエフェクトのブラウザの互換性
マウストラックがマウスの動きに関連して要素を移動させるのと同様に、3Dチルト効果はカーソルの同じ動きに応じて要素を傾斜させます。
| Chrome | Firefox | Safari | Opera | Edge | Internet Explorer |
| 対応している | 対応している | 対応している | 対応している | 対応している * | 対応していない |
* わずかにラグのある動作
注：Safariでマウスエフェクトが表示されない、またはSafariで要素が消える問題が発生している場合、これはWordPressで使用されている古いjQueryのバージョンが原因です。場合によっては、Safari経由でマウストラックのエフェクトを表示すると、jQueryのエラーが発生して、例えばカルーセルの矢印が消えてしまうなど、要素が消えてしまうことがあります。この場合、「最大コールスタックサイズが超過しました」を参照するエラーが表示されることもあります。この問題を解決するには、モーション エフェクト付きのウィジェットから入り口のアニメーションを削除するか、スクロールとマウス エフェクトが同時に有効になっている領域からマウス エフェクトを削除します。
注：Elementorはユーザが設定できる “reduced motion property “の設定を尊重します。ユーザが以下のいずれかを設定している場合、そのユーザに対してモーション効果は無効になります。
- Mac：”システム環境設定 > アクセシビリティ > ディスプレイ “を選択し、”動きを減らす “のボックスをチェックする/しないを選択します。
- iOS：「設定＞一般＞アクセシビリティ」で「動きを減らす」のオンオフを切り替える
- Windows 10：”設定 > アクセスのしやすさ > 表示 > Windowsの簡素化とパーソナライズ”