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