Blog

JSで簡単にクロスフェードを実装できるCrossfader.js

今回のエントリーも前に仕事で使ったので、メモ書き程度にエントリー。

案件によっては、バナーの掲載エリアに制限があり、ローテーションさせる必要がある場合があります。
そんな時に便利なのがCrossfader.js。
» Javascript / CSS Crossfader : CSS . XHTML . Javascript . DOM : Brand Spanking New

独立系のjsなので特に別のライブラリは不必要で、記述するスクリプトも、非常にシンプルです。
» サンプル

実装方法は作者のサイトからダウンロードしたファイルに入っているbsn.Crossfader.jsを読み込んで、ファンクションCrossfaderを実行するだけ。
第一引数に表示する順番、第二引数に切り替える時間(ミリ秒)、第三引数に表示時間(ミリ秒)を与えればOK。

注意事項としてはJSオフの場合に当然、要素がすべてXHTMLの記述通りに表示されてしまうため、親要素に高さを与えてoverflow:hiddenにしておくくらい。

jQueryを使った文字サイズの切り換え

既にこの手の情報は巷に溢れているのですが、メモ書き程度にエントリー。

案件によっては文字サイズの切り換えボタンを付けてくれと言われる事があります。
レガシーブラウザと違ってモダンブラウザでは文字サイズの固定という概念自体がないので、ブラウザ側でのサイズ変更でいいんでない?と思ったりするのですが、多分、昔の名残なんでしょうね。まだ根強く残っていたりします。
そんなわけで、jQueryを使った文字サイズの切り換えのサンプルを作ってみました。
» サンプル
» サンプル(ZIP)

やってることは参照サイトと同じで、文字サイズの入ったCSS(font_m.css、font_l.css)をJavaScriptで切り替え、状態をCookieで保持するというもの。
プラスアルファで、文字サイズメニューをアクティブにするようにしてあります。
このメニューのアクティブ化は、切り替えるそれぞれのCSSにスタイルを設定するのが一番楽かと思います。

使用しているライブラリー
» jQuery
» StyleSwichter jQuery plugin
» jquery.cookie.js

参照サイト
» StyleSwichter jQuery plugin – Example

C-team バナーデザインのクラウドソーシング

こちらのサイトでちょっと気になる感じの記事があったので、トラックバック。
» C-teamで作るバナー広告の効果がスゴすぎてひいた話 : ロケスタ社長日記

サービス自体は「数うちゃ当たる」が基本で、たくさん集めたバナーを表示して、クリックレートに対して表示頻度を調整するという仕組みらしい。
そのバナーを作る側に対してのインセンティブは、効果測定ランキングに応じてポイントがバックされるみたい。(ちなみに、1位だと50,000ポイントらしいです)
» みんなのクリエイティブエージェンシー:C-team

確かにバナーはクリックされてなんぼだから、考え方はよく分かるのだけど、作り手へのバックが非常にシビアな印象。
ランクイン自体、多分結構大変なものだと思うから、作る側も「数うちゃ当たる」になりやすく、それによってクオリティコントロールが難しくなるんじゃないかなと。
いや、もちろん「クリックされればOK。バナーのクオリティは二の次です」というのもわかるんだけど。

とは言え、始まったばかりのサービスみたいだし、しばらく様子を見てみようと思う。
自分自身、せっかくデザイナーなわけで、ちょっと応募してみてもいいかもしれないし、正直、このあたりの動きが、今後、どのレベルまで広がるのかも業界の関係者として気になるしね。

※09.05.19 タイトルを若干修正しました。

Page 1 of 3123