シンプルでエレガントなモーダルボックスを実装できる「Fallr.js」 – bl6.jp
Fallr.jsはシンプルでエレガントなモーダルボックスを実装できるjQueryプラグインです。メッセージ、アラート、プロンプト、ダイアログ、ポップアップ、通知など豊富な種類の機能が用意されています。 以下のページからFallr.jsの実際のデモ動作をチェックできます。 デモ デモではアラート、コンファーム、プロンプト、フォーム、フルスクリーン、スペシャルエフェクトなど数多くのサンプルが用意されています。各サンプルにある「demo」ボタンをクリックすることでその動作を見ることが可能です。また、サンプルごとにコードの記述例も載っているので助かりますね。 オプションも豊富で、buttons、icon、content、position、closeKey、closeOverlay、useOverlay、autoclose、easingDuration、easingIn、easingOut、heig
レスポンシブ対応の軽量・コンパクトでシンプルなモーダルボックス「Modelo」 – bl6.jp
Modeloは軽量・コンパクトなモーダルボックスを実装できるjQueryモーダルプラグインです。デザインもシンプルでレスポンシブにも対応しています。カスタマイズ性もそれなりに備えているところがいいですね。 以下のページからModeloの実際のデモ動作をチェックできます。 デモ デモでは「OPEN MODAL」というボタンをクリックするとモーダルボックスが開かれます。滑らかに表示・非表示されるフェードアニメーションがとても美しいですね。 背景にはオーバーレイがかかるのでモーダルボックスへの注目度もバッチリです。表示されたモーダルボックスは、「Close」ボタンか右上にあるバツ印、もしくはキーボードのescキーやモーダル外をクリックすることで閉じることができます。 余計な装飾もなくシンプルでスッキリしたモーダルボックスといった印象です。レスポンシブにも対応していることから、スマホなどのモバイル
トップに素早く戻れるボタンを実装できるjQueryプラグイン「TopButton」 – bl6.jp
TopButtonはボタンをクリックするだけで画面トップに素早く戻れるjQueryプラグインです。自動で上部までスクロール移動されるので、縦長のページには特に便利な機能になります。 以下のページからTopButtonの詳細やダウンロードが可能です。ダウンロードしたファイルから実際のデモ動作もチェックできます。 TopButton デモでは画面右下に「Top」と書かれた四角いボタンが設置されています。下にスクロールした状態でこのボタンをクリックすると、自動で上部までスクロール移動します。 ユーザーがいちいち自分でスクロールする必要もなく、ボタンを押すだけでサっと上まで行けるのが便利ですね。 使い方もかなりシンプルで手軽に実装可能です。オプションには、html、css、scrollAndShow、scrollSpeedという項目が用意されています。cssでは具体的なCSSのセッティングが可能で
スタイリッシュで美しいイメージスライダー「Gliding Gallery」 – bl6.jp
Gliding Galleryはスタイリッシュで美しいシンプルなイメージスライダーです。サムネイル画像やキャプションも表示させることができます。画像をカッコよく見せたい場合にとてもよさそうですね。 Gliding Galleryの実際のコードやデモは以下になります。 Gliding Gallery スライダーの左下にはサムネイル画像が並べられていて、ここから見たい画像を選択できます。画像はスライドで切り替わります。 サムネイル画像は白黒になっていますが、現在メインエリアに表示されているサムネイル画像だけはカラーになっているので、どの画像が現在表示中かすぐに把握できるのが便利です。 また、画像とともにキャプションも表示されます。キャプションの上には左右の矢印ボタンが設置されていて、ここから画像を前後に移動することもできます。 シンプルで操作性もいいお洒落なイメージスライダーを実装したい人は、
スマホメニューのアイコンをアニメーション変化させる「Menu Button Animations」 – bl6.jp
Menu Button Animationsは、アニメーションが付いたスマホメニューアイコンを実装できるのが特徴です。スマホページのメニューでよく見かけるハンバーガーアイコンなどをアニメーションで変化させます。 以下のページからMenu Button Animationsの実際のデモ動作をチェックできます。 デモ デモでは、いくつかのハンバーガーメニューが表示されていて、アニメーションによりバツ印になったり矢印になったりと、滑らかに変化していく様子を見ることができます。 ハンバーガーアイコンの3本の横線が動き出して形を変えていくサマはとてもおもしろいですね。スマホのメニューアイコンをどうしようか悩んでいる人にはとても参考になるのではないでしょうか？ というわけで、ハンバーガーアイコンをアニメーションで変化させる「Menu Button Animations」の紹介でした。Menu Butt
軽量で操作性もいい画像ズーム機能を実装できる「Simple Image Zoomer jQuery Plugin」 – bl6.jp
Simple Image Zoomer jQuery Pluginは、軽量・シンプルで操作性もいい画像ズーム機能を実装できるjQueryプラグインです。拡大・縮小バーをスライドさせることでスムーズな画像ズームが可能です。タッチ対応でモバイルフレンドリーなところもうれしいですね。 タッチにも対応 以下のページからSimple Image Zoomer jQuery Pluginの実際のデモ動作をチェックできます。 デモ デモでは画像の左下にズームバーが設置されていて、ここを左右にスライドさせることで画像を拡大・縮小できる仕組みになっています。拡大した画像はドラッグすることで好きな位置へ移動することが可能です。さらにタッチにも対応しているので、スマホやタブレットではタッチにより拡大中の画像の移動が可能です。 ズームはとてもスムーズに動作するのでとても操作しやすいですね。シンプルながらもカスタマ
画像の遅延読み込みを実装できる軽量ライブラリ「Lazyestload.js」 – bl6.jp
Lazyestload.jsは画像の遅延読み込み機能を実装できる軽量のJSライブラリです。画像以外の部分を先に読み込ませることができるので、ユーザーにとっても無駄な待ち時間が減り、より快適にWebページを閲覧できますね。Webページを少しでも高速化したいと考えている人は要チェックです。 以下のページからLazyestload.jsの実際のデモ動作をチェックできます。 デモ デモでは縦長のページが用意されていて、ずらずらと書かれたテキストが表示されます。下へスクロールしていくと画像も出てきますが、遅延読み込みされるようになっているので、はじめはボカシが入った画像が表示され、少し時間を置いてから本来の画像が表示されます。 画像ファイルが重いとそれが読み込まれるまでそれ以降のコンテンツの読み込みができない状態になるので、早くコンテンツを見たいユーザーにとっては不便を強いられることになってしまいま
使いやすいタグ入力機能を実装できる「jQuery Tags Input Revisited Plugin」 – bl6.jp
jQuery Tags Input Revisited Pluginは、シンプルで使いやすいタグ入力機能を実装できるjQueryプラグインです。レスポンシブにも対応できるのでモバイルからでも快適にタグ入力できるのが便利ですね。 以下のページからjQuery Tags Input Revisited Pluginの実際のデモ動作をチェックできます。 デモ デモページには機能別に用意されたサンプルがいくつか用意されています。シンプルなタグ入力、バリデーション、オートコンプリートなど、タグを入力するうえであると役立つ機能がいろいろ用意されています。 ボックス内にキーワードを入力して簡単にタグを登録できるのでとて便利なほか、各タグの横にはバツ印が付いていて、ここをクリックすることで個別に削減することも可能です。 また、デモはレスポンシブにも対応しています。画面の横幅を縮小・拡大することでそれに合わ
スクロール時に要素を固定できるjQueryプラグイン「ScrollFix」 – bl6.jp
ScrollFixはスクロール時に特定の要素を固定して表示できるjQueryプラグインです。画面の上部や下部に要素を固定できるので、ユーザーに特定の情報を見せておきたい場合には最適ですね。 ScrollFixの実際のデモ動作は以下になります。 ScrollFix デモでは下へスクロールしていくと特定の要素が上部または下部に固定された状態で表示されます。スクロールしても任意の情報を見せたままにしておきたい場合に役立ちます。 上部・下部どちらへ固定するかはオプションの「side」という項目から指定できるようになっています。デフォルトでは「”top”」です。他にも「”bottom”」「”both”」という値が用意されています。 また、オプションには他にもtopPosition、bottomPosition、topFixClass、bottomFixClass、substituteClass、st
あらかじめ設定したリストなどから複数タグを選択できる「Tokenize2」 – bl6.jp
Tokenize2は、あらかじめ設定したリストやAjaxから複数のタグを選択できるようにしてくれるjQueryプラグインです。文字を入力し始めると自動で候補が表示される機能も備えています。 以下のページからTokenize2の実際のデモ動作をチェックできます。 デモ デモはページの下の方に用意されています。ボックス内にキーワードを入力してタグを登録するのですが、あらかじめ指定されたリスト以外のキーワードは選択できないようになっています。 ちなみにここで設定されているのは、Africa、Americas、Asia、Europe、Oceaniaです。例えば、テキストボックスに「a」を入力すると、候補にAfrica、Americas、Asiaが表示され、この中から任意の項目をセレクトする感じです。 登録されたタグの横にはバツ印が付いていて、ここをクリックすると削除できます。また、キーボードにも対
多彩な方向に表示できるツールチップ「jq-tooltip」 – bl6.jp
jq-tooltipは多彩な方向に表示可能なツールチップを実装できるjQueryプラグインです。上下左右はもちろん、上の右寄りや下の左寄りなど、さまざまな方向にツールチップを表示できます。 data-tooltipという属性を使用 jq-tooltipの詳細やダウンロードは以下のページになります。ファイルをダウンロードすれば実際のデモ動作もチェック可能です。 jq-tooltip デモでは、TOP、RIGHT、BOTTM、LEFT……などといった要素がいくつか表示されていて、それぞれにマウスオーバーすることでその要素に書かれた方向にツールチップが表示されます。 TOP-LEFT、TOP-RIGHT、BOTTIM-LEFT、BOTTOM-RIGHTなど、上下左右だけではなくいろんな方向へカスタマイズできるのが便利です。 これらの方向の指定はdata-tooltipという属性を利用して行います
縦スクロールによるフォトギャラリー実装「Simple Scroll Gallery」 – bl6.jp
Simple Scroll Galleryは縦スクロールによるかっこいいフォトギャラリーを実装できるのが特徴です。フルスクリーンで表示され、ダイナミックなスクロールギャラリーがとても素敵です。 以下のページからSimple Scroll Galleryの実際のデモを見ることができます。 デモ サンプルにあるサムネイル画像をクリックするとフォトギャラリーがフルスクリーンで表示されます。上下にスクロールすることで画像が切り替わっていきます。 また、キーボードにも対応していて、上下左右キーから操作することも可能です。ギャラリーを閉じる場合はescキーを押せばOKです。ほかにも左上にバツ印があるのでここから終了することもできます。 Simple Scroll Galleryはレスポンシブにも対応しているので、スマホやタブレットなどからでも最適なレイアウトで表示されます。いろんなデバイスに対応できる
円形に飛び出すメニューを実装できる「ggExpandableOptions」 – bl6.jp
ggExpandableOptionsは円形に飛び出すメニューを実装できるjQueryプラグインです。メニューボタンをクリックすると、その周囲にメニューが円形に配置されるように表示されます。 以下のページからggExpandableOptionsのダウンロードや詳細をチェックできます。ファイルをダウンロードすれば実際のデモ動作も確認できます。 ggExpandableOptions デモでは上下左右の矢印が描かれたボタンがいくつか設置されていて、各ボタンをクリックすることでそのボタンの周りにメニューが表示されます。ボタンを基軸にメニュー項目が円形に飛び出すのがおもしろいですね。再度ボタンをクリックすればメニューが元の状態に戻ります。 操作もシンプルなのでパソコンだけでなくスマホなどのモバイル端末からでも使いやすそうな印象です。 というわけで、ボタンをクリックすることでそのボタンを中心に円形
シンプルなイメージカルーセルを実装できる「Boishakh carousel」 – bl6.jp
Boishakh carouselはシンプルなイメージカルーセルを実装できるjQueryカルーセルプラグインです。マークアップ・使い方ともに簡単で手軽に実装できます。表示する画像数やprev／nextのテキスト設定などオプションもいろいろあるのでカスタマイズ性も備えています。 Boishakh carouselの具体的な実装方法やダウンロードは以下になります。ダウンロードしたファイルから実際のデモ動作もチェック可能です。 デモ デモでは2枚の画像が横に並べられていて、画面の両端には前後移動できるprev／nextボタンが設置されています。ボタンのテキストはBefore／Afterで、これはデフォルトのオプション設定によるものです。ボタンをクリックすることで画像を一枚ずつスライド移動させることができるほか、画像をドラッグすることでスライド移動させることも可能です。シンプルな操作性でとても使い
レスポンシブ対応でモバイルフレンドリーなナビゲーションメニュー「GRT Responsive Menu」 – bl6.jp
GRT Responsive Menuはレスポンシブに対応したモバイルフレンドリーなナビゲーションメニューを実装できるjQueryプラグインです。シンプル・軽量なのでスマホやタブレットなどモバイルからの閲覧にも最適ですね。 モバイル版ではハンバーガーアイコンになる 以下のページからGRT Responsive Menuの実際のデモ動作をチェックできます。 デモ デモではPCからのアクセスの場合、画面上部にナビゲーションメニューが横に並べられています。画面幅を縮小していくとそれに合わせてメニューのフォントサイズなどが変化します。そして特定のポイントでモバイル版に切り替わる仕組みです。モバイル版ではナビゲーションメニューがハンバーガーアイコンになり、これをクリックするとフルスクリーンでナビゲーションメニューが表示されます。フルスクリーン時には右上にバツ印が付いているので、ここから元の画面に戻る
HTML要素を回転させれる「jquery-ui-rotatable」 – bl6.jp
jquery-ui-rotatableはHTML要素を回転させれるjQuery UIのプラグインです。HTML要素に小さいハンドルが追加されるので、ここから好きな角度に回転できます。オプションもたくさん用意されていてカスタマイズ性も良好です。 以下のページからjquery-ui-rotatableの実際のデモ動作をチェックできます。 デモ デモページにはたくさんのサンプルが設置されています。各要素には小さい回転矢印アイコンが表示されていて、ここをドラッグすることでその要素を回転できるようになっています。スムーズに回転する動きがいい感じですね。 デモでは回転だけではなくドラッグ移動やリサイズできる要素も中にはあります。例えば、上から3つ目の要素にはボックスの右下にリサイズのアイコンが表示されています。ここをドラッグすることで要素のボックスサイズを自由に調節できるようになっています。 また、j
シンプル・軽量なアナログ時計を実装できる「jsRapClock」 – bl6.jp
jsRapClockはシンプルで軽量なアナログ時計を実装できるjQueryクロックプラグインです。秒針がカチカチと動くその様子は、とてもリアルなアナログ時計にみえます。デジタル時計よりもアナログ時計の方が見慣れている人には違和感なく受け入れられそうですね。 レスポンシブにも対応 以下のページからjsRapClockの詳細やダウンロードが可能です。ダウンロードしたファイルから実際のデモ動作もチェックできます。 jsRapClock デモでは2つのアナログ時計が設置されています。左側には現在時刻が、右側にはロンドンの時刻が表示されています。シンプルな時計のデザインでとてもみやすいですね。カチカチと時を刻む秒針まで描かれているところがとてもリアルで素敵です。自サイトにアナログ的な要素を取り入れたい場合にはピッタリのプラグインになるのではないでしょうか？ また、レスポンシブに対応しているところもう
パララックスなど多彩なチルト効果を実装できる「universal-tilt.js」 – bl6.jp
universal-tilt.jsはパララックスやスケールなど多彩なチルト効果を実装できるjQueryプラグインです。ホバーしてカーソルを動かすことで、それに連動する形でチルトします。インタラクティブなホバーチルトエフェクトを実装したい人にピッタリですね。 設定でモバイルにも対応 universal-tilt.jsの実際のデモページは以下になります。 デモ デモではさまざまなタイプのチルトエフェクトが用意されています。Shine、Scale、Parallax、Disable X、Disable Y、Reset (Only desktop)、Reverse、Position base (Only desktop)、Disable tilt on mobile、Change eventです。 ホバーしているところがシャインで光ったりパララックス効果を加えたり、カスタマイズ次第でいろんなエフェク
ダイナミックな自動スライドショーを実装できる「CSS + jQuery Gallery」 – bl6.jp
CSS + jQuery Galleryはダイナミックでかっこいい自動スライドショーを実装できるプラグインです。CSSやjQueryが使われています。自動で画像が次々と切り替わっていくほか、手動で再生／停止を行うことも可能なので、任意の画像をじっくり鑑賞したい時なんかにもピッタリですね。 インターバルや幅・高さの調節もできる 以下のページからCSS + jQuery Galleryの実際のデモ動作やコードをチェックできます。 デモ デモでは横幅いっぱいに広がった画像が自動で切り替わっていきます。画像にマウスオーバーすると再生／停止ボタンと左右矢印ボタンが表示され、自動再生を停止させたい場合は再生／停止ボタンをクリックすればOKです。左右矢印ボタンから前後の画像に手動で切り替えることができるほか、下部に設置されたナビゲーションから任意の画像へ移動することもできます。 迫力あるギャラリーとシン
高性能なイメージビューアを実装できる「PhotoViewer」 – bl6.jp
PhotoViewerは高性能なイメージビューアを実装できるJSプラグインです。ウィンドウ移動、リサイズ、ズーム、回転、フルスクリーン表示、キーボード操作など、多彩な機能が用意されています。カスタマイズ性に優れた高性能なイメージビューアを実装したい人は要チェックです。 以下のページからPhotoViewerのコード記述例や実際のデモ動作をチェックできます。 デモ Open PhotoViewerと書かれたボタンをクリックするとビューアが起動されます。画面上にビューア専用のウィンドウが表示され、その中で画像を見ていくことが可能です。 ウィンドウ下部には画像の拡大・縮小などができる操作アイコンが設置されていて、ここからいろんな操作ができます。画像を拡大したり縮小したり、前後の画像に切り替えたり回転させたりといったことが可能です。ちょうど真ん中にあるアイコン（左右矢印アイコンに挟まれているアイコ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
