エントランスアニメーション機能では、ウィジェット、セクション、カラムをアニメーション化することができます。このようにして、サイト訪問者がページをスクロールしていくと、要素が入り口のアニメーションで表示されます。
- セクション、カラム、またはウィジェットのハンドル
を右クリックして、要素を編集します。 - 要素の高度な設定 > モーション効果タブに移動します。
- 開始アニメーションのドロップダウンからアニメーションを選択します。デバイスごとに、「なし」を含むエントランスアニメーションを選択できます。
エントランスのアニメーションは、以下の37種類から選択できます。
- Fading: Fade in, fade in up, down, left, right
- Zooming: Zoom in, zoom in up, down, left, right,
- Bouncing: Bounce in, bounce in up, down, left, right
- Sliding: Slide in up, down, left, right
- Rotating: Rotate in, rotate in down left, down right, up left, up right
- Attention seekers: Bounce, flash, pulse, rubber band, shake, head shake, swing, tada, wobble, jello
- Light speed: Light speed in
- Specials: Roll in
注意；
Elementorは、ユーザが設定できる "reduced motion property "の設定を尊重します。ユーザが以下のいずれかを設定している場合、そのユーザに対してモーションエフェクトは無効になります。
- Mac："システム環境設定＞アクセシビリティ＞ディスプレイ」で「動きを減らす」のチェックボックスをオン／オフする
- iOS：「設定＞一般＞アクセシビリティ」で「動きを減らす」のオンオフを切り替える
- Windows 10：「設定＞アクセスのしやすさ＞表示＞Windowsの簡素化とパーソナライズ」で「Windowsでアニメーションを表示」のオン/オフを切り替える
注意；
Safariでマウスエフェクトが表示されない、またはSafariで要素が消える問題が発生している場合、これはWordPressで使用されている古いjQueryのバージョンが原因です。場合によっては、Safari経由でマウストラックのエフェクトを表示すると、jQueryのエラーが発生して、例えばカルーセルの矢印が消えてしまうなど、要素が消えてしまうことがあります。この場合、「最大コールスタックサイズが超過しました」を参照するエラーが表示されることもあります。この問題を解決するには、モーション エフェクト付きのウィジェットから入り口のアニメーションを削除するか、スクロールとマウス エフェクトが同時に有効になっている領域からマウス エフェクトを削除します。
公式ページ：Entrance Animations