私は現在ここにこだわっていますが、私はthis websiteと同じ効果を実現したいと思います。しかし、私は正確にそれを行う方法を知らない。誰も私にそれを行うコードを表示するのに十分親切になるだろうか？jQueryアニメーションのロゴがフェードアウトします
基本的に、このサイトは最初に数秒間ロゴを表示してから、div領域にフェードアウトします。自分のロゴを表示して、他の人に見せるdivエリアのコンテンツにフェードインするために自分のバージョンを作りたいと思っています。ロゴ表示とdivは同じWebページになければなりません。
助けてください。
これはjQueryをまったく必要とせず、CSSで簡単に行うことができます。ここで
デモです：だから
<!DOCTYPE html>
<html>
<head>
<title> Valid HTML5 documents require title tags </title>
<style type="text/css">
#logo {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
left: 0;
top: 0;
width: 100%;
height: 0;
opacity: 0;
background-color: #fff;
pointer-events: none;
cursor: default;
transition: opacity 2.5s ease 5s, height 3s ease 7.5s;
/* __^__ __^__ __^__ __^__
[1] [2] [3] [4]
[1] Time opacity takes to transition from 1 to 0;
[2] Time opacity waits until it starts transitioning
[3] Time height takes to transition from 100% to 0;
[4] Time height waits until it starts transitioning (>= [1] + [2]);
*/
}
.preload #logo {
opacity: 1;
height: 100%;
}
</style>
</head>
<body class="preload" onload="document.body.className='';">
<div id="logo"> YOUR LOGO HERE </div>
<div id="content">
<h1> wow, a title </h1>
<p> yay, content </p>
</div>
</body>
</html>、どのように動作しますか？
<body>は、preloadクラスです。ロードすると（onloadイベント）、そのクラスは削除されます。
<body>がpreloadクラスがありますが、div#logoはopacity: 1とheight: 100%を持つことになります。
とすぐ<body>がpreloadクラスを失うとして、div#logoは0に両方opacityとheightセットを持っています。しかしtransitionプロパティは、即時であることから、その変更を停止します。
opacity遷移を開始するまでに5秒（遅延）を待ちます。
opacityは、完全1から0
heightへの移行は、移行を開始するために7.5秒（不透明度の5S + 2.5S）を待機するために2.5秒を要します。
heightは完全にあなたがかろうじて任意のJavaScriptと外部のフレームワークを必要とせず、所望の効果を得る0
100％から移行するために3秒かかります。
多くのThx、私の質問のほとんどの部分が解決されました。本当にたくさんthx。しかし、私はまだあなたのためにいくつかの質問を持っています。あなたがここで私を助けてくれないのなら、ここにあなたのロゴが表示されるのを遅らせるにはどうすればいいですか？ –
1）必要なものをサイトにリンクする必要があります.2）ショットを付けて、明確な質問であなたの作品を共有する必要があります。 http://stackoverflow.com/help/how-to-ask –
"私は自分のバージョンを作りたい" - >続行します。あなたのコードがうまくいかないときは、私たちに戻ってきてください。 – dda
私たちにコードを教えてください – rahulsm