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

製作 プログラム

最終更新日:2019/10/29

ラムネグから一言:無料アプリを3つ作りました。記事下部にリンクがあるので見てみてくださいね。さっそくみてみる

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;}
}

②nonscriptを使う!

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

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

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

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

①css

.fuwatto{
	opacity: 0;
}

②javascriptでふわっとアニメ

なんかイベント検知してアニメーションしてopacit:1にする(コード割愛)

③head内の一番下の方に追加←NEW!

<nonscript>
.fuwatto{
	opacity: 1;
}
</nonscript>

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

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

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

まとめ

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

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

【どどん!】ラムネグではただいまアプリを絶賛提供中!さあ、選べる3つの無料アプリ!あなたはどれにする?

【わたガチャ】

あなただけのガチャを作ろう♪

すたーと!

【みんガチャ】

みんなで一つのガチャを作りあげよう♪

すたーと!

【litty-リティ】

秘密のメッセージをフォロワーさんに送っちゃおう!

すたーと!