エントランスアニメーション機能では、ウィジェット、セクション、カラムをアニメーション化することができます。このようにして、サイト訪問者がページをスクロールしていくと、要素が入り口のアニメーションで表示されます。

- セクション、カラム、またはウィジェットのハンドル
を右クリックして、要素を編集します。
- 要素の詳細設定 > モーション効果タブに移動します。
- 入口アニメーションのドロップダウンからアニメーションを選択します。デバイスごとに、「なし」を含むエントランスアニメーションを選択できることに注意してください。
など、37種類のエントランスアニメーションからお選びいただけます。
- フェードイン:フェードイン、フェードインで上、下、左、右
- ズーム:ズームイン、上下左右にズームイン
- バウンス:跳ね返る、上、下、左、右に跳ね返る
- スライディング:上、下、左、右にスライド
- ローテート:左下回転、右下回転、左上回転、右上回転
- アテンションシーカー:バウンス、フラッシュ、パルス、輪ゴム、手ぶれ、ヘッドシェイク、スイング、タダ、ふらつく、ジェロ
- ライトスピード:光速
- スペシャル:ロールイン
エントランスアニメーションのリリース記事でライブでご覧ください。
注:Elementorはユーザが設定できる “reduced motion property “の設定を尊重します。ユーザが以下のいずれかを設定している場合、そのユーザに対してモーション効果は無効になります。
- Mac:“システム環境設定 > アクセシビリティ > ディスプレイ “を選択し、”動きを減らす “のボックスをチェックする/しないを選択します。
- iOS:「設定>一般>アクセシビリティ」で「動きを減らす」のオンオフを切り替える
- Windows 10:「設定>アクセスのしやすさ>表示>Windowsの簡素化とパーソナライズ」で「Windowsでアニメーションを表示」のオン/オフを切り替える
注:Safariでマウスエフェクトが表示されない、またはSafariで要素が消える問題が発生している場合、これはWordPressで使用されている古いjQueryのバージョンが原因です。場合によっては、Safari経由でマウストラックのエフェクトを表示すると、jQueryのエラーが発生して、例えばカルーセルの矢印が消えてしまうなど、要素が消えてしまうことがあります。この場合、「最大コールスタックサイズが超過しました」を参照するエラーが表示されることもあります。この問題を解決するには、モーション エフェクト付きのウィジェットから入り口のアニメーションを削除するか、スクロールとマウス エフェクトが同時に有効になっている領域からマウス エフェクトを削除します。