Code Handling: Tumbo 1.0 - Show Tumblr feeds on your website - Jquery plugin サイト上でTumblrのフィードを美しく整形して自サイトに表示できる「Tumbo」 次のような美しいUIでフィードを表示することができます。シンプルなどで他のコンテンツを邪魔しない程度のデザインというのも使いやすそうな点ですね 関連エントリ Google,Facebook,Twitter,Tumblr等のAPIを簡単に扱える機能豊富なPHPライブラリセット「Eden」

Calendario: A Flexible Calendar Plugin | Codrops レスポンシブで超クールなカレンダーデモとｊQueryプラグイン「Calendario」。 次のようなグラデーションが美しいカレンダーのデモとプラグインが共に配布されています。 カレンダーのHTML構造は予め決められており、CSSでデザインされています。 カレンダー機能はシンプルなものですが、コールバック等である程度カスタマイズできそうです。 関連エントリ Googleカレンダー風操作感を持つ美しいカレンダーを実装できる「FullCalendar」 カレンダーやDateピッカー関連のjQueryプラグイン20 これは新しい!クールなタイル状の年間カレンダー実装jQueryプラグイン「jQuery Verbose Calendar」

jQuery Stick ’em: Make Content Sticky on Scroll, to a Point | Viget コンテンツ毎にサイドバーを固定配置できるjQueryプラグイン「Stick ’em」。 最近よくある、ページをスクロールしてもついてくるサイドバー。position:fixedなどを応用して綺麗についてくるようにできますが、コンテンツが大きく３つに分かれている場合はちょっと実装が難しいかも。 そんな時に使えるのがこのプラグイン。デモページを見て頂ければ分かりますが、コンテンツごとに固定されるサイドバーをわけられるようです。 スクロールしても、サイドバー「Heading」と書かれた部分は右側に固定されて表示されます。 更にスクロールするとコンテンツが別れるので、それ以上は下に来ません。 １から実装するとなるとpositionの切り替えが結構大変で挫折しがちな

Yannis Chatzikonstantinou / Freetile.js アイテムをタイル状に並べる新しいjQueryプラグイン「Freetile」 LightBoxばりに流行ったこのレイアウトプラグインですが、新しいプラグインが出た模様。 プラグインは色々ありますがそれぞれ使い勝手が違ったりするので１つの選択肢として覚えておいてもよさそうですね 使い方は以下のように簡単で、オプションでアニメーションするかなどのシンプルなオプションが選べる模様です $('#container').freetile(); 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ

リストを複数行に自動で分割してくれるjQueryプラグイン「Easy List Splitter」 2012年09月13日- jQuery plugin: Easy List Splitter リストを複数行に自動で分割してくれるjQueryプラグイン「Easy List Splitter」。 ul li 等でリスト定義すると縦に長〜くなってしまいますが、これを複数行に分割して横長にしてくれるプラグイン。 レイアウト上、分割したいんだけど、めんどくさいんだよなぁ、という方も、ライブラリを読み込んで、$(element).easyListSplitter({ colNumber: 3 }) みたいにやれば３列にしてくれます。 なんということでしょう。 地味〜かもしれませんが、これは便利だと、殆どのマークアップエンジニアの方は首を揃えて頷いてくれるでしょう。 関連エントリ ツイッターのつぶやき

CSS Font Stack :: A complete collection of web safe CSS font stacks :: Web Fonts WEBセーフなフォント一覧まとめ「CSS Font Stack」。 WEBセーフな英字フォントがプレビューつきでまとまっていて、クリックすると font-family: 〜の形式でクリップボードにコピーできます。 WEBフォントもいいんですが、そもそもマシンに入っているフォントが使えれば軽くてそっちの方がよい場合も多そうです。 (i) のアイコンにカーソルを合わせるとMacとWinでのシェアが表示されて分かりやすい Copy to Clipboard すると次のようなテキストがコピーされます。 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 関連エントリ フ

gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風

How we decreased sign up confirmation email bounces by 50% - Kicksend Blog Eメールの入力間違えを防いでくれるjQueryプラグイン「mailcheck」。 hotmailがhotnailになっていたり、yahooがyhooになっているのを検出してくれます。 よくありがちな間違いかと思うのでサイトのメール入力欄に入れておくと問題を解消できそう 英語仕様ですが、配列を次のように定義してあげれば対応できそうです。 docomo.ne.jp とか yahoo.co.jp とか自由に入れるだけです 関連エントリ 円形に広がるソーシャルシェアボタン実装jQueryプラグイン「jOrbital」 ページめくりを実現するためのjQueryプラグイン集 faviconをアニメーションさせたりテキストを付与できるjQueryプラグイン

Coin Slider: jQuery Image Slider Plugin with Unique Effects 画像切り替えがユニークな画像スライダー実装jQueryプラグイン「Coin Slider」。 画像の切替を、タイル状に切り替えたりすることができるみたいです。 jQueryプラグインなので、$(elemen).coinslider メソッドにオプション渡せば動くようになっています。 少し面白い動きを付けたい、という場合にも簡単に実装できるので覚えておくとよいかもしれませんね。 Flashで同じようにやろうとすると１からだと結構面倒そうな気がしますが、このjQueryプラグインを使うことで一瞬で実装できます。 関連エントリ 拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」 表示法が新しくセクシーなLightBox「SexyLightBox」

ページ内スクロールならコレにおまかせ！なjQueryプラグイン「Page Scroller」 2012年02月13日- Page Scroller: A Simple Page Scrolling Plugin ページ内スクロールならコレにおまかせ！なjQueryプラグイン「Page Scroller」。 ページ内を上や下に移動できるだけではなく、ページ内のマークアップを読み込んでナビゲーションを作ってくれた上でスクロールできたりもします jQueryプラグインなので、$('#main').pageScroller(); みたいに呼ぶだけです ページの左サイドにナビゲーションを表示する例 綺麗なスキンがかぶって表示されます 上下矢印のナビゲーションも可能 サイドではなく、ページトップにナビゲーションを設定することも可能 右サイドにも移動可能 なかなか便利で使えそうですね。１ページに沢山の情

Curtain.js スクロールするとカーテンが上がるようにパネルが非同期で動くページが作れるjQueryプラグイン「Curtain.js」 単なるスクロールする縦長ページではなく、スクロールするとブロック要素が別々に動いて面白い演出が作れます。 左下のナビゲーションでページ送りをしたりも出来るみたい 今なら、これを使ってサイトを作れば、玄人なWEB業界の人も目を丸くするかもしれませんね。 関連エントリ フルスクリーン背景がスライドショーになるCSS3サンプル レスポンシブなスライドショーを実装できるjQueryプラグイン「ResponsiveSlides.js」 iTunesストアのトップのスライドショー風ウィジェットを実装できるjQueryサンプル HTML5＆CSS3をフルに活用したスライドショー実装ライブラリ「Slider.js」

turn.js - The page flip effect for HTML5 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 ドラッグ＆ドロップでべらっとめくるあのインタフェースがHTML5で実現でき、iPadやiPhoneなどでも動作します。 電子書籍ビューアとして使えそうですね ページに立体感を出すために影なんかも描画されてます。 マークアップや初期化も超簡単です。<div>を並べて初期化するだけ。 関連エントリ HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル モバイルブラウザでのHTML5対応状況が一目瞭然の「Mobile HTML5」 HTML5/JavaScriptでテキストtoスピーチを実現できる「speak.js」

Minimit Gallery Plugin - Download ギャラリー等を面白く見せられるjQueryプラグイン「Minimit」 このギャラリー他にはない感じで次のように要素をCSS3のプロパティなんかを駆使して変形、アニメーションさせながら切り替える等のインタフェースを提供します。 デモを見てみるのが一番速いですが、とても面白いです トランプのカードを拡大するような（？）。ちょっと動きを見ていただくのが一番速そう。 リストもマウスに応じてクネクネ動きます。 クネクネ。 マウス位置に応じて拡大。 CSS3とjQueryを組み合わせることで、もっといろんなことができそうですね。 数年後にはこうしたライブラリはCSS3等を応用しまくっていて、ちょっとソース見ただけだとどうやって実装しているか、よく分からないなんていう状態になっていそうな気がします 関連エントリ PCでもスマホでもスワ

NeoAlchemy Table Pagination 長ーいテーブルも瞬時にページング処理してしまうjQueryプラグイン「Table Pagination」 縦に長かったりするとテーブルは読みにくかったりしますが、このプラグインで初期化してしまえば一瞬でページ分けが完了します ページングするコードは次のように書けばOKです テーブル自体はそのままHTMLを書いておけばいいので楽チンですね。 関連エントリ Twitter OAuth認証をポップアップで行うjQueryプラグイン リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 中身が画像のselectボックスを作るjQueryプラグイン

Creating a Toggle CSS3 Bottom Navigation Bar ? Script Tutorials ページ下部で折りたためるメニュー実装サンプル。 次のように、クリックで開閉して折りたためるメニューを実装するCSS3+jQueryなサンプルが公開されています サンプルのダウンロードも出来るので実装は簡単にできます。 スタイルもCSSで変えられるということで独自デザイン調整は簡単ですね。 サイトに収まり切らないようなメニューを入れておくと使いようによってユーザビリティ向上に繋げられそうです。 関連エントリ CSSのナビゲーションメニューサンプル５５ ミニマムで場所を取らないCSSメニューの実装例

PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」 2011年10月27日- Asketic Swipe Gallery | jQuery Plugins PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」 この手のものはスマホ限定だったりするのですがPCでもドラッグ＆ドロップのようにしてスワイプさせて画像を送ることができるようになっています。 両方に対応させる場合に個別に対応するよりも一緒に作ってしまいたいという場合に使えますね デモページはこちら 今後はもっとこうしたクロス環境でも似たように動作する物が出てくるかもしれませんね。 数年後にはスマホがPCを追い抜くという予測もあるぐらいなので、スマホありきでPCもとりあえず対応なんていう流れになっ

Web Symbols typeface WEBページに使えそうなアイコンっぽい図形フォントがダウンロードできます。 eot, woff, svg, ttf の形式の物がつまっているようです。 ソーシャルアイコンもフォントで表現。シンプルでいいですね。 拡大しても使えて色変えも自由なのでアイコンを画像形式で配布よりも使い勝手のよい部分がありそうです。 関連エントリ 白黒だけど汎用的にシンプルデザインのWEBアイコン５００ iPhone・Android・WEBに使える400以上のアイコンセット「iconSweets 2」

タブが何個になってもOKなUIを作成できるjQueryプラグイン「Infinite Rounded Scrolling Tabs」 2011年10月17日- Infinite Rounded Scrolling Tabs | jQuery Plugins タブが何個になってもOKなUIを作成できるjQueryプラグイン「Infinite Rounded Scrolling Tabs」 次のような角丸デザインで、幅が足りない場合はスクロールボタンが表示されるタブUIが作れます こういうのは過去にあんまりなかったかも。デザインとかはCSSで調整できますね スクロール部分は自分でやろうとするとめんどくさそうなのですが、これは参考にできそうです 関連エントリ 閉じられるタブUIを実装できるjQueryサンプル「Magic Tabs」 jQueryベースのタブUI１５種まとめ textareaやin

Div Linker | jQuery Plugins div全体をクリッカブルにするjQueryプラグイン「DIV LINKER」。 次のようなマークアップがあったとして、この場合は「Link text」部分にしかリンクされません。 <div class="divlinker"> <img src="image.jpg" width="151" height="130" /> <br /> <a href="//www.google.com">Link text</a> </div> そこでこちらのプラグインを使って初期化します <script> $(".divlinker").divlinker(); </script> するとDIV全体がクリックできるようになるというもの。 デモページ HTMLをきれいにかきつつdiv全体を<a>みたいに動かすことができます 関連エントリ RSSやA

カーソルを合わせると泡がブクブクっとさせることができるjQueryプラグイン「jBubbles」 2011年09月30日- jBubbles - jQuery plugin to make links or other elements bubble カーソルを合わせると泡がブクブクっとさせることができるjQueryプラグイン「jBubbles」 正直、魚以外に誰が得するんだろうと思うプラグインですが、面白かったのでご紹介です。 プラグインを改良してカーソルを合わせると超気持ちいい演出に応用できるかもしれません。 使い方は以下のように超簡単です。が手間に見合わない効果かもしれません。 $( selector ).mouseover(function () { $(this).jBubbles(); }); 関連エントリ Windowsのスピンボタンコントロールを実装できるjQueryプラグ