ナレッジベース

Page Builder Sandwich のアニメーションとインタラクション

視覚効果を減らす設定に配慮した、導入やスクロールのアニメーション、ホバー効果、固定ブロック、パララックス、ポインター追従効果を追加します。

Page Builder Sandwich Pro は、すべてのブロックの「スタイル」タブにモーションセクションを追加します。他のすべてのスタイルと同様に、各設定はブレークポイントごとに個別に指定できます。

表示時およびスクロール時のアニメーション

表示アニメーション: フェードイン、上昇または下降しながらのフェードイン、開始側または終了側からの出現、拡大または縮小、あるいは上への反転など、ブロックがスクロールして表示領域に入ったときに1回だけ再生されます。長さと遅延をミリ秒単位で設定してください。
スクロール中: スクロール位置に連動して、ブロックが表示領域に入ると同時にフェード、上昇、拡大、または傾きの補正を行います (スクロール連動アニメーションに対応しているブラウザの場合。非対応環境ではブロックが通常通り表示されます)。

インタラクション

ホバー時: 浮き上がり、拡大、縮小、シャドウ、傾き、または発光。キーボードフォーカス時にも適用されます。
画面内に固定: セクションがスクロールする間、ブロックは画面上部から一定の距離を保って固定されます。
パララックス速度: -10 (スクロールと逆方向) から 10 (スクロールと同方向) まで。
ポインター追従: マウスポインターの方向に向けてブロックが傾きます。

視覚効果の減衰設定を常に尊重

デバイスで視覚効果の減衰 (reduced motion) を設定している訪問者には、アニメーション、パララックス、動きは一切表示されず、コンテンツがそのまま表示されます。JavaScript が無効であっても、何も隠されることはありません。モーション設定を使用していないページでは、モーション用のコードは一切読み込まれません。