こんにちは。Vierです。 最近のWEBページは、様々なエフェクト(アニメション等の動き)が実装されているページが増えてきましたね。 トップページを開いた問のエフェクトって、言ってみれば、WEBサイトの玄関であり、そのWEBサイトの印象が決まってきます。 今回は、最初にトップページを開いたときに、画面全体が真っ白で、ロゴがフェードで浮かび上がり、数秒後に真っ白の背景とロゴがフェードアウトして、サイトが表示されるような実装を考えてみようと思います。 トップページを開いたときにアニメーションデモ百聞は一見に如かずということで、まずはデモをご覧ください。 デモを見る html、css、jQueryの実装html index.html<div class="start"> <p><img src="images/logo.png" alt=""></p> </div>htmlは上記の3行のみです。
![jQueryで最初にトップページを開いたときに画面全体やロゴをフェードさせる | VIER LOG(ヴィアログ)](https://cdn-ak-scissors.b.st-hatena.com/image/square/fe486d75ce2b56bcb4ce03ce5e35e9916805bfae/height=288;version=1;width=512/https%3A%2F%2Fvier-kt.com%2Fwp-vier%2Fwp-content%2Fuploads%2F2018%2F08%2Fpost-11.jpg)