ProtoFaderで、バナーをクロスフェードさせる

左上：　通常のクロスフェード　右上：　blindエフェクト
二段目左：　slideエフェクト　二段目右：　dropoutエフェクト
三段目左：　slideエフェクトにspringのtransitionを追加

　やや今さらという観がありますがクロスフェードのスクリプトを紹介します。クロスフェード関係のものとしてはCrossFader などがありますが、今回のスクリプトはPrototypeとscript.aculo.us使用を前提としています。その代わり、フェード以外にさまざまな 視覚効果や遷移方法（transition）を選択できます。また、HTMLへの記述は最小限にとどまるよう工夫しています。具体的には 次のようなタグ要素を書くだけで済みます。

  <div id="protofader1" class="pf_content"></div>  

　手順としてはまず、例によってPrototypeとscript.aculo.us をscriptタグに記述します。

  <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="scriptaculous.js?load=effects"></script>  

　次に下記のCSSをstyleタグ内に追加するか、外部CSSファイルに書きます。

  div.pf_content { margin: 15px 30px; padding: 5px; position: relative; overflow: hidden; background-color: #F6F6F6; border-style: solid; border-color: #ccc; border-width: 0 1px 2px 0; } div.pf { overflow: hidden; position: absolute; left: 5px; top: 5px; border: none; } div.pf img { position: absolute; left: 0px; top: 0px; border: none; }  

　そして、バナーの設定を行います。JavaScriptに記述する格好になるので、body終了タグの直前に追加するか、CSSのように 外部ファイルを作ります。JSON形式で書かれており、まずimageSizeプロパティに[バナーの幅,　バナーの高さ]を設定。そして、 campaignプロパティですが、これは配列になっており、バナーの数だけここにJSON形式のオブジェクトを追加します。 それぞれ、imgプロパティにバナー画像のURLを入れ、URLプロパティ（ややこしいですが）にリンク先のURLを入れます。 また、altプロパティには、マウスオーバーしたときに表示するメッセージを入力します。

  var bannerData1 = { imageSize: [160, 60], campaign: [ { img: 'banner01.png', url: 'campaign1.html', alt: 'キャンペーン１' }, { img: 'banner02.png', url: 'campaign2.html', alt: 'キャンペーン２' }, { img: 'banner03.png', url: 'campaign3.html', alt: 'キャンペーン３' } //注：　最後の{}の後には","をつけないこと ] };  

　複数のバナーを一つの画像にまとめた場合も考慮して、次にように設定することができます。ただし、下の画像のようにバナー画像を「縦に」 並べた画像を使用することが前提になります。

　上のスクリプトと違う点は、imageURLという新たなプロパティが追加されている点で、ここにバナーを連結した画像を設定します。 一方でcampaignプロパティですが、ここではimgプロパティが不要になります。

  var bannerData2 = { imageSize: [160, 60], imageURL: 'banner01.png', campaign: [ { url: 'campaign1.html', alt: 'キャンペーン１' }, { url: 'campaign2.html', alt: 'キャンペーン２' }, { url: 'campaign3.html', alt: 'キャンペーン３' } ] };  

　バナーのエフェクトを開始するには、下記のようにnew演算子でProtoFaderを呼び出します。引数にはまず、 バナーを設定した要素（ID名でokです）、先ほど設定したバナー用のデータを格納した変数を渡します。最低限これだけで大丈夫です。 ただし、もっと細かい設定をしたい場合は、delayに各バナーの表示時間、durationにエフェクトの持続時間、effectにエフェクト名 （"appear", "blind", "slide", "dropout"の四種類から選びます。"appear"の場合は省略可）、そして必要であれば transitionを追加します（省略するとデフォルトのsinoidalに。"blind", "slide"エフェクトを使用する場合は、transitionに "spring"を選ぶと面白いエフェクトになります）。

  new ProtoFader(element, bannerData, delay, duration, effect, transition);  

下に具体的な記述例を挙げています。

  new ProtoFader('banner1', bannerData1); new ProtoFader('banner2', bannerData1, 1.5, 0.8); new ProtoFader('banner3', bannerData2, 1.5, 0.8, 'slide', 'spring'); new ProtoFader('banner4', bannerData2, 1.5, 0.8, 'dropout');  

　HTML内にバナーを記述する際は、DIVタグを使用しその中にID属性と"pf_content"というクラス名を追加します。 バナーの設定データは複数作ることができますが、HTMLに記述するバナー用のタグにはそれぞれ固有のID名が必要です。

  <div id="banner1" class="pf_content"></div> <div id="banner2" class="pf_content"></div> <div id="banner3" class="pf_content"></div> <div id="banner4" class="pf_content"></div>  

　そして最後に（順番はどうでもいいのですが）クロスフェードのスクリプトを追加します。このページで使用しているクロスフェードは ソースを見れば確認できますので、是非ご参考にしてください。

  var ProtoFader = Class.create({ initialize: function(element, data, delay, duration, effect, transition){ if (!$(element)) return; this.wrapperNode = $(element); this.wrapperNode.addClassName('pf_content').setStyle({ width: data.imageSize[0] + 'px', height: data.imageSize[1] + 'px' }); this.wrapperDiv = new Element('DIV') .insert(new Element('DIV').insert(new Element('A').insert(new Element('IMG')))); this.banner = []; this.duration = duration || 1.0; this.delay = delay || 2.0; this.effect = effect || 'appear'; this.transition = Effect.Transitions[transition] || Effect.Transitions.sinoidal; this.order = 1; this.bannerNum = data.campaign.length; this.state = 'idle'; for (var i = 0; i < this.bannerNum; i++) { if (data.imageURL) var imgUrl = data.imageURL, imgTop = -data.imageSize[1] * i + 'px'; else var imgUrl = data.campaign[i].img, imgTop = '0px'; var banner = this.banner[i] = this.wrapperDiv.cloneNode(true); banner.addClassName('pf').setStyle({ width: data.imageSize[0] + 'px', height: data.imageSize[1] + 'px' }).down('A').writeAttribute({ href: data.campaign[i].url, title: data.campaign[i].alt }).down('IMG').writeAttribute({ src: imgUrl, alt: data.campaign[i].alt }).setStyle({ left: '0px', top: imgTop }); banner.hide(); this.wrapperNode.insert(banner); }; this.banner[0].show(); new PeriodicalExecuter(function(pe) { if (this.state == 'idle') { this.state = 'running'; this.order = this.order % this.bannerNum; this.prevOrder = this.order == 0 ? this.bannerNum - 1 : this.order - 1; if (this.effect != 'dropout') { Effect.Fade(this.banner[this.prevOrder], { delay: this.delay, from: 0.8, to: 0.0, duration: this.duration, transition: this.transition }); } switch (this.effect) { case 'appear': Effect.Appear(this.banner[this.order], { delay: this.delay, from: 0.2, to: 1.0, duration: this.duration, transition: this.transition, afterFinish: function(){ this.state = 'idle'; this.order++; }.bind(this) }); break; case 'blind': new Effect.Parallel([ Effect.Appear(this.banner[this.order], { delay: this.delay, from: 0.2, to: 1.0, transition: this.transition, sync: true }), Effect.BlindDown(this.banner[this.order], { sync: true }) ], { delay: this.delay, duration: this.duration, transition: this.transition, afterFinish: function(){ this.state = 'idle'; this.order++; }.bind(this) }); break; case 'slide': new Effect.Parallel([ Effect.Appear(this.banner[this.order], { delay: this.delay, from: 0.2, to: 1.0, transition: this.transition, sync: true }), Effect.SlideDown(this.banner[this.order], { sync: true }) ], { delay: this.delay, duration: this.duration, transition: this.transition, afterFinish: function(){ this.state = 'idle'; this.order++; }.bind(this) }); break; case 'dropout': Effect.DropOut(this.banner[this.prevOrder], { delay: this.delay, duration: this.duration, transition: this.transition }); Effect.Appear(this.banner[this.order], { delay: this.delay, from: 0.2, to: 1.0, duration: this.duration, transition: this.transition, afterFinish: function(){ this.state = 'idle'; this.order++; }.bind(this) }); break; } } }.bind(this), 0.1); } });