JavaScriptやanimationを使って要素に動きを付けたときに次のような症状が発生することがあります。
- ちらつき：フワッと表示させる要素がページロード直後に一瞬表示される（表示後に消えて、再度表示される）
- 画面全体が動く
ここでは、この２つの症状の対処法についてまとめています。
ちらつき：フワッと表示させる要素がページロード直後に一瞬表示される
ちらつきとは何か？
SchrollReveal.jsなどのJavaScriptを使ってページを表示したら要素をフワッと表示させることがあります。
ところが、ページをロードした直後にフワッと表示されるはずの要素が一瞬全て表示されて、それから消えて、再度フワッと表示されることがあります。
この現象を「ちらつき」と呼びます。
ちらつきが発生する要因には次のようなものがあります。
- 要素の初期状態が表示
要素がもともと表示されている場合、スクロール時に一瞬非表示になってからアニメーションが開始する。 - ブラウザキャッシュが残っている
ブラウザキャッシュが原因で、要素がすでに表示されていると認識されてしまい初期状態で要素が表示される。 - アニメーションの設定
アニメーションの設定によっては、ちらつきが発生しやすい場合がある。例えば、opacityプロパティを使って要素の透明度を変更する場合、値の変更が大きすぎるとちらつきが目立ちやすくなる。
ScrollReveal.jsの場合は、もともと表示されている要素をJavaScriptで制御しようとすることがちらつきの原因です。
ちらつきの対処法
ちらつきの対処法はとても簡単です。
フワッと表示させる要素をデフォルト非表示にすることで、ページロード時に要素が一瞬表示されることがなくなります。
ScrollReveal.jsの場合は、要素にvisibility: hidden;をつけます。
フワッと表示させる要素{
visibility: hidden;
}実例１
例えば以下のようにScrollReveal.jsを設定しているとします。
ScrollReveal().reveal('.first-view-headline1', {
duration: 1400,
delay: 200,
easing: 'ease-in-out',
origin: 'right',
distance: '0px',
});
CSSを以下のようにします。
/* チラつき防止 */
.first-view-headline1{
visibility: hidden;
}実例２
フワッと表示させる設定を複数している場合は以下のようにします（※ファーストビューで表示される可能性がある要素だけでOKです。（デバイス毎の画面サイズ要考慮））
ScrollReveal().reveal('.first-view-headline1', {
duration: 1400,
delay: 200,
easing: 'ease-in-out',
origin: 'right',
distance: '0px',
});
ScrollReveal().reveal('.first-view-headline2', {
duration: 1200,
delay: 900,
easing: 'ease-in-out',
origin: 'right',
distance: '0px',
});
ScrollReveal().reveal('.page-top-headline', {
duration: 800,
delay: 100,
easing: 'ease-in-out',
origin: 'left',
distance: '50px',
});
ScrollReveal().reveal('.page-top-subtitle', {
duration: 800,
delay: 500,
easing: 'ease-in-out',
// origin: 'left',
distance: '0px',
});
ScrollReveal().reveal('.page-top-subtitle2', {
duration: 1200,
delay: 1200,
easing: 'ease-in-out',
origin: 'right',
distance: '0px',
});
CSSを以下のようにします。
/* チラつき防止 */
.first-view-headline1, .first-view-headline2, .page-top-headline, .page-top-subtitle, .page-top-subtitle2{
visibility: hidden;
}WordPressの注意点
WordPressで作っている場合、要素にvisibility: hidden;を設定するとエディタ画面で対象の要素が表示されなくなります。
編集するときは、visibility: hidden;をコメントアウトしましょう。
visibility: hidden;とは何か？（display:noneとの違い）
visibility: hidden;
visibility hiddenは、CSSで要素を非表示にするプロパティの一つです。
「非表示」と言っても、要素自体は存在し、レイアウトにも影響を与えます。つまり、要素のスペースは確保されたままとなり、要素の上に他の要素を重ねることが可能です。
visibility: hiddenの使い方
visibility hidden の具体的な使い方の例としては、以下のようなものが挙げられます。
- アニメーションの途中段階で要素を一時的に非表示にする
- 画面外にある要素を非表示にしておく
- 要素の表示/非表示を切り替えるスイッチとして使用する
visibility: hiddenの注意点
visibility hidden を使用する際は、以下の点に注意する必要があります。
- スクリーンリーダーで読み上げられない
visibility hiddenで非表示にした要素は、スクリーンリーダーなどで読み上げられない可能性があります。
重要な情報を非表示にする場合は、aria-hidden 属性などを併用して、アクセシビリティを確保する必要があります。 - パフォーマンスの低下
visibility hiddenは、要素を非表示にするだけなので、パフォーマンスへの影響は軽微です。しかし、多くの要素を非表示にする場合は、パフォーマンスが低下する可能性があります。
visibility: hidden;とdisplay:noneとの違い
visibility hidden とよく似たプロパティに display: none がありますが、display: none は要素を完全に非表示にし、レイアウトからも消去する点が異なります。
visibility hidden と display: none の使い分けとしては、以下の指針が挙げられます。
- display: none 要素を完全に非表示にして、レイアウトから消去したい場合。
- visibility: hidden 要素を一時的に非表示にしたり、要素の上に他の要素を重ねたい場合
画面全体が動く
画面全体が動く原因
SchrollReveal.jsなどのJavaScriptを使ってページを表示したら要素を左右からフワッと表示させることがあります。そのときに、表示前の初期状態として要素が画面外にある場合があります。
あるいは、アニメーションで要素の一部や全体が画面外に見切れるときなどです。
こういったときに、スマホなど画面幅の狭いデバイスでページを触るとページ全体が左右に動くことがあります。
これは、画面外に出ている要素が存在していると認識されているためです。
対処法
対処法は簡単で、はみ出している要素の親要素にoverflow: hiddenをつけます。すると、はみ出した要素を非表示にすることができます。
overflow: hidden動かしている要素を含むラッパー（divなど）やコンテナに対して使います。
まとめ
JavaScriptでアニメーションを設定したときは、ちらつきが発生したり、画面が動いたりすることがあります。
これらの問題はCSSプロパティのvisibility: hidden;やoverflow: hiddenを使うことで対処することができます。
ほんとCSSって便利ですね。
困ったときはぜひ試してみてください^^
