Creating Grid-to-Fullscreen Animations with Three.js | Codrops Three.jsを使ったグリッドからぐにゃっとフルスクリーンにアニメーションするデモ 画像拡大の方法が新しい。どんどん進化しますね 関連エントリ シャレオツなページめくり効果のデモ「Page Flip Layout」 ホバーでかっこよくイメージをプレビューする「Image Reveal Hover Effects」
PgwBrowser - Browser & OS / platform detection plugin for jQuery / Zepto ブラウザ・OSを検出してJSON化できるjQueryプラグイン「PgwBrowser」。 次のようにJSON値でブラウザ、OS、viewport情報を受け取れます。iOS、Androidなどにも対応 関連エントリ ブラウザ上で動くイラストレーターのOSS「mondrian」 SVG非対応ブラウザでも魔法のようにSVGが表示できるjQueryプラグイン「SVGMagic」 複雑なレイアウトをブラウザ上でWYSIWYGで組み立てられる「Gridmanager」 ChromeのタブっぽいUIをブラウザ上で実現する「ChromeTabs」
Overview | jPList - jQuery Data Grid Controls div、table、ulリスト等にソート、ページネーション、フィルタ機能を追加できる「jPList」。 div、table、ulなどで列挙されたデータに、次のようなインタフェースを追加して、便利にしてくれるというもの。 既存のHTMLにソートやフィルタなどの機能拡張したい場合に使えそうです。 関連エントリ アイテムをクールにアニメーションしつつフィルタ・ソートが出来るjQueryプラグイン「MixItUp」 リストやテーブル、DIV等の要素を好みにJSでソートできるjQueryプラグイン「SortedList」 テーブルに検索、ソート、ページ分け機能をつけて便利にしてくれる「Dable」
jQuery Custombox :: dixso.net CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」 モーダルダイアログ自体のデザインは至って普通なんですが、出てくる際のエフェクトが豊富で一見の価値ありです エフェクト以外にも、イベントハンドラの設定やカスタマイズ項目が豊富で使いやすそうです 関連エントリ シンプル&軽量なモーダルダイアログ実装jQueryプラグイン「portBox」 フラットで美しいデザインのモーダルダイアログ実装ライブラリ「vex」 フラットだけど立体的なCSS3アニメーション付モーダルダイアログ実装デモ 何でも埋め込めてカッコいいモーダルダイアログ実装用jQueryプラグイン「Pop Easy」 フラットでカッコいいモーダルダイアログ実装デモ
Medoo - The Lightest PHP database framework to accelerate development 軽量で便利に使えるPHP用DB操作ライブラリ「Medoo」 SQLを書かなくてもメソッドでselect, insert, delete, update 等ができてコードも読みやすくなるライブラリです。 使うには1ファイルをincludeするだけでつかえます コード例。SQLをかかなくてすみ、インジェクション対策機能もあるらしいです 軽量かつ1ファイルなので簡単に導入できるので、ちょっとDBを使おうっていう場合に、MDB2等を使いたくない人は使ってみても良いかも 関連エントリ レイヤー機能による画像合成機能やサムネイル生成等が超簡単に行えるPHPライブラリ「PHPImageWorkshop」 Google,Facebook,Twitter,Tumblr等
50 Awesome Twitter Bootstrap Templates フリー&プレミアムなTwitterBootstrapテーマ50 Bootstrapベースとはいえ、Bootstrap臭があまりしないテンプレートが多数まとまっています。 通常サイトや管理画面等のテンプレートがまとまっていて、活用してサクっと仕事を終えられる事もあるかも Bootstrapの便利さを享受しつつ、うまくサイトデザインする際の参考にもできそうです 関連エントリ Bootstrapのselectをカッコよくできる「Bootstrap-select」 BootStrapのフォーム入力をもっと便利にするための「Bootstrap Form Helpers」 BootstrapをベースとしたフリーのUIKit「Flat UI」 Bootstrapに270の使えるアイコンを追加できる「Elusive icons」
Photoshopは不要!画像の背景を簡単に透明にできるWEBツール「Clipping Magic」 2013年06月18日- Easily Remove Image Backgrounds Online - Clipping Magic Photoshopは不要!画像の背景を簡単に透明にできるWEBツール「Clipping Magic」 画像をアップするとブラウザ上に編集ツールが現れ、緑色のペンで残したい部分、赤色のペンで背景を適当になぞればリアルタイムに背景が消えてくれます。 リアルタイムに消えてくれるので、間違っていた場合も簡単に良い結果が得られるまで修正を加えられます 写真から背景を簡単にくりぬきたい時に使えそうですね 関連エントリ Bootstrapなサイトで使えそうなクールなツールチップ実装jQueryプラグイン「Smallipop」 色々とカスタマイズが可能なツールチップ実装
SMINT | The simple jQuery plugin for lovers of one page websites. スクロールすると上に固定される一見普通のナビゲーション実装jQueryプラグイン「SMINT」 ページを開くと中部に何の変哲もなく現れるナビゲーションバー。スクロールするとページの上部にfixed固定され、どれだけスクロールしてもナビゲーションできて便利な物を簡単に実装できます デモはレスポンシブにも対応しているっぽいです。1ページにコンテンツを埋めこんでBookmarkによって移動させる的なページで便利に使えそう 関連エントリ レスポンシブなナビゲーションの見本やチュートリアル レスポンシブでクールなナビゲーションを実現できる「Responsive Nav」 ナビゲーションが斬新な30のサイト
レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 2013年05月29日- samsono/Easy-Responsive-Tabs-to-Accordion GitHub レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 よくあるタブ型のUI、スマホではちょっと幅が足りない、ということでアコーディオンに変更してしまえるプラグインです。 次のようにアコーディオン式に。スマホでも困りません タブにするんじゃなくて、UIのタイプそのものを変えてしまうというところがいいですね。 関連エントリ レスポンシブでクールなドロップダウンメニュー実装例 アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル レスポンシブ
jQuery Vortex エレメントを立体的に回転させられるjQueryプラグイン「Vortex」 製品画像などを動きをつけて回転させるなどの用途に使えそうです。 スピードの調整ができたり、奥行きなんかもパラメータで自由に調整できるので、平面的に回転させることもできるっぽい 関連エントリ スプライトアニメーション作成用jQueryプラグイン「Phantascope」 3Dのキューブのアニメーションで迫力あるエフェクトを付けられるjQueryプラグイン「HexaFlip」 アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter」 CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 クールでアニメーションするグラフを描画できるHTML5チャートライブラリ「Chart.js」
Text Opening Sequence with CSS Animations | Codrops Flashみたいに美しいCSSテキストアニメーションデモ。 CSSでもこういうの作れるよ、ということで覚えておいてもよさそうなサンプルです。 こういうのを一括でいろいろとできるライブラリなんかはすぐに出てきそうな予感というか期待。 スマホ上でもこういう演出が簡単にできるようになっていくわけですね 関連エントリ CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 面白いテキストアニメーションが簡単に実現できるjQueryプラグイン「Textualizer」 jQueryで分かりやすいテキストのDIFF表示ができる「jQuery.PrettyTextDiff」 テキストを燃え上がらせられるjQueryプラグイン「jQuery Burn」
25 Best Examples of Flat UI Design Websites | The Design Inspiration FlatなUIが美しいWEBサイト25がまとまっていました。 GoogleやMicrosoftのWindows8といいフラットなデザインが流行っています。 この背景には、作り手にとっては作りやすくて、見る側には見やすく好き嫌いがなさそう、っていうところがありそうですが、フラットなデザインでも綺麗にデザインされたサイトがあってフラットなサイトを作る際に参考にできそう。 関連エントリ HTML5を使ったクールなサイトデザイン集21 モダンなサイトデザインのPhotoshopテンプレート13 Twitterエンジニアの作ったサイトデザインモック作成ツール「Stylo」
Dropzone.js ドラッグ&ドロップによるクールなファイルアップロードを実現できる「Dropzone.js」。 ファイルをブラウザ内にD&Dすると画像ならサムネイルがすぐに表示されつつ、プログレスバーが表示されて進捗が分かり、更に完了した際にはチェックマークでアップロード完了が分かります なかなかカッコいいだけでなく、便利なアップロードが可能。 ブラウザ非対応時のフェイルバックも 関連エントリ クロスブラウザでファイルのドラッグ&ドロップ、Ajaxアップロードを可能にする「FileDrop」 DropBoxからファイルアップロードをする&切り取って保存するデモ jQueryとHTML5でドラッグ&ドロップアップロードを実現するチュートリアル ファイルアップロードのレジュームをブラウザ上で行える「Resumable.js」
Image Zoom 製品画像等のズームが非常に簡単に行えるjQueryプラグイン「Image Zoom」 <img>タグにsrcにサムネイル、data-*の形で拡大画像を指定して、後はプラグインで初期化するだけで超簡単に次のようなズーム機能が作れます。 ECサイトなどで実装すれば、製品画像を拡大できて便利ですね 実装は次のように超カンタン 関連エントリ マウスホバーだけの簡単操作で画像をズームできて便利な「jQuery Zoom」
Junior - A front-end framework for building HTML5 mobile apps with a native look and feel. HTML5でネイティブ風アプリを作るFEフレームワーク「Junior」。 BootstrapライクなUIのWEBアプリが作れます。 ビューはJSONを定義して挙動を指定することが出来ます 各種UIコンポーネントはある程度揃っています。 関連エントリ これは超使いやすいページネーションの次世代UI フルスクリーンでページめくりをするUI実装デモ 数値の範囲を入力する際に便利なUI作成jQueryプラグイン「jQRangeSlider」 美麗なデザインのUIキット(PSD) 30 iOSのアイコンフォルダ風のUIを作れるjQueryプラグイン「App Folders」 jQuery UI をタッチイベントに対応させ
QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」
jBar Plugin, the jQuery call to action bar : Todd Motto: Front-End Web Developer & Graphic Designer in Wiltshire, UK. ページ上部に隠れるナビゲーションバーが実装できるjQueryプラグイン「jBar」。 初期化すれば、次のようなつまみが現れて、クリックするとバーが現れるというインタフェースが簡単に実装できます。 一見シンプルなすっきりしたサイトだけど、ナビゲーションもちゃんと機能する、みたいなサイトを作りたい時に有効かも。 使い所は色々考えられますね。使い方次第では便利なサイト作りに役立ちそうです。 関連エントリ スマホタッチでくるくる回転させられるjQueryプラグイン「Touchy」。 折りたたみ可能なタイムラインのUIを実装できるjQueryプラグイン「Timelin
jScrollbar : make your own scrollbar for scrolling contents with jQuery UI - MyjQueryPlugins 独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」 綺麗にデザインされたバーもブラウザ依存のスクロールバーで台無しになってしまったり、OSによってデザインに違いが出てしまったりとあまりよいことはないですね。 かといってデザインを崩したくない場合なんかで、スクロールさせないわけにもいけないような時に使えそうなプラグインです。 以下のような自由なデザインのスクロールバーが作れます。画像を切り替えることで簡単に独自デザインにも出来ます。 で、独自デザインにしつつも、ちゃんとマウルホイールにも対応しています。 Twitterの新UIなんかでもスクロールバーが独自になっていたり
EASY PIE CHART by rendro jQuery+HTML5でカッコいいアニメーションする円形グラフが描画できる「EASY PIE CHART」。 次のようなカッコいいアニメーションするグラフを描画出来るライブラリです。 ダッシュボードなんかにパーセンテージを描画する場合なんかに使えそうですね 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」 CSS3とjQueryでインタラクティブなグラフを作成するチュートリアル faviconを円グラフにしてアニメーションできる「Piecon」
リストを複数行に自動で分割してくれるjQueryプラグイン「Easy List Splitter」 2012年09月13日- jQuery plugin: Easy List Splitter リストを複数行に自動で分割してくれるjQueryプラグイン「Easy List Splitter」。 ul li 等でリスト定義すると縦に長〜くなってしまいますが、これを複数行に分割して横長にしてくれるプラグイン。 レイアウト上、分割したいんだけど、めんどくさいんだよなぁ、という方も、ライブラリを読み込んで、$(element).easyListSplitter({ colNumber: 3 }) みたいにやれば3列にしてくれます。 なんということでしょう。 地味〜かもしれませんが、これは便利だと、殆どのマークアップエンジニアの方は首を揃えて頷いてくれるでしょう。 関連エントリ ツイッターのつぶやき
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く