先々月のことになりますが、tecra(@papapowder)さんが 2011/05/01 に発表した「verb ep」というCD作品の特設webページを作らせてもらいました。
今後リニューアルされる前に、作る途中で考えたこと、試してみたことをメモメモ。
- デザイン:「好きにしていい」
- 背景画像をスライドショー:jquery.BgImageTransition.js
- iPhoneでも試聴させたい:audio.js
- まったく関係のない雑感
Sun 23:17
先々月のことになりますが、tecra(@papapowder)さんが 2011/05/01 に発表した「verb ep」というCD作品の特設webページを作らせてもらいました。
今後リニューアルされる前に、作る途中で考えたこと、試してみたことをメモメモ。
デザイン:「好きにしていい」
verb ep には固定のキービジュアルがなく、@kurage_san さんの素敵な写真群を自由に使わせてもらうことだけが決まっていました。「たくさんの写真をキレイに見せたい」「でも肝心のCD情報が霞んだら困る」と、だいぶモゴモゴした気がします。
最終的にCDケースを模した画像の背景として、写真をスライド表示することにしたのは、バス内でぼーっと外を眺めながら、車窓(ガラス)越しに景色が移り変わる感じを再現できないかな、と思いついたもの。
的外れかもしれませんが、BGMとしての環境音楽(アンビエント)の性格にもつながっていたらいいなぁと。
背景画像をスライドショー:jquery.BgImageTransition.js
スライド表示には jquery.BgImageTransition.js を使いました。画像のフェードイン、フェードアウトのタイミングはかぶらないため、1枚ごとに表示→消える、という動きをします。
写真が消えて黒色背景になる間隔は、CDのタイトル表示に活用。
CDケースを模した画像にはノイズとしての指紋をつけているのですが、実は1時間ごとに数が変わっていたりします(地味すぎて、たぶん誰も気づいてない)。
iPhoneでも試聴させたい:audio.js
今のところ Flash は iPhone / iPad が対応していないので、HTML5 の audio 要素みたく JavaScript で完結できる音源再生の方法はないかと探してみたら......発見!
プレイヤーの見た目は CSS で制御可能。開発元の例を見ると、verb ep 上で使っているシンプルなものだけでなく、プレイリストを併記した形なども作ることができるようです。
まったく関係のない雑感
この覚え書きを書いていて、今まで試してみたサービスやスクリプトを紹介することはあっても、自分のブログ以外に作った webサイト、ページ自体についてザックリまとめることはないことに気づきました。
なぜこういう見た目にしたのか、などは明示するのが気恥ずかしくもありますが、なるべく今後はメモっていけたらいいなと感じています。
ついでにいえば、ブログを書くのが半年ぶりだったことに驚きを隠せません。ブログのリニューアル自体も、途中だったことをすっかり忘れていました(まともに動かない箇所を発見)。
気を取り直して、もろもろ、頑張らなくてはー!