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

fade
このエントリーをはてなブックマークに追加
PR

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秒が表示時間と考えてもいいです。

 

PR

COMMENT

  1. aoyan

    はじめまして。いろいろ調べていてこちらのページを拝見させて頂きました。
    最初の画像を3枚ほどスライドショーで表示する方法はありますでしょうか?
    もしお時間があるようでしたら、ご回答頂けると助かります。

  2. 管理人

    aoyanさん

    ちょっと作ってみたくなったのでプラグイン化してみました
    よかったら、こちらを使ってみてください

    http://9-bb.com/fade-3/

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)