ページを開いた時に画像をフェードイン、フェードアウトで表示してからコンテンツを表示させる

jQueryを使って、ページを開いた時に印象的な画像をフェードインで表示し(ロゴ等)、時間経過でフェードアウトし、WEBページのコンテンツを表示させるテクニック。

プラグイン版も作りましたのでこちらもどうぞ

ページを開いた時に画像をフェードイン・フェードアウトするプラグイン

フェードインとフェードアウトを実装する

まず、考え方ですが

body以下に、最初に表示させるブロックとその後に表示させるブロックと2つのブロックに分けます。すでにコンテンツがある場合は、それらの2つ目のブロックに収めるようにします。一つ目のブロックは空でもOKで背景で画像を指定することでCSSで表示画面に合ったサイズに自動で合わせるように出来ます。

それぞれ、デフォルトではCSSで非表示にしておき、jQueryを使ってフェード効果での表示、非表示を切り替えて行きます。

DEMO SAMPLE

DEMO 表示

CODE

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0">
    <title>Document</title>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  </head>
  <style>
    body,html {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .block-one {
      display: none;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-image: url("01359.jpg");
      background-attachment: fixed;
      background-position: center center;
      background-repeat: no-repeat;
      -webkit-background-size: cover;
      background-size: cover;
    }

    .block-two {
      display: none;
      width: 100%;
      height: 100%;
      background: url("3860.png");
      background-attachment: fixed;
      background-position: center center;
      background-repeat: no-repeat;
      -webkit-background-size: cover;
      background-size: cover;
    }
  </style>

  <body>
   
   
    <div class="block-one"></div>
    
    <script>
      $(".block-one").fadeIn(1800);
      $(document).ready(function(){
        setTimeout(function() {
          $(".block-two").css("display","block");
          $(".block-one").fadeOut(2500);
        }, 2500);
      });
    </script>
    
    
    <div class="block-two">
      <header></header>
      <div></div>
      <footer></footer>
    </div><!-- /.block-two -->
    
    
  </body>
</html>

block-one には最初に表示させたいものを、block-twoには次に表示させたいものを入れます。この順序は重要でブラウザはHTMLを上から順番に読み込みますので、その順で設定しておかないと一瞬チラ見するような形になったりします。(このSAMPLEの例では、2つ目のブロックも画像で表現してあります)

jQueryもfooterではなくheader部分で読み込ませる必要があります。また必要最低限のCSSもHTMLにインラインで記入しておく必要があります、CSSも外部ファイルから読み込んだ時に読み込みの遅延で想定と違う表現になってしまう場合があります。

フェード効果の調整

フェード効果はjQueryを使って与えています

      $(".block-one").fadeIn(1800);
      $(document).ready(function(){
        setTimeout(function() {
          $(".block-two").css("display","block");
          $(".block-one").fadeOut(2500);
        }, 2500);
      });

fadeIn(1800) この部分で最初のフェードの効果を設定しています。効果は1800で1.8秒かけてフェードインします。

fadeout(2500) この部分では、最初に表示したものをフェードアウトさせる効果を指定しています。効果は2500で2.5秒です

そして、}, 2500); この部分の数字は、最初にフェードインしたコンテンツがフェードイン効果が完了したあとにどれぐらいの時間が経ってから、フェードアウト効果を開始するかを設定しています。2500で2.5秒経ってから実行します。

また、documet ready をつけることで、メインのコンテンツのHTML部分の読み込みが完了してから、2.5秒後に実行するようになっています。多くの場合はすぐに読み込まれるので、そのまま2.5秒が表示時間と考えてもいいです。