Browsing articles from "10月, 2009"
10月
27
2009

クロスフェードを実装する為のCrossfader

JavaScript Library Archive

配布元:Brand Spanking New
ライセンス:Creative Commons:Attribution Share Alike

クロスフェードとは物がゆっくりと消えていきながら別の物が現れる処理のこと。
特定の要素をフィードアウトさせながら別の要素を表示する処理になります。

設置方法

bsn.Crossfader.jsをhead要素なので読み込みます。

<script type="text/javascript" src="/js/bsn.Crossfader.js"></script>

以下のように順番に表示したい要素に対して、それぞれidを振ります。(XHTMLの記述にはルールはありません。)

<ul><li id="pr1"><a href="#">テキストテキストテキスト</a></li><li id="pr2"><a href="#">テキストテキストテキスト</a></li><li id="pr3"><a href="#">テキストテキストテキスト</a></li><li id="pr4"><a href="#">テキストテキストテキスト</a></li><li id="pr5"><a href="#">テキストテキストテキスト</a></li></ul>

そして、その記述の後(body要素を閉じる直前などがお勧め)に以下のコードを記述します。

<script type="text/javascript"> var cf = new Crossfader( new Array('pr1' , 'pr2' , 'pr3' , 'pr4' , 'pr5'), 500, 5000 );</script>

クロスフェードしたい要素のidをnew Array内にカンマ区切りで記述してきます。

その後に今の要素から次の要素を表示する間隔(ミリ秒)とその要素を表示する間隔(ミリ秒)を記述します。間隔についてはいろいろな数字を入れながら間隔をつかんでいくと良いでしょう。

サンプル

クロスフィード用に用意した要素は、positionがabsoluteを適応されて、通常のレンダリングフローより切り取られます。

前後の要素にmarginを使う、親要素にheightを適応するなどして表示するスペースを確保する必要があります。

複数のバナーなどを配置し、ごちゃごちゃしそうなときには便利なjsライブラリですね。

10月
12
2009

谷中の猫さん

谷中に猫を撮りに行きましたカメラねこ

今回は単焦点のレンズを貸してもらったのでイイ感じのボケ具合になりましたkira*

Positive Life - 「伝える」 webデザイナーを目指す夢日記-

Positive Life - 「伝える」 webデザイナーを目指す夢日記-

Positive Life - 「伝える」 webデザイナーを目指す夢日記-

マ…マクロレンズ欲しい!!

10月
8
2009

position

<link rel="stylesheet" type="text/css" href="layout.css" />

div#flashcontent{
position: absolute;
top: 133px;
left: 110px;
}

div#flashcontent02{
position: absolute;
top: 286px;
left: 126px;
}

10月
8
2009

フラッシュムービー貼り付け

<script type="text/javascript" src="js/swfobject.js"></script>

<div id="flashcontent">フラッシュが入っていません※ここに入れた部分がフラッシュが見れない場合に表示されます。</div>
<script type="text/javascript">
var so = new SWFObject("flash.swf", "index", "150", "150", "7", "#000000");
so.addParam("menu", "false");
so.write("flashcontent");
</script>

  • フラッシュが入っていない場合は<div id="flashcontent"> </div>の中が表示されます。なのでここにフラッシュプレイヤーのDLの告知をいれればよいです。
  • var so = new SWFObject("flash.swf", "index", "150", "150", "7", "#000000");でフラッシュファイル名と幅と高さ、プライヤーのバージョンと背景色を指定します。
  • so.addParam("menu", "false");ではコンテキストメニューを隠します。
  • so.write("flashcontent");プレイヤーが入っていない場合の対応です。
10月
5
2009

Mootoolsを使ったlightboxスクリプトTOP10

Mootoolsを使ったlightboxスクリプトTOP10

Rounding Up the Top 10 Mootools Lightbox Scripts

LINE25で、Mootoolsを使ったlightboxスクリプトTOP10がまとまっています。

ざっといくつかご紹介。

Smoothbox
 画像、インナーHTML、Ajax、iframeをサポート
Multibox
 画像、インナーHTML、Ajax、iframe、Flash、動画をサポート
RoeBox
 画像をサポート
Litebox
 画像をサポート
Milkbox
 画像、Flashをサポート

ページ:12»
年会費無料のクレジットカードなら「楽天カード」