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

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

以前、書いたjQueryを使って まず画像を表示させてから、コンテンツを表示させるフェードエフェクトを実装する記事を書いたのですが、コメントの方で複数画像の場合についてコメントを頂いて。

複数画像でも、簡単に出来るようにプラグインをちょっと作ってみたくなって、今回作って見たのを紹介したいと思います、すべてのコメントに対して応えることが出来るわけではないのですが、コメントの方で興味をそそられるものがあれば、やっていこうかと思ってます。

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

 

 

更新履歴

  • 初回のみ表示の機能を追加しました

 

jQueryを使って、ページを開いた時に複数画像を順にフェードインとフェードアウトをしてからコンテンツを表示するプラグインを作ってみた

とりあえず、DEMOを御覧ください

DEMO 表示

 

どういったことを行っているかと言うと、以前書いた記事の応用でjQueryのfadeIn、fadeOutを使ってアニメーションを実装しています。コンテンツをすべて非表示にして、順番に画像をフェードイン・フェードアウトさせているだけなのですが。

 

HTMLのソースはこのようになっています

<!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>
  <script src="fade.js"></script>
  <style>
    #fade-image div {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: center center no-repeat;
      background-size: cover;
      display: none;
      z-index: 9999;
    }
  </style>
  <script>
    deley_time = 1500; //フェードアニメーションのスピード 1000 = 1秒
    image_list = [
      "00001.jpg",
      "00002.jpg",
      "00003.jpg",
    ]//画像のリスト
  </script>
</head>

<body>
  <h1>コンテンツ</h1>
</body>
</html>

jQueryを読み込んだ後に、今回作ってみたフェード実装プラグイン、fade.jsを読み込んで少しのCSSとscriptを記入するだけで使えるようにしました。

 

 

プラグインの使い方

headタグ内に以下を貼り付けます

  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="fade.js"></script>
  <style>
    #fade-image div {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: center center no-repeat;
      background-size: cover;
      display: none;
      z-index: 9999;
    }
  </style>
  <script>
    deley_time = 1500; //フェードアニメーションのスピード 1000 = 1秒
    image_list = [
      "00001.jpg",
      "00002.jpg",
      "00003.jpg",
    ]//画像のリスト
  </script>

jQueryはCDNで読み込まれていますが、今回作成したfade.jsが必要です以下よりダウンロードしてください

DOWNLOAD

あとはfade.jsを任意の場所に設置して、それに合ったパスで指定してください。

 

 

画像の指定とフェードの速度の指定

  <script>
    deley_time = 1500; //フェードアニメーションのスピード 1000 = 1秒
    image_list = [
      "00001.jpg",
      "00002.jpg",
      "00003.jpg",
    ]//画像のリスト
  </script>

次に画像の指定ですが、上のコードを参考に00001.jpgのところを画像へのURLや相対パスを指定します、個数は好きな分だけ同じように行を増やしてください

そしてフェードの速度ですが、 deley_time の数字のところで速度を決めれます 1000 = 1秒となっています。

 

 

オプション

    firstview = "on";  //初回のみ表示する場合は on 毎回表示する場合は省略可

 

 

オプションの指定の仕方

  <script>
    firstview = "on";  //初回のみ表示する場合は on 毎回表示する場合は省略可
    deley_time = 1500; //フェードアニメーションのスピード 1000 = 1秒
    image_list = [
      "00001.jpg",
      "00002.jpg",
      "00003.jpg",
    ]//画像のリスト
  </script>

オプションは 設定のscriptタグ内に記入すればOKです、前の方でも後ろの方でもどちらでもOK

 

 

使い方は簡単 3 Step

  • Step 1 : headにコードを貼り付け
  • Step 2 : fade.jsを設置(必要な場合はheadに書いたコードのパスの変更)
  • Step 3 : 画像の指定とフェードの時間の設定
  • オプションをお好みで設定
  • おわり

 

DEMOのファイル一式も置いて起きますので、好きに使ってください

DOWNLOAD
PR

COMMENT

  1. ナナコ

    はじめまして。

    jQueryの事を調べていて、この記事を拝見いたしました。

    トップページに戻る度に、一回目と同じように画像が3枚表示されてコンテンツが表示されますが、
    2回目以降は、画像を表示させずにコンテンツが表示をさせるには、クッキーを使うjQueryが必要でしょうか?
    お作りしている「fade.js」との連動は簡単でしょうか・・・

    質問ばかりですみません・・・><

  2. 管理人

    ナナコさん

    初回か、それ以外なのか等は
    ブラウザにcookieやlocalstorageを使って記憶させるしかないですね
    fade.js の中身を if文で記録した情報を元に条件分岐してやれば大丈夫ですよ

    あと、プラグインの方は
    初回表示に対応させてみました

コメントを残す

PR

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

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

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

Twitter Facebook Google+ Feedly RSS

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