誰でもこの画像をどのようにするかを教えていただけますか？

Question

私はちょうどこの美しいウェブサイトを通過していた。誰もがその設計者は、「魔法がロードされた」事を示しているかを教えてもらえます： - サイトがcomplelelyロードされる画像は同じようにすぐに消え

http://danielhellier.com/showcase/danielhellier/

。

ありがとうございます。

Answer 1

彼はJavaScriptを使用しています。

サイトがロードされた後、彼はロードのdivをフェードアウト最初の行に

ファイルを見http://danielhellier.com/showcase/danielhellier/js/jquery.bits.js

：

$(window).load(function() { 
    $('#loading').fadeOut('slow'); 
}); 

ロードDIV：

<div id="loading"> 
    <div align="center"> 
     <p>The magic is loading</p> 
     <img src="img/loader.gif" alt="Loader" /> 
    </div> 
</div> 

ためのCSSローディングdiv：

#loading { 
    background: none repeat scroll 0 0 #1E1E1E; 
    color: #FFFFFF; 
    cursor: wait; 
    height: 100%; 
    overflow: hidden; 
    position: absolute; 
    width: 100%; 
    z-index: 100; 
} 

z-indexがすべての上に置かれ、高さと幅が100％であるため、不透明な背景でウィンドウ全体を占めていることに注目してください。

また、彼は<div>を残りのHTMLの前に置きます。したがって、最初に読み込まれ、それを削除するJavaScriptは、すべてがロードされるまでトリガーされないウィンドウ上のloadイベントによってトリガーされます。

非常に良い効果。