web関連

【javascript】ページアクセス時のfadeInアニメーションをjsだけでやる方法

2018/10/31

プログラミング

言語-javascript

javascriptでページを非表示にしようとheadタグ内に記述したら上手く動かなかった時の備忘録

jsでのfadeInアニメーション

body読み込み直後にjavascriptで非表示にして、bodyの閉じタグ前にjqueryでfadeInさせてます。

<head>
…
<script>
	//　false（動かない）
	document.getElementById('body').style.opacity = "0";
</script>
</head>	
<body id="body">
<script>
	//　true（動く）
	document.getElementById('body').style.opacity = "0";
</script>
…
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
jQuery(function($){
  $('body').animate({'opacity' : '1'}, 1500);
});
</script>
</body>

bodyを非表示にしようと、headタグ内に記述したら上手く読み込まなかった
headタグ内に書いてしまうとbody読み込み前なのでダメっぽい
なのでbody直後に書けば非表示にできる

jQueryをheadで読み込んでjQueryで書こうと思ったんだけど読み込み遅くなりそうだったからjavascriptでやった

cssだけでのfadeInアニメーション

cssだけでもできるみたいなので備忘録

body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

cssだけでも実装できるけど、webフォント使う事を考えるとコンテンツ全部読み込み終わってからfadeInした方がいいからjsだけの実装のほうが汎用性があると思う

▼参考記事
https://q-az.net/fadein-open-only-css/

jsのファイルとか下の方に書く理由って理解しきれていなかったけどてなかったけど、jsファイルって読み込み実行が完了するまでの間HTMLの読み込みとか停止するんすね逆に何が何でもhtmlが読み込まれる前に読み込ませたいjsがあったらhead内に書けば実行できるってことかなアナリティクスとか