opacityを使った浮き出るアニメーションの初期ちらつき対処法

jqueryやらなにやらjavascriptを使ってふわっと浮き出るアニメーションって結構多用されますよね。かわいいし。

ただjavascriptが無効なパソコンやスマホ（今時そんなのあるんかな？）だとcssでopacity:0にしている場合javascriptでopacity:1にしている命令が効かないからずっと表示されないままになっちゃう。

ならcssで透明にせずにjavascriptで最初透明にしてから再度opacity:1にすればいいじゃん！ってすると今度はこの記事のタイトルにあるようにそのページを表示するほんの瞬間、ふわっと浮き出させたいオブジェクトが表示されちゃってちらつく…。

結局javascript無効パソコンを捨ててちらつきをなくす（cssでopacity:0）か、最初ちらつくけどjavascript無効に対応する（javascriptでopacity:0）かの二択。…これじゃもったいない。

てことで！今回はjavascript無効時にも対応した「ちらつかずにふわっと浮き出るアニメーション実装方法」を2つ紹介します。

①cssのanimationで実装する

一番カンタンなのはふわっと浮き出るアニメーションをcssのanimationで実装するやり方。

cssのanimationで実装すればそもそもjqueryもjavascriptも使っていないのでjavascript無効パソコンのコトを考える必要がない！animationに対応していない端末ならそもそもopacity:0のアニメーション自体が無効になるから問題ないしね！

.fuwatto{
	animatioin: fadein 1s;
}
@keyframes fadein{
	0%{opacity:0;}
	100%{opacity:1;}
}

②noscriptを使う！

上記の方法は特になんのトリガーもなく「サイトを表示たらふわっと浮き上がる」ていう場合。

例えばオブジェクトのある位置までスクロールしたら浮き出るアニメーション発動！とかにするなら①の方法だと難しいハズ。

てことで二つ目の方法はjqueryなのでイベントを受け取ってから発動するタイプのアニメーション方法です。

やり方はnoscriptを使います。下の例では一番下の「NEW！」て書いてあるコードだけがテクニック部分。あとの部分はちらつく場合とおんなじです。

.fuwatto{
	opacity: 0;
}

<noscript>
<style>
.fuwatto{
	opacity: 1;
}
</style>
</noscript>

noscriptはスクリプトが無効になっているときに通る場所なので、javascriptが無効になっているパソコンやスマホのみがnoscriptで囲まれた命令を実行します。

それを踏まえて仕組みを解説すると、全体のcssではふわっと表示させたいオブジェクトはいったん透明にしておきちらつきをなくす。そんであとからjavascriptでopacity:1にしてふわっとアニメーションを実行（ここまでは従来通りです）。そして万が一javascriptが無効な場合はnoscriptのcssが読み込まれてopacity:1として普通に表示するって動きになります。

最初知ったときは目からウロコ。こんなシンプルにjavascript無効端末に対応できるなんてもはや発明ですよね。

まとめ

今回はjavascript無効端末のことも考えたふわっと浮き出るアニメーションの実装方法を2つ紹介しました。

個人的には②のやり方が小回り効いてて大好き。noscriptいろりろできそうですね。