JavaScript Tips collection - fadein/fadeout strings

下のサンプルはレイアの visibility 制御を利用した文字列のフェードイン／アウトとズームイン／アウトの例です。

下の「fade in」ボタンを操作すれば「JavaScript」の文字列がフェードインし、「fade out」ボタンを操作すればフェードアウトします。

また、「zoom in」ボタンを操作すれば同様にズームインし、「zoom out」ボタンを操作すればズームアウトします。

この手法は残念ながら汎用オブジェクトでも関数でもありませんが、今では古典的(笑)とも言える一般的な手法です。

文字列のフェードを行うには、まず、フェードしたい文字列を含む position:absolute; なレイアを必要な数だけ作成します。

<style type="text/css"><!--
/* Mac版 IE5 でも動作するようにするには
   BODY の margin を 0 に指定します      */
BODY{ margin:0px; }
/* レイアは全て visibility:hidden; を指定しておきます */
.logo{ position:absolute; visibility:hidden;
  font-family:Osaka,Helvetica; font-weight:bold;
  font-size:32px;
}
/* 各レイアには背景色から最終値まで
   少しずつ異なった色を指定します */
#L0{ color:#f7eeee; }
#L1{ color:#eeddee; }
#L2{ color:#e6ccee; }
#L3{ color:#ddbbee; }
#L4{ color:#d5aaee; }
#L5{ color:#cc99ee; }
#L6{ color:#c488ee; }
#L7{ color:#bb77ee; }
#L8{ color:#b366ee; }
#L9{ color:#aa55ee; }
--></style>
    :
</head>
<body ...>
    :
<!-- 各レイアの ID には 0 からの通番を指定しておきます -->
<div class="logo" id="L0">JavaScript</div>
<div class="logo" id="L1">JavaScript</div>
<div class="logo" id="L2">JavaScript</div>
<div class="logo" id="L3">JavaScript</div>
<div class="logo" id="L4">JavaScript</div>
<div class="logo" id="L5">JavaScript</div>
<div class="logo" id="L6">JavaScript</div>
<div class="logo" id="L7">JavaScript</div>
<div class="logo" id="L8">JavaScript</div>
<div class="logo" id="L9">JavaScript</div>
<!-- 文字列が１英単語ではなく、IE4 にも対応するなら
     nowrap 指定の table タグで文字列を定義します
     例えばこんな風にします

     /* スタイルシートの指定 */
     .logo{ position:absolute; visibility:hidden; }
     .fade{ font-size:32px;
       font-family:Osaka,Helvetica; font-weight:bold;
     }
     #f0  { color:#f7eeee; }
         :
     <!-- レイアの定義 -->
     <div class="logo" id="L0">
     <table border=0 cellspacing=0 cellpadding=0>
     <tr><td nowrap class="fade" id="f0">Fade String</td></tr>
     </table>
     </div>

-->
    :

L0 から L9 までのレイアを順次表示させればフェードイン、その逆動作ならフェードアウトになります。

以下はそのためのスクリプトです。

<script language="JavaScript1.2"><!--
// ===========================================================
if(document.all){
  /* IE4 ではレイアサイズの計算が異なるので調整します */
  document.write(
      '<style type="text/css">\n'
      +'logo{ width:1px; }\n'
      +'<\/style>\n');
}
// ===========================================================
ww         =  0;          // ウィンドウの幅
tid=null; interval=30;    // 表示タイマ
numFade    = 10;          // レイア数
FadeSuffix = 'L';         // レイアID の接頭字
fadeLayers = new Array(); // レイアオブジェクト配列
fadeN      =  0;          // 表示番号

// 初期化処理
function init(){
  // レイアを中央に配置してオブジェクト配列を作成する
  ww=getWindowWidth();
  for(var i=0; i<numFade; i++){
    var div=initDivSize(
                initDivPos(
                    getDivFromName(FadeSuffix+i)));
    moveDivTo(div,
        Math.floor((ww-getDivWidth(div))/2),
        getDivTop(div));
    fadeLayers[i]=div;
  }
  fadeN=0;
}

// フェードイン
function fadeIn(){
  if(tid) clearTimeout(tid);
  if(fadeN<fadeLayers.length){
    setDivVisibility(fadeLayers[fadeN],true);
    if(fadeN>0) setDivVisibility(fadeLayers[(fadeN-1)],false);
    if((fadeN+1)<fadeLayers.length){
      fadeN++; tid=setTimeout('fadeIn();',interval);
    } else tid=null;
  }
}
// フェードアウト
function fadeOut(){
  if(tid) clearTimeout(tid);
  if(fadeN>=0){
    if(fadeN>0) setDivVisibility(fadeLayers[(fadeN-1)],true);
    setDivVisibility(fadeLayers[fadeN],false);
    if((fadeN-1)>=0){
      fadeN--; tid=setTimeout('fadeOut();',interval);
    } else tid=null;
  }
}
// 終了処理
function closure(){ if(tid) clearTimeout(tid); tid=null; }
// --></script>
<body ... onLoad="init();" onUnload="closure();">
<!-- ページのロード完了とともにフェードインするなら
     onLoad="init();" の指定を onLoad="init(); fadeIn();"
     とします
-->
    :

この文字の部分は「ライブラリ集」で紹介している関数です。上のスクリプトでは記述されていませんので、使用する際には「ライブラリ集」を参照して追加してください。

文字列のズームを行うには、フェードのスタイルシートのみの変更でＯＫです。

例えば、こんな風にします。

<style type="text/css"><!--
/* Mac版 IE5 でも動作するようにするには
   BODY の margin を 0 に指定します      */
BODY{ margin:0px; }
/* レイアは全て visibility:hidden; を指定しておきます */
.logo{ position:absolute; visibility:hidden;
  font-family:Osaka,Helvetica; font-weight:bold;
}
/* 各レイアにはフォントサイズを小さい値から
   最後のサイズまで少しずつ異なったサイズを
   指定します */
#L0{ color:#f7eeee; font-size: 9px; }
#L1{ color:#eeddee; font-size:12px; }
#L2{ color:#e6ccee; font-size:18px; }
#L3{ color:#ddbbee; font-size:24px; }
#L4{ color:#d5aaee; font-size:28px; }
#L5{ color:#cc99ee; font-size:32px; }
#L6{ color:#c488ee; font-size:36px; }
#L7{ color:#bb77ee; font-size:40px; }
#L8{ color:#b366ee; font-size:44px; }
#L9{ color:#aa55ee; font-size:48px; }
--></style>
    :
</head>
<body ...>
    :
<!-- 各レイアの ID には 0 からの通番を指定しておきます -->
<div class="logo" id="L0">JavaScript</div>
<div class="logo" id="L1">JavaScript</div>
<div class="logo" id="L2">JavaScript</div>
<div class="logo" id="L3">JavaScript</div>
<div class="logo" id="L4">JavaScript</div>
<div class="logo" id="L5">JavaScript</div>
<div class="logo" id="L6">JavaScript</div>
<div class="logo" id="L7">JavaScript</div>
<div class="logo" id="L8">JavaScript</div>
<div class="logo" id="L9">JavaScript</div>
<!-- 文字列が１英単語ではなく、IE4 にも対応するなら
     nowrap 指定の table タグで文字列を定義します
     例えばこんな風にします

     /* スタイルシートの指定 */
     .logo{ position:absolute; visibility:hidden; }
     .fade{ font-family:Osaka,Helvetica; font-weight:bold; }
     #f0  { color:#f7eeee; font-size: 9px; }
         :
     <!-- レイアの定義 -->
     <div class="logo" id="L0">
     <table border=0 cellspacing=0 cellpadding=0>
     <tr><td nowrap class="fade" id="f0">Fade String</td></tr>
     </table>
     </div>

-->
    :

スクリプトはフェード文字と全く同じで構いませんが、変数や関数名が気になる場合は適当に修正すると良いかも f(^^;

Cross Browser のための DHTML

文字列のフェードとズーム