[JAVASCRIPT] Sponsor Flip Wall With jQuery & CSS – JSで作る回転するパネル
クリックする事で回転するパネル。jQueryを使って作られているようです。作例内では、スポンサーのロゴを表示しておいて、クリックする事で詳細情報が表示。リンクをクリックする事でスポンサーサイトへと遷移するという仕組みになってます。イベントとかでスポンサー一覧を表示する際にいいですね。あとポートフォリオサイトでの作例一覧、サムネール表示などにも使えそう。
Tag Archives: Javascript
[JAVASCRIPT] Grid Accordion with jQuery – 縦横にスライドするアコーディオン
通常縦や横のどちらかにスライドするアコーディオンと呼ばれるメニュー表現を、両方グリグリ動くようにしたJavascript。ライブラリにはjQueryが使われています。デモサイトを見ると分かるけど、サムネールも含めてX軸とY軸2つの方向にスライドします。触った感じがなんだか気持ちイイです。あとアイアンマンかっけース。
[WEB DESIGN] typeface.js – JSを使って、セーフフォント以外のフォントをブラウザで表示
フォントデータそのものと、それに付随するJavascriptをサーバにアップすることで、セーフフォント以外のフォントをブラウザで表示できるようにするというもの。画像にしちゃうと更新性が悪くなるし、だからといってテキストを活きたまま掲載すると見た目が悪い。そんな時に使えそうです。導入の詳しい方法は「USAGE」の欄に紹介されてます。ただ.ttfのフォントデータそのものをサーバに上げる必要があるので、著作権とかそのあたりには注意が必要です。
[JAVASCRIPT] Making a Mosaic Slideshow With jQuery & CSS – トランジションがモザイク状のスライダー
トランジションがモザイク状に行われるスライダー。通常これ系の動きって、横にスライドするんだけど、これはボックスエリア内を複数のパーツに分けてモザイク状に切り替わります。なかなか手が込んでます。他とはちょっと違うスライドの見せ方をしたい時に使えそうです。ちなみに中身の画像ファイル自体は、特別切り刻んだりする必要はないようです。
[AJAX] Astounding Ajax/CSS Forms: 30+ Modern Trends , Tips and Techniques – Ajaxフォームまとめ
もいっちょJSガラみの記事。Ajaxフォームのまとめ記事です。Ajaxを使ったフォームというと、いわゆるページ遷移なしのエラー表示や入力の補完機能がメインですが、他にもパスワードの脆弱性チェッカー、フォーム装飾（パーツ置換）、アップローダーなどがあります。一手間かけたフォーム制作の際に便利なまとめ記事。
Astounding Ajax/CSS Forms: 30+ Modern Trends , Tips and Techniques
[JAVASCRIPT] 20 Best And Highly Useful jQuery Tutorials For Designers And Beginners – デザイナーのためのjQueryまとめ
デザイナーやビギナーのためのjQueryまとめ記事。ガリガリのコーダーでなくても実装できちゃうYO！というのが趣旨のようなので、わりと導入に関しては簡単なものが紹介されてます。各リンク先ではチュートリアルも紹介されているので、JSの導入に不慣れなパイロットの方でも色々安心です。
20 Best And Highly Useful jQuery Tutorials For Designers And Beginners
[JAVASCRIPT] Fantastic Content Sliders for your Inspiration – JSを利用したコンテンツスライダーの好例
JSのメジャー化とともに目にする機会の増えたコンテンツスライダー。それらをウマくサイト内に利用したクールな作例ばかりを集めた記事。スライドさせて見せるコンテンツの内容や、周辺のデザイニングなど、スライダーを導入する場合に大いに参考になりそう。よく使われる手法なだけにネタ帳としてなかなかイイ感じ。あと紹介されているサイトがかっちょいいの多くてホットです。
[CSS3] CSS3 Loading Spinners Without Images – CSS3を使って画像なしでローディング用のクルクルを作る
CSS3のアニメーション機能を使って、ローディング用のクルクルを作るというもの。作例一覧はこちら。Javascriptは使われていないようですが、当然ながら現状Firefox 3.5以上とWebkit環境でないと動かないそうです。画像使わなくてもいいとなると、単純にソースさえコピってしまえば動く事になるので、生産性が高まりますね。