jQueryを使ったページ読み込みエフェクト
JQuery
は本当に便利で便利なJavaScriptライブラリです。ページやコンテンツの読み込みの効果は、jQueryで非常に簡単に実装できます。ここでは、Webページのコンテンツをフェードインのページ読み込みエフェクトとして表示する例を示します。それはあなたの読者に衝撃的な印象を与えるでしょう。 🙂
アイデアは簡単です〜
1.コンテンツブロックを含むdivブロックを作成する
このdivブロックは、ページ読み込みエフェクトでコンテンツのフェードを実装するために使用されます。
<div id="page__effect" style="display:none;"> <!-- this content is hide, need jQuery to fade in --> </div>
2. jQueryのフェードイン効果
ドキュメントを表示する準備ができたらjQuery fadeInエフェクトを作成する
$(document).ready(function(){ $('#page__effect').fadeIn(2000); });
__P.SfadeIn()は、関数内のjQueryライブラリビルドです。
デモ
フェードインロード効果を実装するための完全なjQueryコード。
<html> <head> <title>JQuery Page Loading Effect</title> <script type="text/javascript" src="jquery.js"></script> </head> <script type="text/javascript"> $(document).ready(function(){ $('#page__effect').fadeIn(2000); }); </script> <body> <div id="page__effect" style="display:none;"> <h1>JQuery Page Loading Effect</h1> This is page loading effect with JQuery 1<BR> This is page loading effect with JQuery 2<BR> This is page loading effect with JQuery 3<BR> This is page loading effect with JQuery 4<BR> This is page loading effect with JQuery 5<BR> This is page loading effect with JQuery 6<BR> This is page loading effect with JQuery 7<BR> This is page loading effect with JQuery 8<BR> This is page loading effect with JQuery 9<BR> This is page loading effect with JQuery 10<BR> This is page loading effect with JQuery 11<BR> This is page loading effect with JQuery 12<BR> This is page loading effect with JQuery 13<BR> This is page loading effect with JQuery 14<BR> </div> </body> </html>