JavaScriptでアニメーション設定時の注意点｜ロード直後に一瞬表示される(SchrollReveal)、画面が動く、横ずれ防止対策

JavaScriptやanimationを使って要素に動きを付けたときに次のような症状が発生することがあります。

ここでは、この２つの症状の対処法についてまとめています。

ちらつき：フワッと表示させる要素がページロード直後に一瞬表示される

ちらつきとは何か？

SchrollReveal.jsなどのJavaScriptを使ってページを表示したら要素をフワッと表示させることがあります。

ところが、ページをロードした直後にフワッと表示されるはずの要素が一瞬全て表示されて、それから消えて、再度フワッと表示されることがあります。

この現象を「ちらつき」と呼びます。

ちらつきが発生する要因には次のようなものがあります。

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;と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って便利ですね。

困ったときはぜひ試してみてください^^