jQueryでページ移動の際のフェードイン
「jquery」で中ページに移動する際にフェードインで表示される方法のご紹介です!!
「jquery.js」をダウンロード致します。
ダウンロード先
「fullPage.js」をfullPage.js
ダウンロード先
HTMLを記載
下記のソースを追加してください。
|
1 2 3 4 5 |
<body> <div id="wrapper"> ページ内容を記載 </div> </body> |
Javascriptを記載
下記のソースを追加してください。
※読み込みのcssはサンプルのリンク先を参照してください。
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ // サイトアクセス時にbodyを非表示にしてから、フェードインさせる $('body').hide(); $('body').fadeIn(2000); // サイトアクセス時にbodyを非表示にしてから、フェードインさせる }); </script> |
サンプル
下記のソースをお使いください。
表示サンプルを掲載いたします。
サンプルはこちら：jQueryページ全体をフェードインサンプル
