Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: Javascript

[JAVASCRIPT] image menu – 伸縮する画像を使ったメニュー

  • Pocket
  • このエントリーをはてなブックマークに追加

以前Flashを使って作成されたものをよく見かけた、伸縮する画像を使ったメニュー。最近じゃJavascriptで表現できるようです。これがなかなか素晴らしい出来で、サイトのメインナビゲーションとしても使えそう。Firefox 2 (mac / pc)、IE 7、IE 6、Safari (mac)で動作し、Javascriptライブラリとしてmootools v1.11が必要だそうです。試しにソースをダウンロードしてみたら、特にmootoolsを別途用意しなくても動いたので、同梱されているようです。

[JAVASCRIPT] FancyForm

  • Pocket
  • このエントリーをはてなブックマークに追加

Javascriptを使って、formタグ内のチェックボックスやラジオボタンをグラフィカルに見せる手法。名前が名前なんで、以前紹介したFancyZoomと何か関係があるのかと思ったけど、そうでもないみたい。これなかなかイイ感じ。通常のチェックボックス等よりも見やすいし、クリック範囲が広い分実用的。その内使ってみたいJS。

[FLICKR TOOL] blackr – flickr内の写真を見てる時に、写真以外をブラックアウト、もしくはホワイトアウトしてくれるブックマークレット

  • Pocket
  • このエントリーをはてなブックマークに追加

flickrで写真を閲覧する際に、写真の個別ページ(例えばこんなページ)や、拡大表示時(例えば例えばこんなページ)に写真以外の部分をブラックアウト、もしくはホワイトアウトさせる事で、ブラウザウィンドウ内を写真のみにするというブックマークレット。使い方は、サイト内に用意されてる4つのボタンをブラウザのブックマークバーにでも放り込んでおけばオッケー。写真だけを見たいページで放り込んだブックマークレットをクリックすれば、写真だけになります。解除する時はもっかいブックマークレットをクリックすれば元に戻ります。サイト内の黒文字のボタンがブラックアウト用、白文字がホワイトアウト、カッコの付いてるものは写真の輪郭に縁取りが付きます。どれか1つ気に入った物を選べばイイと思います。ちなみにブックマークレットはJavascriptで書かれているので、JSがオフになっている設定のブラウザでは反応しないと思います。また一覧ページでも適用されません。単純な機能なんだけど、意外と重宝しそう。flickrの白背景ってまぶしい時もあるから、自分は黒の輪郭ナシがイイ感じ。

[JAVASCRIPT] Shadowbox.js – lightboxのようなコンテンツ表示JS

  • Pocket
  • このエントリーをはてなブックマークに追加

lightboxのようなポップアップによるコンテンツ表示Javascript。画像以外にもFlash, Movie, HTMLといったコンテンツが表示できます。タイトル類が下からニュイっと出てくるのが、なんだかイイ感じ。“Usage”のページに細かい使用法が書いてありますが、lightboxと同じように“rel”を使って適用するようです。これ系の見せ方ってホント色々あるので、目的に応じて選べるようになってきましたね。

[JAVASCRIPT] Galleria – a Javascript Image Galler – パっと見Flashとしか思えない、とってもナイスなJSスライドショー

  • Pocket
  • このエントリーをはてなブックマークに追加

パっと見Flashとしか思えない動きをする、JSで作られたスライドショー。JSライブラリにはjQueryを使っているようです。最初見た時は「あぁ、Flashを使ったスライドショーswfか」って思ったけど、右クリしてビックリ。Flashじゃなかったんです。いやーこれはスゴい。まぁスゴい言うてもフェードイン効果を使っているだけなんだけど、トータルで完成されてる感じに感動しました。デモは“Demos”という欄から見る事ができます。いずれ気合いの入った写真を公開する際などに使ってみたい。ちなみにダウンロードはこちらからできます。jQueryライブラリ使ったJSって意外とアツいんだよなー。

[JAVASCRIPT] GlassBox – 透明なボーダーを描く事のできるJS

  • Pocket
  • このエントリーをはてなブックマークに追加

Prototypeを使った、Javascriptユーザーインターフェースライブラリ。主な機能は透明なボーダーを引けるという事らしいんだけど、他にもLightbox的なポップアップ表示を行う事もできるようです。“Usage”のページからデモを見る事ができますが、基本的にはサイト全体がデモのような感じ。Windows Vistaのウィンドウ表示のような印象。IE 6 + 7、Firefox 2、Opera 9、Safari 3で動作するようです。以前のmBlogでIEハックを併用して同じようなことをしようとしたんですが、なんかいろんな理由でミスったような覚えがあるので、今度似たようなデザインをする時にはイイかもしんない。

[JAVASCRIPT] mooSlidebox3 – lightboxとはちょっと違うコンテンツの見せ方

  • Pocket
  • このエントリーをはてなブックマークに追加

lightboxに近いコンテンツの見せ方なんだけど、出てくる場所やエフェクトがちょっと違うというJavascript。下からニュイっと出てくるので、例えばブログのナビゲーション類をここに集約させるとか、サイト内の特定のコンテンツの詳細説明を出すとか、そんな感じの使い方ができそう。ただ高解像度のディスプレイを使っている人の多くは画面上部にポインタ位置が集中するので、不便という見方もできます。サイト下部の“Sample”から動作確認ができます。必要に応じて使ってみたいJS。っていうかそろそろlightbox系のJSのまとめ記事でも作ろうかな。

[JAVASCRIPT] FancyZoom – Lightboxっぽい写真の見せ方

  • Pocket
  • このエントリーをはてなブックマークに追加

MT4からWordpressに移行して、「さてLightboxどうしようか」と思ったものの、他の見せ方ってないもんかと思ってたどり着いたのがこのFancyZoom。画像をクリックしてページ内に大きく表示、という目的そのものは一緒なんだけど、なんだかとてもエレガントなんです。1発で気に入ってしまい、早速mBlogにも導入しました。左に表示されているウチのカワイい子のサムネールをクリックすると、ウチのカワイい子の大きい画像が大きく表示されます。とてもカワイいのです。胸毛とか耳のホケホケとか。んで左上のバツボタンをクリックするか、画像そのものをクリックする事で元に戻ります。ここでクローズボタンが左にあるという点もポイント。マックユーザーにとっては右に位置したクローズボタンというのはどうしても違和感があるので。ロード中のアニメーションもMacOSっぽくてナイス。導入も簡単でした。

ただひとつ注意点が。Lightboxやその亜種では、「適用したいリンクに特定の記述を追加」する仕様だったのに対し、こちらは「適用したくない場合だけ特定の記述を追加」という点が大きく違っています。つまりFancyZoom導入後は、回避の記述がない限り画像から画像へのリンクに全て適用される事になります。最初はこの点に関して「うーどうしよう」って迷ったものの、よく考えれば画像から画像へのリンクでこれが適用されて困る事ってないので、導入を決意。実際「回避しない限り全部そうしちゃうよー」という姿勢の方が色々と便利な事が分かりました。