jQuery word and Character Counter Plugin 文字数・単語数をリアルタイムにチェックできるjQueryプラグイン textareaにテキストを入力中に文字数のカウントをリアルタイムにチェックできます。 使い方は次のように簡単に使えます 関連エントリ 範囲指定のUI実装jQueryプラグイン「range-picker」 フォームの送信をAjax化できるjQueryプラグイン「Submitter」 カスタマイズ性の高いレーティング用jQueryプラグイン「Rateit.js」 簡単なTODOリストウィジェットをサイトに組み込めるjQueryプラグイン「Lobilist」

GitHub - wpic/bootstrap-select-togglebutton: JQuery plugin for converting select input to friendly bootstrap buttons group selectボックスをBootstrapのボタングループの形にしてしまうjQueryプラグイン。 selectボックスはスマホ等では使いづらいケースもあり、選択肢が少なければ、ボタンの選択式にしてしまってもよいのかも。 単一選択と複数選択が選べ、selectボックスよりも使い勝手がよさそうです 関連エントリ 複数選択が出来るBootstrapなサイトで使えそうなselectボックス実装「jQuery select-multiple」 ポップアップ形式のselectの代替になる入力要素を実装できる「PopSelect」 Bootstrapのselec

GitHub - 360Learning/jquery-select-areas: jQuery pluggin for selecting an extensible area in a picture 画像の特定範囲を複数選択できて切り取り等に使える「jquery-select-areas」 画像上で範囲選択をするプラグインは過去に見ましたが、複数の選択範囲を指定できるものは初めて見た気が。 画像の切り取り以外にも画像内にコメントをしたりする場合に使えそうです 関連エントリ ページ内をJSでズームイン・アウトできるようにするjQueryプラグイン「jQuery-Page-Zoom」 カスタマイズ性が超高いツールチップ実装jQueryプラグイン「Protip」 範囲指定のUI実装jQueryプラグイン「range-picker」 フォームの送信をAjax化できるjQueryプラグイン「S

Jquery-levelup by pstrinkle ポイントをプラス・マイナスするアニメーション実装「Jquery-levelup」。 投票機能などの実装部分で使えそう。単に、数値をプラスするだけではなく、アニメーションすることで、よりポイントが加算された感が出ます 関連エントリ mo.jsを使って、いいね！アイコンをクールにアニメーションさせるデモ CSSで様々にアニメーションするハンバーガーアイコン実装「Hamburgers」 ボタンをモーダルに気持よくアニメーションさせつつ変形させるデモ オシャレなアニメーションで動作するスライドショー「Elastic Circle Slideshow」 Rebound.jsとCanvasを使った超カッコイイローディングアニメーション実装デモ

GitHub - quintana-dev/prelodr: A simple Material preloader inspired in Google Inbox. GoogleInbox風のマテリアルプレローダー「prelodr」 読込状態をメッセージと共にアニメーションを使って美しく表現できます メッセージ付きなので、今何をしているかが分かりやすいのは、長めのローディング等ではGIFのローディング表示だけよりもよさそうです 関連エントリ モダンなローディングエフェクトを作成できる「PleaseWait」 Rebound.jsとCanvasを使った超カッコイイローディングアニメーション実装デモ

Rateit.js by gjunge カスタマイズ性の高いレーティング用jQueryプラグイン「Rateit.js」 星型以外にも面白い形にカスタマイズが自由にできます。 関連エントリ SVGベースの星型レーティング実装jQueryプラグイン「starRating」

Optiscroll.js モダンな感じのカスタムスクロールバー実装「Optiscroll.js」 縦横、両方に対応＆フォーカス時のみ表示のモダンな形のスクロールバーにカスタムできます 関連エントリ スクロールバーにサイト内のサムネイルを使える「Intence」 カラフルで新しいスクロールバーを実装できる「ScrollMenu.js」

Bootsnav - Bootstrap menu multi purpose header Bootstrapのナビゲーションバーをお好みにカスタマイズできる「Bootsnav」 デフォルトのツールバーはCSSなどで結構いじくらないと制約があったりしますが、Bootsnavであれば豊富なサンプルから使いたいnavbarが見つかりそうです。 メニューを大きめのメガメニューにしたり、ハンバーガーメニューでフルスクリーン風にしたり、スクロール固定したり、よく使われるパターンが網羅的にサンプルかされていて、非デザイナーの方も苦労なく目的のナビを実現できそうです。 関連エントリ Bootstrapのテーブルをソート可能にする「Bootstrap Sortable Tables」 Bootstrapなサイトで階層的なツリービューを作成できるUIライブラリ「bootstrap-treeview」 Bo

エンジニアとして情報収集やっていると日々、多数の知識やライブラリに出くわしますが、その数があまりに多いため、忘れてしまう事が多いですね。 私自身、意識にとどめておくためにアウトプットをする意味で記事を書いている意味合いもあります。 ただ、記事を書いて紹介したような物であっても、紹介したことすら忘れている事がたまにあります（汗） その為このブログを読んでいただいている方にも同じような現象が起きてしまっているのだと思います。 人間は１００個の知識を覚えても、１ヶ月後には２０個の知識しか思い出せないようにできているそうです（エビングハウスの忘却曲線） ただ、適切なタイミングで見直し（復習）を行えば、１００個のうちほとんどを思い出せるようになるようです。 適切なタイミングを計算し、復習するのは手動で計算する、ということはちょっと難しいですが、reminDOというアプリでそれが実現できます。 何度も

Radial SVG Slider | CodyHouse 円形を拡大しながらスライドを切り替えるスライダーサンプル。 通常、スライドは四角形ベースのアニメーションが基本ですが、円形を拡大しつつ画面を切り替えるカッコいいエフェクトのスライダー実装がレスポンシブで実装されたサンプルが入手できます 関連エントリ レスポンシブで大きめの押しやすいサイドバーを実装するデモ レスポンシブな商品比較テーブル実装デモ

Bootstrapのナビメニューにアニメーションを付けてかっこ良くする「Hover... 次の記事 ≫： 円形を拡大しながらスライドを切り替えるスライダーサンプル

EagerImageLoader 画像の読み込み順序を指定できるJS「EagerImageLoader」。 通常imgタグが複数ある場合は並列で順不同な感じで読み込まれるのが普通ですが、指定した順で画像を読み込ませる事ができます。 例えば、まずヘッダを読み込んだ上で、メインのコンテンツである３つの画像を同時に読み込み、最後にフッターの画像を読み込む、といった読み込み手順を指定できるようになります。 関連エントリ Mediumのような画像ズームエフェクトが実装できる「enhance.js」 画像の特徴色をJSで抽出できる「Colorify.js」 画像の特定部分をどんどんズームできる「jfMagnify」 ブラウザ上で画像の簡易編集機能を実現できる「photo-editor」 画像のホバーエフェクトが多数収録された「Imagehover.css」 JSで画像に基本的なエフェクトをかけられる「

Hoverify Bootnav 1.0.0 Bootstrapのナビメニューにアニメーションを付けてかっこ良くする「Hoverify Bootnav」 ナビゲーションメニューに様々なアニメーションを付けることが出来ます。 関連エントリ 画面サイズ目一杯使えるレスポンシブなナビゲーションメニュー実装「okayNav」 ナビゲーションとコンテンツが同期して分かりやすいナビ実装「NavSync」 レスポンシブで階層的なスライダーナビゲーション実装jQueryプラグイン「yohoho.slyder」 ページサイドにセクションのナビゲーションを自動生成する「Section Scroll」 CSS、jQueryでレスポンシブな高品質サイドバーナビゲーションを作成するデモ

Multi-Layer Page Reveal Effects | Codrops 複数レイヤーから構成されるページの画面切り替えエフェクト集 ページの切り替わるエフェクトがカッコよく次世代感が出ています。サンプルを使ってページを作ればモダンなページが作れてしまいそう 関連エントリ 製品の比較を行える次世代のUI実装 input[type=file]をいい感じにスタイリングするチュートリアル 今風なグリッドxアニメーションするレイアウト実装デモ「Grid Item Animation Layout」

Easy Fullscreen HTML5 Background Video HTML5動画をフルスクリーンバックグラウンドに簡単設定できる「BIDEO.JS」 最近、背景に動画を設定するページもよく見かけるようになりましたが、HTML5動画があれば、こちらのJSを使って簡単に同様の事ができそうです。 関連エントリ 360度のパノラマビデオを再生できる動画プレイヤー「Valiant360」 HTML5動画を背景にできるjQueryプラグイン「vidbg.js」 HTML5動画プレイヤーを拡張させられる「jquery-video-extend」

Isometric and 3D Grids | Codrops カードをテーブルに並べて斜めからみた風の3DのグリッドUI実装 次のようなグリッドUIの実装チュートリアルとサンプルがDLできます。スクロールバーを移動で、グリッドがそのまま斜めにスライドして楽しいエフェクトが生まれます。 関連エントリ 製品の比較を行える次世代のUI実装 input[type=file]をいい感じにスタイリングするチュートリアル 今風なグリッドxアニメーションするレイアウト実装デモ「Grid Item Animation Layout」

GeoPattern 動的に背景イメージをジェネレートすることが出来る「GeoPattern」 SVGを使って綺麗なパターンを動的に背景に設定できるあたりが特徴。ユーザが超簡単に好きな背景イメージを文字から作れるというところで、どこかで使えそうなライブラリですね 関連エントリ HTML5動画を背景にできるjQueryプラグイン「vidbg.js」 背景画像をマウス位置と連動して遠近感を出せるjQueryプラグイン「jQuery Interactive BG」 3Dのクールな線形アニメーションをブロックの背景にするjs 背景に複数種類のビジュアルエフェクトを設定できるjQueryプラグイン「quietflow.js」 自動でCSS背景画像をスクロールさせるjQueryプラグイン「jQuery.BackgroundScroll.js」

RangeTouch - A super tiny library to make input type='range' sliders work better on touch devices 範囲指定のスライダーUIを簡単に実装できる「RangeTouch」 次のようなタッチデバイスでも動作するようなフォームUIを input type="range" のように記述して実現できるようにする軽量なライブラリです 関連エントリ Bootstrapのパラメータ入力スライダー実装「bootstrap-slider」 レスポンシブで階層的なスライダーナビゲーション実装jQueryプラグイン「yohoho.slyder」 CSSアニメーションを使ったレスポンシブスライダー実装「Jcslider」

Convert HTML to Image in Jquery [Div or Table to jpg/ png] - Codepedia HTMLをCanvasを使って画像に変換するjQueryサンプル。 HTMLで書いたものをそのまま画像に出来れば、SNSへのシェアがより簡単になったり、使いやすくすることができそうです 関連エントリ テキストフィールドを日時と時刻入力可能な形に変換してくれる「Combodate」 画像をピュアCSSに変換できるWEBツール「img2css」