CircularLoader.js | Easy jQuery Plugins フラットデザインがいい感じの円形ローダー実装jQueryプラグイン「CircularLoader.js」 次のように円形で中心に数値がはいったようなローダーが実装できます。 関連エントリ 流行りのYoutube風ローディングバー実装jQueryプラグイン モダンなローディングエフェクトが実装できる「fakeLoader.js」 スクリプトで滑らかに動かすローディングアニメーション実装jQueryプラグイン「shCircleLoader」 超カッコ良いプレローディングエフェクトサンプル

Daniel.uy - Online Code Demos ドラッグ＆ドロップで画像をUPできるようにするjQueryプラグイン「JQuery File Uploader」。 Bootstrapベースのものや、Bootstrap以外でも使えるっぽいです。もちろん、ドラッグ＆ドロップだけでなくボタンクリックによるファイル選択→UPも可能 関連エントリ 単体で動くドラッグ＆ドロップ用JSライブラリ「Draggabilly」 ドラッグ＆ドロップで再編成できるPinterest風レイアウト作成プラグイン「jQuery.Shapeshift」

Wallpaper/Projects/Ben Plum 要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」 div等のエレメントに設定した背景が自然に自動伸縮されていい感じにしてくれるプラグインです。 ブラウザサイズによってはせっかくカッコよく設定した背景画像が台無しになることがこれまでもありましたが、このプラグインでもうそういったことはなくなりそう。 デモページ 関連エントリ レスポンシブ対応のサイト構造作成用の軽量CSSフレームワーク「Layers CSS」 レスポンシブでタッチフレンドリーなスライドを作れるjQueryプラグイン「Glide.js」 クロス環境で動作するレスポンシブスライダー実装jQueryプラグイン「FerroSlider」 タッチができてレスポンシブなカルーセル実装jQueryプラグイン「Owl Carou

A Collection of Page Transitions | Codrops CSSアニメーションでページを紙芝居の様に切り替えるデモ。 迫力のある全画面切り替えをCSSで実現しており、そのアニメーションの種類も豊富で良いサンプルになっています。 デモとして学習用にもよさそうですが、Windows8っぽいプレゼン資料なんかを作る際にも使えそうです デモページ 関連エントリ Yahooが作ったピュアCSSのUIライブラリ「Pure」 エレメント上にラベルを付けるためのCSS「Label.css」 Flashみたいに美しいCSSテキストアニメーションデモ HTML/JS/CSSでAndroidアプリ風UIを作るフレームワーク「Fries」 自鯖に設置してHTML、CSS、JSをブラウザ上で開発して遊べる「Editr」

Scroll To アニメーションスクロールをデフォルト化できるjQueryプラグイン「Scroll To」。 ページ内に沢山の<a name="***">や<a href="#***">があっても自動で初期化されるのでデフォルトでアニメーションスクロール化できます。 一瞬で飛んでしまうスクロールより便利なのは誰が見ても明らかということでデフォルト化しちゃうのもよさそう。 アニメーションの速度やスクロール位置のオフセット、アニメーションエフェクトのカスタマイズ等も可能 関連エントリ Flashみたいに美しいCSSテキストアニメーションデモ canvas,svg,webglを使った２次元画像/アニメーションを描画できる「Two.js」 美しいアニメーションを使ったフィルタ＆ソートが可能なjQueryプラグイン「MixItUp」 Canvasベースの読込中アニメーションデモ「Sonic」 スプ

SMINT | The simple jQuery plugin for lovers of one page websites. スクロールすると上に固定される一見普通のナビゲーション実装jQueryプラグイン「SMINT」 ページを開くと中部に何の変哲もなく現れるナビゲーションバー。スクロールするとページの上部にfixed固定され、どれだけスクロールしてもナビゲーションできて便利な物を簡単に実装できます デモはレスポンシブにも対応しているっぽいです。１ページにコンテンツを埋めこんでBookmarkによって移動させる的なページで便利に使えそう 関連エントリ レスポンシブなナビゲーションの見本やチュートリアル レスポンシブでクールなナビゲーションを実現できる「Responsive Nav」 ナビゲーションが斬新な３０のサイト

Medoo - The Lightest PHP database framework to accelerate development 軽量で便利に使えるPHP用DB操作ライブラリ「Medoo」 SQLを書かなくてもメソッドでselect, insert, delete, update 等ができてコードも読みやすくなるライブラリです。 使うには１ファイルをincludeするだけでつかえます コード例。SQLをかかなくてすみ、インジェクション対策機能もあるらしいです 軽量かつ１ファイルなので簡単に導入できるので、ちょっとDBを使おうっていう場合に、MDB2等を使いたくない人は使ってみても良いかも 関連エントリ レイヤー機能による画像合成機能やサムネイル生成等が超簡単に行えるPHPライブラリ「PHPImageWorkshop」 Google,Facebook,Twitter,Tumblr等

Dropzone.js ドラッグ＆ドロップでアップロードが簡単実現できるjQueryプラグイン「Dropzone.js」。 最近ではあたり前になってきているドラッグ＆ドロップのアップローダーが簡単実現出来ます。 同時アップロード数やアップ時のサムネイルサイズ、フォールバック関数設定等のカスタマイズができるようです 関連エントリ ドラッグ＆ドロップでファイルをアップできるHTML5のデモ jQueryとHTML5でドラッグ＆ドロップアップロードを実現するチュートリアル 画像アップでインラインで使えるbase64形式に変換してくれる「Duri.me」

Antwort | Responsive Layouts for Email HTMLメール用のレスポンシブテンプレート「Antwort」 HTMLメールを送る際に、メールクライアントに併せてレスポンシブに動くみたい。 float対応していないクライアント向けにtableタグを使う等しているところが、他のレスポンシブフレームワークと違うところ メールでのマーケティングに活用したいところですね 関連エントリ レスポンシブなiPhoneのサイドメニューっぽいメニューが作れるjQueryプラグイン「Sidr」 レスポンシブなCSSベースのドロップダウンメニュー「Top Drawer」 レスポンシブな日付ピッカー実装jQueryプラグイン「pickdate.js」 最初からレスポンシブなCSSデザインのHTMLテンプレート３５ レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTab

ちょっと画像レイアウト関連で便利なjQueryプラグインを調査仕事でまとめていたのでついでにご紹介。 この手のプラグインはjQuery Masonryが最初だったかと思いますが、色々と出てきたのでここら辺で全部しっておくとよいかも。 Wookmark 比較的新しめのPinterest風レイアウトを作る際に便利なプラグイン。 jQuery isotope レイアウトだけではなくダイナミックに要素をアニメーションさせることも出来るプラグイン 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 Google画像検索みたいに画像を綺麗にならべられます ↓↓↓↓ ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い 要素の整列系の初期のプラグイン。最初に見た時はあっと驚いたものです ↓↓↓↓ 並べた画像を敷き詰めて超カ

NVD3.js :: re-usable charts for d3.js 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 d3.jsという以前紹介したライブラリをベースに利用しているみたい。 グラフ描画のライブラリは色々ありますが、こちらのライブラリで描画するグラフのデザインもなかなかいい感じですね マウスとのインタラクティブなグラフ実装が可能で拡張も容易みたい サンプルページにはソースがついているので参考に組めば抵抗なくグラフが描けそうです 関連エントリ 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」 HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 様々な時系列グラフを描画できるJavaScriptライブラリ「Rickshaw」 クールなドアノブ風の％グラフを描画できるjQuery Knob

jQuery Shadow Plugin ボックス要素に色んなタイプの影を簡単に付けられるjQueryプラグイン「jQuery Shadow」。 次のようにボックス要素に対して影を自由に付けられるプラグインです。$(elem).shadow(option); という風にするだけなので使い方は簡単ですね 単なるボックス要素があっというまにクールになりますね 関連エントリ selectボックスを超カッコよくするjQueryプラグイン「Chosen」 ブラウザ上でサインを書けるjQueryプラグイン「jSignature」 JSでのタイマー処理がもっと簡単になるjQueryプラグイン「timing」 スマホ用サイトに使えそうなドロップダウン実装jQueryプラグイン「DropKick」 ページめくりを実現するためのjQueryプラグイン集

CSS3 ordered list styles - RedTeamDesign CSS3でシャレオツなリストを作るチュートリアル。 list-styleを無効にしてブラウザ標準の数字部分をやめて、content: counter(li), counter-increment といったプロパティを使って数値部分を独自にデザインしています。 リスト部分の数字のデザインはなかなか難しかったと個人的に記憶していますが、こうした方法でやれば思い通りのリストデザインが作れるんですね、ということでメモ。 CSSを使ったテクニックはどこまで進化するんでしょうね。 関連エントリ CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Transit」 アニメーションするバナーをCSS3で作るチュートリアル フルスクリーン背景がスライドショーになるCSS3サンプル CSS3で出来たクー

Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better selectボックスを超カッコよくするjQueryプラグイン「Chosen」 味気ないselectのデザインをゴージャスかつ多機能に変えてくれるプラグインです。 左が普通のselect。これをカスタマイズして右のイメージに。インクリメンタル検索ができるので項目数が多くてもOK タグ選択っぽいインタフェースにすることも出来ます 選択時のイメージ。カッコいい。 BootStrapライクなデザインなので組み込んでしまっても違和感ないかもですね 関連エントリ 中身が画像のselectボックスを作るjQueryプラグイン デザインがよくて複数連動可能なselectボックス作成jQueryプラグイン カッコいいselectボックスを作成でき

Dribbble - Free 16px Broccolidryiconsaniconsetitisfullof…icons by Visual Idiot 綺麗にデザインされたピクトグラムアイコン100個セット。 次のようなシンプルだけど綺麗なPSD形式のアイコンセットがダウンロードできます。 PSDファイルですが、ベクター形式なので拡大しても劣化がありません。Retinaディスプレイ対応も可能。 種類も汎用に使えそうなものが多いです 関連エントリ フリーでシンプルなピクトグラムアイコン６０個セット「Jigsoar icons」 いい感じのOpenType形式ピクトグラムアイコン集100個「Entypo」 ピクトグラム等、ミニマムなアイコンが２４個まとまったアイコンまとめ ピクトグラムが７００種類以上集まったアイコンセット「Pictodeck Icon Set」

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

Open-sourcing Stylo by Alex MacCaw Twitterエンジニアの作ったサイトデザインモック作成ツール「Stylo」。 CoffeeScript, Spine, Sprockets といったテクノロジーを使っているらしいです。 なんかwebkit限定だったりしますが、インタフェースが良い感じに出来ていて、同じようなツールを作るのに参考にすることもできそう。 ツール自体は非常にシンプルで図形を配置して図形をカスタマイズしたり文字を配置したりといったものですが、容易に習得でき快適に動くため素早くモックをブラウザ上で作りたい際に使えそう 単に置くだけじゃなくて、オブジェクトを綺麗に並べるような機能もついており、シンプルだけど、こういう地味に大切なところはちゃんとしています。 Twitterエンジニアが作ったということで、なんとなくインタフェースの印象がBootstr

PHPフレームワークにTwitter,Facebook等の認証を速攻実装できる「Opauth」 2012年05月24日- Opauth ? Multi-provider authentication framework for PHP PHPフレームワークにTwitter,Facebook等の認証を速攻実装できる「Opauth」。 Zend、CakePHP、Symfony、CodeIgniter等のフレームワークに認証を入れる場合に是非参考にしたいライブラリ。 Facebook, Google, twitter, Linked.in の他、OAuth、OpenID などにも対応。Yahoo!JapanでOAuth等による認証ができますから、これで認証にまつわる処理はすべて実装できそう。 各サイトにおける認証の方法を都度実装するのは非効率ということで、こうしたライブラリで認証処理はサクっと終

Detecting Mobile Devices with JavaScript | A Beautiful Blog スマホを判別するのに便利なJSスニペットが公開されています。 JavaScriptによってAndroid, iOSの差を吸収する際に使えそうです。 iOSかどうかの判別は、以下のように超シンプル if( isMobile.iOS() ) alert('iOS'); Android のタブレットの場合は Mobile が入らないので、タブレットも考慮する場合はそのへんのコードを追加するとよさそうです。 関連エントリ iPhoneかiPodかiPadかを調べるPHPとJSのソースコード例 利用者のブラウザ・OS・バージョンを取得できるクラスライブラリ「Browser.php」

CSS Buttons with Pseudo-elements | Codrops シンプルなタグなのに凝った綺麗なボタンを作るCSSチュートリアル マークアップは、<a>ほげほげ</a> のように超シンプルなのに次のような立体的に凝ったボタンをCSSで作るチュートリアルです。 素材として使ってもいいですし、テクニックの学習用にもいいですね 1個CSSを作っておけばリッチなボタンがシンプルなマークアップで記述できるというのは素晴らしいですね。 関連エントリ CSSボタン作成チュートリアル＆テクニック集１３ ピュアCSSなソーシャルサイトのログインボタン