Overview - jQuery Rondell
Rondell - Display images and other content in a nice way Version 1.1.0 - Created by Sebastian Helzle AboutThis is a jQuery plugin for displaying galeries and other content the way you want. Checkout the different presets in the upper menu! Especially the Gallery and Thumbnails preset. The rondell demos can be controlled with your keyboard, by clicking the controls or by clicking the rondell items.
タッチデバイスにも対応したシンプルなLightboxを実装するjQueryプラグイン・Swipebox
タッチデバイスに対応したLightboxを実装するスクリプトのご紹介です。jQueryに依存します。多機能なものではありませんが、使いやすくて良さそうです。ただ、実機での動作テストをしていませんのでその程度の記事。 タッチデバイスで使えるLightboxです。 見易くていいかも。CSSでカスタマイズできるらしいのでMedia Queriesを使うだけで対応できるなら楽でいいかも。 スマフォのスクショです。 $(".foo").swipebox();使い方はいつも通り。 <a href="big/bar.jpg" class="foo" title="My Caption"> <img src="small/bar.jpg" alt="image"> </a>マークアップもclassを振るだけ。 詳細は以下で確認できます Swipebox
テキスト表現力を豊かにするタイポグラフィ関連jQueryプラグイン１０:phpspot開発日誌
10 jQuery Plugins to Enhance Your Web Typography テキスト表現力を豊かにするタイポグラフィ関連jQueryプラグイン１０がまとまっています。 これらを覚えておけば、分かりやすさを向上させたり、画像オーサリングツールなしでデザイン性の高いサイトを作れそうです。 一昔前なら、全部画像という感じの物がjQueryプラグインで実現できるあたりは素晴らしい テキストでなく、画像であることで、プラットフォームによって崩れることは防げるメリットもあるので、シーンによって使い分けしたいところですね。 関連エントリ jQuery＆CSS3でここまで出来るタイポグラフィエフェクトのサンプル集
いろんな種類のツールチップを簡単実装できる「Opentip」:phpspot開発日誌
Opentip | The free tooltip いろんな種類のツールチップを簡単実装できる「Opentip」 次のような良い感じのデザインのツールチップが、jQuery,Prototypeベースに加え、スタンドアロンでも動かせるようです。 canvasベースの描画ですが、IE7+にも対応。Ajaxによるツールチップの読込にも対応しています 関連エントリ 色々とカスタマイズが可能なツールチップ実装jQueryプラグイン「PowerTip」 スライダー、ツールチップの他多種多様な機能が詰まったjQueryベースのUIキット「jKit」 可愛いツールチップを実装したjQuery＆CSS3のデモ「Sweet Tooltip」
吹き出し風にポップアップするツールバー実装jQueryプラグイン「Toolbar.js」:phpspot開発日誌
Toolbar.js - jQuery plugin to create tooltip style toobars 吹き出し風にポップアップするツールバー実装jQueryプラグイン「Toolbar.js」 次のように、初期化位置にカーソルを合わせるとポップアップするツールバーを設定でき、そこからアクションを選べます。 ありそうであまり無かったプラグインかもしれませんね。 縦バージョンにもできます これは便利に使えそう 関連エントリ UIがカッコいいオートコンプリート実装jQueryプラグイン「Ajax AutoComplete」 使いやすい複数選択エレメントを実現するjQueryプラグイン「multiselect.js」 コンテンツ毎にサイドバーを固定配置できるjQueryプラグイン「Stick ’em」 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「Par
[JS]便利で簡単！スクリプトやスタイルシートをブラウザ・OSごとに分岐して利用できる超軽量高速のスクリプト -Conditionizr
IE6/7/8/9/10, Firefox, Chrome, Safari, Operaなどのブラウザだけでなく、Win, Mac LinuxなどのOS、iPadやiPhoneのRetinaディスプレイ用に条件分岐して、外部スクリプトやスタイルシートをロードさせたり、classを付与してHTMLで利用できたりする超軽量高速の単体で動作するスクリプトを紹介します。 Conditionizr Conditionizrの特徴 Conditionizrの使い方 Conditionizrの特徴 ConditionizrはjQueryより50%高速に動作し、条件付きのJavaScriptとCSSをサポートする3KBの超軽量スクリプトです。 条件付きのHTMLタグ 条件付きの外部スクリプトやスタイルシートのロード カスタマイズされたスクリプトにも対応 IE, Firefox, Chrome, Safar
ページ内のどこにいるかを分かりやすくナビしてくれるjQueryプラグイン「scrollNav.js」:phpspot開発日誌
ページ内のどこにいるかを分かりやすくナビしてくれるjQueryプラグイン「scrollNav.js」 2013年01月29日- scrollNav.js ページ内のどこにいるかを分かりやすくナビしてくれるjQueryプラグイン「scrollNav.js」。 ページの見出しを<h1〜6>のタグで定義しているとして、見出しを自動でサイドバーに固定で出してくれて、カレント位置の見出しを太字にしてナビゲーションしてくれます。 当然、ナビ部分をクリックすれば指定位置までアニメーションしながらスクロールしてくれます。 コンテンツを追加した際も、ナビゲーションを変えなくていいので、とっても便利ですね jQueryプラグインなので初期化するだけで利用もとっても簡単。 関連エントリ レスポンシブなナビゲーションの見本やチュートリアル ページ上部に隠れるナビゲーションバーが実装できるjQueryプラグイン「j
[CSS]パタッと開くアニメーションがかわいいボタンを実装するスタイルシート
マウスオーバーでパネルがアニメーションでパタッと開き、中から現れるボタンを実装するスタイルシートのコンセプトを紹介します。
商用利用可バックリンク不要、全296種が揃ったシンプルデザインのミニマルなアイコン素材 -Minimalist Icons
商用利用可バックリンク不要、全296種が揃ったシンプルデザインのミニマルなアイコン素材 -Minimalist Icons
画像をクリックで選択してフォーム送信できるようにするjQueryプラグイン「Image Picker」:phpspot開発日誌
画像をクリックで選択してフォーム送信できるようにするjQueryプラグイン「Image Picker」 2013年01月18日- Image Picker 画像をクリックで選択してフォーム送信できるようにするjQueryプラグイン「Image Picker」。 好きな画像を選んでもらう、というようなインタフェースを考えた時に、画像をそのまま表示してクリックして選ぶというのが当たり前のインタフェースですが、これをHTMLで簡単にできるようにするのはちょっと面倒。 というわけで、こちらのプラグインを活用すれば、selectボックスを簡単に画像選択UIに変換出来ます selectのoptionにdata-img-srcといった感じで画像のパスを定義しておいてあげればOK Pinterest風なレイアウトに出来るのも今時のライブラリ感がありますね 関連エントリ フォームをカッコよくするjQuery
jQuery風に簡単にCanvasを扱えるラッパーライブラリ「Canvas Query」:phpspot開発日誌
Canvas Query jQuery風に簡単にCanvasを扱えるラッパーライブラリ「Canvas Query」 canvasのコードが次のようにjQuery風かつ直感的に記述できます jQueryを使っている人にとってはCanvasがより身近になりそうなライブラリですね スマホ・タブレットの普及でCanvasも重要な技術要素になっていく可能性を秘めていますが、基本を学んだ後はこうしたライブラリを使って便利に扱うのもよさそう 関連エントリ オープンソースのHTML5お絵かきウィジェット「Literally Canvas」 canvasを使って画像をスタイリングするチュートリアル Canvasベースのお絵かきが実装できるjQueryプラグイン「Sketch.js」 CanvasとWebcamで作られたブラウザ上で動作する面白デモｘ２
早起き習慣を身につけたい人へ...継続するために大事な2つのポイント : ライフハッカー［日本版］
■夜の習慣を作る 毎朝早起きをする習慣を身につけるために、私が発見したもっとも大事なポイントは、睡眠が7時間未満の日が続くと、遅かれ早かれ疲れてしまうことです。 これに対抗する最善の手段は、自分に必要な睡眠時間を把握し、自分に必要な睡眠時間が取れる時間に寝ること（私の場合は約7.5時間です）。早く眠ろうと決めてから、一日の仕事の疲れを取り、ベッドに入る時には頭から仕事が離れているようにするために、30分の癒しの時間（散歩）を設けるようにもしました。 ある程度継続して早起きをするためには、朝の習慣と同じくらいに夜の習慣も大事になるのです。 ■週末も早起きをする もうひとつの大事なポイントは、長期間継続して早起きをするなら、平日と同じくらい週末も意識した方がいいということです。たまに寝坊することだってあるし、週末に気をゆるめて休むことも大事だと分かっています。しかし、個人的には週末に起きる時間
ゲームに使えそうな960種類以上のアイコンセット「Game icons」:phpspot開発日誌
969 free SVG and PNG icons easily customizable for games or apps | Game-icons.net ゲームに使えそうな960種類以上のアイコンセット「Game icons」。 次のようなゲームに使えそうなアイコンセットが960種類以上と豊富に提供されているサイトです。 武器、食料、動物といった、まさにゲームに使えそうなアイコン集が豊富に入手可能。PNG, SVG形式でDLできます ちょっとしたゲーム作りに活用出来るかもしれませんね 関連エントリ WEBサイト制作に使えるベクターアイコンセットｘ２５ たった１つのdivで表現されるアイコンデータベース「One div」 自分でスタイリングして好きなアイコンを選んでセットでDLできる「Iconbench」 スマホ用のアプリアイコンのりサイズを一発で作成できる「Makeappicon
jQueryの独自セレクトボックスを作成するjQueryプラグイン「jQuery.customSelect()」:phpspot開発日誌
jQuery Custom Select Box Plugin - jQuery.customSelect() jQueryの独自セレクトボックスを作成するjQueryプラグイン「jQuery.customSelect()」 次のように、カスタマイズしたセレクトボックスを生成できます。非対応ブラウザも素のselectが出るので安心。 CSSを使って自分好みのデザインにするのが簡単にできそうなのが特徴です $(element).customSelect();と初期化するだけで使えて、CSSも通常、オープン時、フォーカス時等の場合に応じて設定できるので便利。 関連エントリ selectボックスを超カッコよくするjQueryプラグイン「Chosen」
アニメGIFでもHTML5でもFlash動画でもない動画を実装できる「jsMovie」:phpspot開発日誌
jsMovie - jquery plugin - for image - sequence animation - without flash html5 アニメGIFでもHTML5でもFlash動画でもない動画を実装できる「jsMovie」 JSで連番の画像を切り替えて再生する方式の動画実装ライブラリ。 再生、停止、一時停止、リピート等のボタンも付けられ、まるで従来の動画のように使えますが実際は 001.jpg といった連番画像。 複数の画像があって、これを動画のように再生したい、という場合に使えそうですね 関連エントリ 動画を背景にするとこんなにカッコいい、というデモと実装jQueryプラグイン 動画以外を暗転させて動画を見やすくしてくれるjQueryプラグイン「Allofthelights.js」 Youtube動画とSlideshareのスライドを同期して再生できる「Presen
フルスクリーンでページめくりをするUI実装デモ:phpspot開発日誌
Fullscreen Pageflip Layout with BookBlock フルスクリーンでページめくりをするUI実装デモ。 なかなかいい感じのインタフェースのデモとサンプルのダウンロードが可能。 ページめくり部分はjQuery+CSSで実装されており再利用ができそう ページ全体をめくるというのもなかなかいい、と感じるデモでした。 完成度が高いのでそのままサイトに移植してもよさそうですね 関連エントリ ページめくりを実現するためのjQueryプラグイン集 Flipboardみたくページめくりを実現できるjQueryプラグイン「BookBlock」 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 美しいページめくり効果が作れるjQueryプラグイン「Flippy」
面白いテキストアニメーションが簡単に実現できるjQueryプラグイン「Textualizer」:phpspot開発日誌
Textualizer | K. Risk - JavaScript Refined 面白いテキストアニメーションが簡単に実現できるjQueryプラグイン「Textualizer」 テキストが歯抜けの状態から、アニメーションしながらテキストが埋められたり、既存アルファベットから別の文字列に変化させたりと、面白いテキストアニメーションが実現可能。 実際にデモを見ていただくのが一番分かりやすいです。 スピード等もオプションで指定可能。 $(element).textualizer( param ); で簡単に実現 テキストアニメーションならFlash、というような時代もありましたが、JavaScriptの方がお手軽でいいな、という時代になった気がします。 関連エントリ 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 テキストを部分的にカッコよくアニメーショ
地図や動画、なんでも重力を付けてしまえるjQueryプラグイン「box2d-jquery」:phpspot開発日誌
地図や動画、なんでも重力を付けてしまえるjQueryプラグイン「box2d-jquery」 2012年12月19日- franzenzenhofer/box2d-jquery GitHub 地図や動画、なんでも重力を付けてしまえるjQueryプラグイン「box2d-jquery」。 一見普通のサイトに重力を与えることでサイトが崩壊し面白いエフェクトをかけられるjQueryプラグインです。 box2dというライブラリは数年前に話題になりましたが、そのjQuery版がgithubにて公開されています。 重力によってアイテムが崩壊していき、それぞれドラッグ＆ドロップが可能。 デモで面白いのは、地図や動画がマウスで投げられるところ。 動画にも重力。動画は問題なく再生されています。 ゲームに活用したり、エイプリルフールネタや、キャンペーンサイトにインパクトを与えたりと、覚えておけば使えそうですね 関
数値の範囲を入力する際に便利なUI作成jQueryプラグイン「jQRangeSlider」:phpspot開発日誌
jQRangeSlider: jQuery plugin for range sliders 数値の範囲を入力する際に便利なUI作成jQueryプラグイン「jQRangeSlider」。 範囲をドラッグ＆ドロップで狭めたり、範囲の幅はそのままにドラッグ＆ドロップで移動して値を調整できるUIが作れます 日付の範囲や、20〜50といった数値の範囲を入力してもらうよりも持って手軽に入れてもらえるUIを提供できますね。 関連エントリ カスタマイズ可能で動きがよいalertダイアログ実装jQueryプラグイン「alertifyjs」 アイテムをタイル状に並べる新しいjQueryプラグイン「Freetile」 ペラペラめくれるカウンター実装jQueryプラグイン「flipCounter」 レスポンシブで超クールなカレンダーデモとｊQueryプラグイン「Calendario」 リアルなWindows風ツ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - stripe-archive/jquery.payment: [DEPRECATED] A general purpose library for building credit card forms, validating inputs and formatting numbers.![GitHub - stripe-archive/jquery.payment: [DEPRECATED] A general purpose library for building credit card forms, validating inputs and formatting numbers.](https://cdn-ak-scissors.b.st-hatena.com/image/square/27f1c04eaabfc91a9703ef4753b8820ba78d2144/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2Ffb3f5b0a38191fe966d081c469c09370f508daba8e5121195a0b71b5c29bcb95%2Fstripe-archive%2Fjquery.payment)
