スクロールすると変化しながらついてくる画像 | SIMPLE*SIMPLECSSでこんなこともできるのですねぇ。すごい。 ↑ アニメーションでどうぞ（クリックすると実際のデモ画面へ）。 応用すると次のような効果も実現できますね。これもおもしろい。 ↑ シュレッダーちっくに（クリックで動作する画面へ）。 アイデア次第でいろいろ使えそうですね。 実際のマークアップの仕方は以下に詳しいですよ。 » Mike asks the CSS Guy about a scrolling trick with background images (Ask the CSS Guy)
画面をダイナミックに使ったナビゲーション（melissahie.com） | SIMPLE*SIMPLE
シンプルかつダイナミックなナビゲーションを採用したサイト。デザイナーのMelissaさんのポートフォリオサイトですね。 ↑ ここからスタート。「READY, GO!」をクリックすると・・・。 ↑ 画面がぐいーん！と動いて・・・。 ↑ このように切り替わります。 そんな感じでジェットコースター気分でサイトを見てまわることができます。ちょっと気分がいいですね。シンプルなサイトを作りたい方は参考にされてみてはいかがでしょうか。 » www.MelissaHie.com
「単純に並べるだけ」じゃないインターフェース（Badoo） | SIMPLE*SIMPLE
最近SNS系のインターフェースを見ていると、写真を自動でかっこよく並べてくれるインターフェースがちらほらと登場しているようです。 普通、写真をいくつかアップすると、同じサイズでずらずらと並ぶだけです。 しかしBadoo.comでは写真をアップするだけで、自動的にサイズをばらばらにして並べてくれます。 ↑ こんな感じ。雑誌みたいでいいですよね。 ちょっとしたことですが、こうしたセンスある仕掛けは随所に組み込みたいですよね。実際に動作している様子はBadoo.comで会員登録して見てみてくださいね。 » Badoo
タイトル下に名前を表示させることでコメントさせる仕組み | SiMPLE*SiMPLE
タイトル下に名前を表示させることでコメントさせる仕組み February 19, 2007 8:17 AM written by 8maki ご存知、37sginalsのブログのタイトルの下には、最後にコメントを書いた人の名前が載ります。 ためしにコメントしてみたところ、画面遷移もせずサクっと自分の名前が入りました！（興奮） » Signal vs. Noise 何か、一瞬の快感です（笑） 思わず毎回コメントを書いてしまいたくなりますね。 実際37signalsブログには、短いですがたくさんのコメントが集まっています。 以前紹介した『たつをのChangeLog一言メッセージ』のように、ブログのフィードバックをもっともらう工夫っていろいろありそうな予感。 Info: 特殊効果 | 固定リンク | コメント (0) | トラックバック (0) | ↑
スライダーでブログの過去記事を検索できるインターフェース | SiMPLE*SiMPLE
スライダーでブログの過去記事を検索できるインターフェース August 23, 2007 5:30 AM written by Gen Taguchi Save the assistants.comのブログのインターフェースがちょっと気になります。過去記事へのアクセスをスライダーで行うことができるのです。 ↑ こんな感じ。Ajaxな感じで、スライドさせると動的にページをロードしてくれます。 「次のページ」「1 > 2 > 3 >」といったインターフェースより直感的でよいですね。 » save the assistants Info: ナビゲーション | 固定リンク | コメント (0) | トラックバック (0) | ↑
CSSとJavascriptだけでスライド効果を実現する方法（script.aculo.usとか抜きで） | SIMPLE*SIMPLE
テキストなどがするすると現れたり消えたりするスライド効果はときどき使いたくなりますよね。ただ、それだけのためにPrototype.jsとかscript.aculo.usを使うのもね・・・という方のためのスライド効果作成講座。 細かいところはコードを見てもらうとして、素敵なスライド効果をシンプルなスクリプトだけ（CSSとJavascript）で実現できます。ダウンロードもできます。 » Firblitz: Re: How to Create Digg Comment Style Sliding DIVs with Javascript and CSS 応用例としてスライドする時間を設定したり、スライド終了時にアラートしたりする方法も紹介しています。 個人的にはまだまだJavascriptを勉強中なので、このサイトの丁寧な説明がうれしかったですね。 setTimeoutとかこう使うのねー、と読
必要のないときはコードを隠してエントリをすっきりさせるjavascript活用術 | SiMPLE*SiMPLE
必要のないときはコードを隠してエントリをすっきりさせるjavascript活用術 May 7, 2007 8:08 AM written by 8maki DevthoughtのブログでCSSやJavascriptの記事が書かれていました。けれども肝心のコードが見当たりません。 "Click here to see HTML code"という気になる部分にマウスオーバーすると･･･。 アイコンがちょこっと動いて、そこに何かがあることを知らせてくれます。実はこの部分をクリックして初めてコードが登場します。 コードが長いと文章が見にくくなってしまいますが、こうやって要らないときは隠しておけばエントリー全体がすっきりして内容をざっと把握できますね。 JavascriptやCSSの記事でコードは重要なポイントとなりますが、普段は隠す、でも見たいときにはアニメーションで強調、という新しい切り口です。
お問い合わせ画面でFAQをリアルタイム表示 | SIMPLE*SIMPLE
家系図をつくれるサービス、Geniのお問い合わせ画面がなかなか便利です。 ↑ 普通の問い合わせ画面ですが、内容を入力しはじめると・・・。 ↑ その言葉をリアルタイムに解析して関連するFAQを表示してくれます。 他のサイトでも採用されているようですが、わかりやすいですよね。サポートコストが大変・・・というサイトで採用してみてはいかがでしょうか。 実際に動作している画面は以下からどうぞ。 » Geni – Help Center なお、元ネタはAjaxianでした。 » Ajaxian – Geni Smart Contact Form
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
絵葉書風コメントフォーム | S i M P L E * S i M P L E