Design works

ScrollReveal で余白ができる件

Scroll Revealを使用しているページ全体に余白ができてしまう件について、
ググっても有効な情報がなかったのでメモ。

ページの表示開始時、特定の要素が非表示の時に右に余白ができる。
その要素が表示されると余白がなくなる。

【原因】

「origin」オプションで左右(left or right)いずれかを表示開始位置とし、
「distance」オプションで移動距離を設定している要素があると、
その要素幅と移動距離がbody幅を超えてしまうことが原因。
(特にモバイル表示時、要素の左右に移動距離分のマージンがない場合)

【対処方法】

原因となっている要素の親要素に「overflow: hidden;」を設定。
ただし親はブロック要素である(高さが出る)こと。
「overflow-x: hidden;」でも余白を無くすことはできるが、
親要素が一瞬スクロールできない(縦スクロールバーが表示される)挙動になってしまうことがある。