AppleのMacページに似たページプリローダーを作成する方法

AppleのMacページを自分のWebサイトでご覧になってください。 http://www.apple.com/mac/ "body"は、ページの読み込み中に中央に画像を表示します。ページが完全に読み込まれた後、コンテンツがフェードインされます。ChromeまたはSafariを使用して要素インスペクタを開くと、ページが読み込まれたときに本文にclass="loaded revealed"が表示されます。コンテンツがフェードインされます。クラスを削除すると、コンテンツがフェードアウトします。AppleのMacページに似たページプリローダーを作成する方法

私のウェブサイトでこれと似たようなものをお探ししています。私は全体の内容が表示されないようにしたくない、私はまだヘッダーとフッターを表示したい。だから、基本的に私はdiv#content_areaを文書の準備をしてスライドさせたいのです...唯一の問題は、彼らの体にはdisplay:none;を一切使用しないということです。 JSファイルが失敗すると、コンテンツは引き続き表示されるため、これらについては少し注意しています。

どうすればいいですか？彼らは道彼らは誰もが私がする必要があるのは.slide()機能を追加し、ページが読み込まれるまで内容を非表示にしている

$(document).ready(function() { 
    $('div#content_area').attr(class, loaded revealed); 
});

ような何かを書くことができますので、それは軽量である必要がありません。

出典

2011-12-18 henryaaron

昨日はあなたにもう少し注意を取得します。それが多くを助けたように見えません。私の答えは@ user1090389で受け入れられますか？ –

それは私が探していたものではありませんでした。私はこれに取り組むつもりで、あなたに知らせるでしょう... – henryaaron

おそらくあなたの質問に言い換えてください。 Javascriptを使用すると、ソリューションが提供されます。あなたは、スクリプトをオフにして滑らかなダウングレードのために非ハックのno-JS回答を具体的に探していましたが、何もありません。 –

が、Appleは不透明度が0にと体の負荷に設定されているすべてのそれの要素を持っていることを見出した、それはボディにクラスを追加し、使用しています。この

div{ 
opacity:0; 
} 
body.loaded div { 
opacity:1; 
transition:etc.etc.; 
}

のようないくつかの基本的なCSSは、ここに私のバージョンはhttp://jsfiddle.net/dqUaX/1/、ですそれについての素晴らしい何

は次のとおりです。

不透明度は、ブラウザが非表示しません内容を古い場合ので、CSS3の属性と考えられています。
実際にjQueryを使用して不透明度を0に設定しているため、ユーザーがcss3ブラウザを使用していてもJavaScriptを無効にしてもコンテンツは表示されます。
divを非表示にするにはCSS3が必要なので、読み込む必要がないように巨大なDATA URIを背景画像に使用しました。

かなり素晴らしいですか？

あなたは<body>終了タグの終了前にスクリプトを置く必要があります...私はあなたのためにこれを再びタグ付け

出典

2011-12-30 05:24:01 henryaaron

おめでとうございます。あなたはまだjavascriptを使用していますが、Opacityは 'display：none'と同じことを行います。興味深い...＃3をもう少し説明できますか？ –

IE6と7は長いデータURIをレンダリングできません...私の質問で述べたように、少しJavaScriptは問題ありません。 – henryaaron

コンテンツのDIVを適切な場所に設定します。プレースホルダになるイメージを設定します（可能であれば絶対/必要）。

CSSでは、z-indexプロパティを使用してイメージを他のイメージの上に保持します。

IMGをdisplay:none;のプロパティにしてから、ページが読み込まれるとjQueryでオンにすることができます... JSではプレースホルダが表示され、座っています... JSなし、イメージプレースホルダは表示されず、ユーザーはコンテンツDIVが読み込まれるときにそれを見るだけです。

意味がありますか？

出典

2011-12-18 04:16:18

画像がその上にあってもコンテンツがどのように隠れるのかまだ分かりません。 – henryaaron

オーバーレイしている写真のブロックコンテナが不透明であることを確認してください.zインデックスを大きくして頂きます... jQueryを使用して背景色のCSSプロパティを動的に設定することができます。 –

ちょっと言いたいことは、コンテンツをJSなしで適切に表示したい場合は、スライドしない、余白がない、不可視でない、または表示されないようにすることです：none ...単に不透明にするオーバーレイユーザーがJSを有効にしている場合、ページの読み込みが完了したときにスライドさせる - 最終結果は、コンテンツがちょうど到着したように見えます。 :) –

AppleのMacページに似たページプリローダーを作成する方法

答えて

関連する問題