スマートフォンのようにコンテンツをドラッグできるjQueryプラグイン「overscroll」

ドラッグ操作でコンテンツをスクロール出来るようになります。

画像にマウスオーバーするとビフォー・アフター が比較できるjQueryプラグイン「uCompare」

使用前、使用後みたいな感じに2枚の画像を比較できるjQueryプラグインです。
ショッピングサイトなんかに使えそうですね。

デモでは東日本大震災の前後での
GoogleMapの画像を比較したりしています。
画像を見ると心苦しくなってしまうのですが、使い方次第では有用な使い方ができそうでした。

興味のある方は下のリンクからどうぞ。

HTMLベースのプレゼンツールは当サイトでも何度かご紹介しているのですが、アニメーションがカッコ良かったのとデザインが素敵だったのでご紹介。

deck.jsを使うとモダンなHTMLでプレゼンテーションが出来るようになります。

サイト自体がこのライブラリで実装されており、キーボードの矢印キーやマウスクリックに対応しておりサクサク動くようになっています。

触ってみると、エフェクトがいい感じに気持ちよくてちょっと次のプレゼンで使ってみたくなりました。

ドキュメントも豊富に揃っているので、カスタマイズも割と簡単にできそうです。

興味のある方は下のリンクからどうぞ。

吹出し型ツールチップを設置できるjQuery「grumble.js」が面白そうだったのでご紹介します。

これを使うと、漫画風の吹き出しを自由に表示する事が出来るようになります。

吹出しには背景画像が指定されているので、
CSSを変更してオリジナルの吹出しにする事も簡単そうでした。

使い方

以下のようなスクリプトを追加する事で表示する事ができました。

$('h1').grumble({
	text: 'ここにメッセージを入れます!',
	angle: 85,
	distance: 100,
	showAfter: 500
});

オプションの説明

• text:表示する文章
• angle:角度
• distance:距離
• showAfter:指定した秒数後に表示（ミリ秒）

オプショには他にもコールバック処理なんかもありました。
詳細&ダウンロードは下のリンクからどうぞ！

クレジットカードの入力フォーマットをチェック出来るjQueryプラグイン「Smart Validate」

以下のようなコードで簡単にチェックが出来るようになりました。

$('.cc-container').ccvalidate({ onvalidate: function(isValid) {
    if (!isValid) {
        alert('クレジットカードのフォーマットを正しく入力してください。');
        return false;
    }
}

ドロップダウンもいい感じにカスタマイズされています。
実際にカードが有効かどうかのチェックはできませんが、商品を購入する前にこういったチェックがあれば親切ですよね。

興味のある方は下のリンクからどうぞ。

jQueryを使ったポップアッププラグインの使い方を教える必要があったのですが、他にも知らない人がいるかもなのでブログでご紹介。

このスクリプトを実行すると簡単にポップアップウインドウが作れるようになりますよ。
ウインドウのサイズや位置などもパラメータで指定するだけです。

※モーダルウインドウでは無く、新しいウインドウを開くポップアップの方です

使い方

最近スマートフォン対応やタブレット対応の案件が増えてきて、スワイプに対応させたいと言われる事が結構多いです。

知ってる人も居るかもしれませんが、スワイプが出来るようになるjQueryプラグインをまとめてみました。
画像ギャラリー専用のものから、ページ全体をスワイプで区切るものまで色々ありますよ。

参考になれば幸いです。

無限にドラッグできるインターフェイスをjQueryで作れる「Infinite Drag」

全体をドラッグで移動できるようになっており、タイル毎にHTMLを設定できるようになっています。

各タイルには自由にHTMLを設定したりできるので
フォームを表示したり、画像にしたり、何でもOKのようです。

移動方向を横だけに限定したりもできました。

使い方によっては面白いものができそうですね。
ポートフォリオとかに良いかも。

興味のある方は下のリンクからどうぞ。

これは便利そう。いつか使うかもしれないので、メモ的にエントリーです。

「jQuery-URL-Parser」を使うと、URLを分解して簡単に値を取得できますよ。
使い方はこんな感じです。

var url = $.url('http://example.com/folder/index.php?item=value');
url.param('item');
 

こうするとクエリーのitemの値”value”が取得できるというわけです。
他にもホスト名やディレクトリ,#以降のアンカーの値も取得できますよ。
これはいいかも。

詳細＆ダウンロードは以下からどうぞ。

HTMLでアプリを作る際にいつか使いそうなのでメモ的にエントリー。

iPhoneの通知バッジ風のUIを作れるjQueryプラグイン「Badger」が良さそうです。