特殊効果 Archive

「A VC」のブログでは固定位置に現れるフッターにミュージックプレイヤーがついている。

↑ こんな感じ。

長文系の記事をじっくり読みたいときは確かにこうしてハンディなBGMがあると便利かもしれない。ブログにBGM、というインターフェースも悪くないですな。

実際に動作している様子は以下からどうぞ。

» A VC

なんか、Appleっぽかったのでご紹介。流行りそう？？でもないかな。Mac用のソフト「iTunesVolume」のサイトがちょっとかっこいいです。暗闇にライトが灯っていて、そこからコンテンツが垣間見える・・・という具合ですね。

↑ こんな感じ。

↑ 説明もこんな感じ。若干見辛くもあるが・・。

使いどころが難しそうですが、アイディアの一つとしていかがでしょうかね。

» zumuya » iTunesVolume

最近SNS系のインターフェースを見ていると、写真を自動でかっこよく並べてくれるインターフェースがちらほらと登場しているようです。

普通、写真をいくつかアップすると、同じサイズでずらずらと並ぶだけです。

しかしBadoo.comでは写真をアップするだけで、自動的にサイズをばらばらにして並べてくれます。

↑ こんな感じ。雑誌みたいでいいですよね。

ちょっとしたことですが、こうしたセンスある仕掛けは随所に組み込みたいですよね。実際に動作している様子はBadoo.comで会員登録して見てみてくださいね。

» Badoo

panic.comでは画像をクリックするとき、ちょっと楽しい。

画像がズームしながら浮かび上がってきます。ズームアウトもするするーっと戻っていく感じ。

Lightbox.jsでもZOOM用のライブラリーがありますが、これはZOOMするときのアニメーションが小気味いいですね。

実装したい方はこちらから。 → effects.js

細かいドキュメントは無いみたいですが、panic.comや作者のブログを参考にしてみてください。

» panic.com

DevthoughtのブログでCSSやJavascriptの記事が書かれていました。けれども肝心のコードが見当たりません。

“Click here to see HTML code”という気になる部分にマウスオーバーすると･･･。

アイコンがちょこっと動いて、そこに何かがあることを知らせてくれます。実はこの部分をクリックして初めてコードが登場します。

コードが長いと文章が見にくくなってしまいますが、こうやって要らないときは隠しておけばエントリー全体がすっきりして内容をざっと把握できますね。

JavascriptやCSSの記事でコードは重要なポイントとなりますが、普段は隠す、でも見たいときにはアニメーションで強調、という新しい切り口です。

ちなみに、アニメーションを実現しているjavascriptは、ライブラリを使わず自前で用意されてるようでした。もしライブラリを使って実装したいという方はscript.aculo.usのEffect.SlideDowｎとEffect.SlideUPが使えそうですね。

» Devthought

先日ご紹介した第三弾に続き、第四弾。さて、いつまで続くのやら・・・と思いつつエントリー。

• 小粋なインターフェースを実現する25のコード
• 小粋なインターフェースを実現する25のコード （パート2）
• 小粋なインターフェースを実現する25のコード （パート3）

今回も素敵なコードが揃っていますよ。いくつかご紹介。

↑ CSSでアラートメッセージを作る方法。ウェブサービスなどにいいですね。

↑ こうしたメニューのコードをブラウザ上で作れるジェネレーター。

↑ スライド式のナビゲーションメニュー。

新しくウェブをつくるときに参考にしたいですね。ご利用は以下からどうぞ。

» 25 Code Snippets for Web Designers (Part4)

昨日ご紹介した「あらゆるページに拡大鏡を追加できる『Loupe.js』」の高機能版ともいうべきスクリプトをご紹介。

TJPzoomを使えば画像に拡大鏡をつけられる上、マウスドラッグでさらに拡大したり、高解像度の写真を別に用意しておいて拡大時にそっちを表示できたりします。

以下に簡単に使い方をご紹介。まずは基本パターン。

最初にスクリプトを導入。

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

次に画像のコードを以下のように変更。divタグをつけるのと、widthタグをつけるのを忘れずに。

<div>
<img src="test.jpg" style="width:640px; height: 480px;" onmouseover="TJPzoom(this);">
</div>

なお、このほかにいくつかの画像ファイルをアップしておく必要があります。

すると以下のような画像ができます。マウスオーバーするとその部分が拡大されます。マウスドラッグでさらに拡大することもできます。

また、拡大時にさらに高解像度の画像を使いたいときは次のように。

<div>
<img src="http://valid.tjp.hu/zoom/collage.jpg" style="width:640px; height: 480px;" onmouseover="TJPzoom(this, 'http://valid.tjp.hu/zoom/collage_2.jpg');">
</div>

このように指定すると次の画像のような効果が得られます。ちょっとロードに時間かかるけど。

また余裕のある人は拡大するときのフレームもカスタマイズできる模様。次のような感じです。

詳しい使い方＆ダウンロードは以下からどうぞ。チュートリアル付でわかりやすいですよ。

» valid.tjp.hu – TJPzoom 3 – JavaScript / CSS / DOM image magnifier

これはすごい。あらゆるページに拡大鏡を設置できるJavascriptです。

↑ こんな感じに拡大鏡を設置可能。

画像と簡単なスクリプトをインストールすればOKなようです。

追加するコードは以下のとおり。

まずはページのヘッド部分に以下を追加。

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

そして拡大鏡を追加したい画像にonLoadで以下を追加。

<div>
<img id="..." onLoad="initLoupe(this.id);" src="..." width="356" height="205" alt="...">
</div>

細かい写真などを見せたい場合に便利ですね。知っておくとよさそうです。

ダウンロードや詳しい使い方は以下をご覧ください。

» Loupe.js

ご存知、37sginalsのブログのタイトルの下には、最後にコメントを書いた人の名前が載ります。

ためしにコメントしてみたところ、画面遷移もせずサクっと自分の名前が入りました！（興奮）

» Signal vs. Noise

何か、一瞬の快感です（笑）

思わず毎回コメントを書いてしまいたくなりますね。

実際37signalsブログには、短いですがたくさんのコメントが集まっています。

以前紹介した『たつをのChangeLog一言メッセージ』のように、ブログのフィードバックをもっともらう工夫っていろいろありそうな予感。

たつをさんのブログ、たつをのChangeLogにはコメントフォームがありません。

代わりに一言メッセージというのが付いています。

一言メッセージはたつをさんだけに送られるようです。メールよりも簡単で、コメントよりもパーソナル。

ちょっとした工夫ですが、読者との接点を大切にするたつをさんなりの工夫がうかがえました。

» たつをのChangeLog