[JS]シャボン玉のようにふんわりと膨らんだり縮んだりするナビゲーション
マウスのホバーで、ふんわりと膨らんだり縮んだりするアニメーションがかわいらしいナビゲーションを実装するチュートリアルをCodropsから紹介します。 Awesome Bubble Navigation with jQuery デモページ デモでは円状に配置された各カテゴリにマウスをホバーすると、それぞれの配下コンテンツが配置される仕組みになっています。 アニメーションには緩急がつけられており、とても気持ちいいです。 実装方法は、HTML, CSS, JavaScriptのパートごとに丁寧に解説されており、画像を含む全ファイルがダウンロードできます。
HTML5で作られたフォームの入力チェックができる「jQuery Tools」 | Web活メモ帳
HTML5になってFormの要素が大幅に増えました。inputのtype属性にtel、url、emailなどの値が指定できたり必須属性を設定できたりするので、使いこなせれば便利になりますね。 しかし複雑なチェックやエラー表示のデザインを変更するにはJavaScriptを使う必要があります。 「jQuery Tools」を使う事で簡単に解決する事が可能になってます。 基本的なチェックは1行コードを追加するだけでできるようになるようです。 $("#myform").validator(); エラーメッセージのカスタマイズはCSSで実装できるとの事 /* error message */ .error { height:15px; background-color:#FFFE36; border:1px solid #E1E16D; font-size:11px; color:#000; pad
a要素のマウスオーバー時にテキストをふわっと切り替えるjQuery – creamu
マウスオーバー時のエフェクトに凝りたい。 そんなときに使えそうなのが、『HoverAttribute jQuery plugin』。a要素のマウスオーバー時にテキストをふわっと切り替えるjQueryです。 アンカーテキストにマウスオーバーすると、a要素かrel要素に指定してあるテキストに、ふわっと切り替わります。ちょっと変わったエフェクトをつけたいときによさそうですね。 デモファイルがダウンロードできるので、一度見てみてください。 HoverAttribute jQuery plugin 大阪と神戸と京都を満喫中。めちゃ楽しい。もうちょっと京都を楽しんで東京に帰ります。
月をまたがったカレンダーを表示できるjQueryプラグイン「jCal」 | Web活メモ帳
「jCal」は複数の日付を選択できるjQueryのカレンダープラグインです。 複数の月のカレンダーを表示させて指定の期間を選択させる事が可能になっています。 今までありそうでなかった操作性で、直感的に使用できそうですね。 デモはカレンダーにマウスオーバーする事で複数日が選択される事を強調してくれます。 また、画面上部のSelect Number of Daysの数値を変更させる事で選択可能な日数を変更できるようになっています。 デモ ファイルサイズも圧縮していない状態で14KBとの事。かなりの軽量化がされています。 ホテルの予約システムなんかに良さそうですね。
サイトをかっこよくするためのjQueryプラグイン25+ – creamu
サイトにかっこいいUIを実装したい。 そんなときにおすすめなのが、『25+ Best jQuery Plugins To Beautify Your Website』。サイトをかっこよくするためのjQueryプラグイン集です。 初めて見るものもあっていい感じです。 YoxView lightbox系の画像オーバーレイスクリプト。ナビゲーションとキャプションがフェードアウトしたりとディテールが気持ちいいです Fade In and Out Tooltips for Prototype and Scriptaculous フェードイン&アウトで表示されるツールチップ Sweet Titles Transparent and Fading Tooltips ページロード時に、画像をフェードインして表示させるスクリプト Captify Displays Pretty Image Captions
2010年の間に見ておきたいjQueryプラグイン12 – creamu
jQueryのプラグインをチェックしておきたい。 そんなときにおすすめなのが、『12 Helpful jQuery Plugins to Check Before Ending April 2010』。2010年の間に見ておきたいjQueryプラグイン集です。 いい感じのものがまとまっているので、いくつかご紹介しますね。 jQuery ajaxContactForm plugin フォームのバリデータ。背景色を変えることでシンプルにアラートしてくれる。MITライセンス Image Puzzle Using jQuery 画像のパズルゲームを作れるプラグイン jQuery Mega Menu jQueryを使った、見た目も動作もクールなドロップダウン型メガメニュー JCoverflip Macのカバーフローのようなギャラリーインターフェースを作れるプラグイン jQuery Bubble Po
使いやすいjQueryテクニック&プラグイン「40 Useful jQuery Techniques and Plugins」
TOP > WebDesign > 使いやすいjQueryテクニック&プラグイン「40 Useful jQuery Techniques and Plugins」 高機能なjavascriptライブラリとして広く使われているjQuery。多くの方に使われているだけあって幅広いプラグインがリリースされていて、WEBをもっと便利に使いやすくしてくれます。今日紹介するのはjQueryを使った、テクニックとプラグインをあつめたエントリー「40 Useful jQuery Techniques and Plugins」です。 TipTip jQuery Plugin ナビゲーションに使えるプラグインからカレンダー、フォームなどといったものまで幅広いジャンルのプラグインが紹介されています。今日はその中から気になったものをいくつか公開したいと思います。 詳しくは以下 ■40 Useful jQu
ドラッグして画像を回転できるjqueryプラグイン「jQuery Reel Plugin」
軽量で高機能なjavascriptライブラリjQueryその手軽さから、多くのWEBデザイナーに利用されており、様々な機能が開発され公開されていますが、今回紹介するのはドラッグして画像を回転できるjQueryプラグイン「jQuery Reel Plugin」です。 実際言葉だけではなかなか伝えづらいのでデモが配布元に公開されていましたので、デモをご覧になりたい方は「jQuery Reel Plugin」からどうぞ。こちらはクイックタイムのVRのように画像を回転させる事ができます。これによりプロダクトを様々な側面で見たり、パノラマビューを違う角度でみせたりなど、いままでFLASHなどを使わなければ実現できなかった表現が可能になっています。 詳しくは以下 あらかじめ割り振られたオプションの値などを変えれば様々な見せ方ができます。実際には大きな画像を読み込んで分割して見せているという形になります
スポットライト効果をつけれるjQueryプラグイン「jQuery Spotlight」 | Web活メモ帳
「jQuery Spotlight」はスポットライトのような効果をつける事でページ内の要素をハイライトすることができるjQueryのプラグインです。 他の要素を薄暗くする事でユーザーの目線を誘導させる事ができます。 マウスオーバーした時、リンクをクリックした時などのイベント毎に設定する事が可能なようです。 使い方によってはかなり効果があるのではないでしょうか。 詳しくは以下 実際の見え方 フォームの部分に効果が適用されています。 以下のようなコードで実装できるようです。 $('div').spotlight({ opacity: .5, //spotlight opacity speed: 400, //animateion speed color: '#333', //spotlight colour animate: true, //enable animation (if false
Bridge Word
This shop will be powered by Are you the store owner? Log in here
その場でポップアップするクールな確認ダイアログ実装用jQueryプラグイン「jConfirmAction」:phpspot開発日誌
その場でポップアップするクールな確認ダイアログ実装用jQueryプラグイン「jConfirmAction」 2010年04月01日- jQuery Plugin : jConfirmAction | Webstuffshare.com - Worth Sharing Bookmarked Webstuff その場でポップアップするクールな確認ダイアログ実装用jQueryプラグイン「jConfirmAction」。 クリックした位置でツールチップのようにYes or Cancel が選べるダイアログを実装することが出来ます。 jQueryの方式で実装は簡単です。 <a href="somepage.html" class="ask">Delete Me</a> のようなHTMLがあったとすると、 $('.ask').jConfirmAction(); のようにしてあげるだけで実装出来ます。
Web Design Tips 「jquery.timeago.js」でTwitterみたいに「○分前」を表示
jQueryのプラグイン「jquery.timeago.js」を使います。 timeago: a jQuery pluginから jquery.timeago.js jQueryからjquery.jsをそれぞれダウンロードしましょう。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.timeago.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('abbr.timeago').timeago(); }); </script> で準備オッケー。 あとは表示させたい箇所に下記を記述です。 <abbr title="2010-0
マウスオーバーを気持ち良くするjQueryプラグイン「Bubbleup」 | Web活メモ帳
「Bubbleup」はマウスオーバーでボタンを拡大表示させるプラグインです。 MacのDocに似た動きですが、使いどころによっては効果的ではないでしょうか。 ボタンにもうひと手間かけて目立たせたい場合に良さそうですね。 詳しくは以下 マウスオーバーした様子 画像にマウスオーバーする事でスムーズに拡大するようになっています。 ツールチップのメッセージや、ズームスピードは調整できるとの事 使い方はul要素やimg要素にjQueryの設定を指定するだけのようです。 $(function(){ $("ul#menu li img").bubbleup(); }); サイトのアクセントにいかがでしょうか。
[JS]jQueryのプラグイン33+1選 -2010年3・4月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 YoxView 画像をスタイリッシュに拡大表示するスライドショー。 Roundabout Shapes 複数のオブジェクトをさまざま
スクロールするとAjaxで次の内容をガンガン読んでくれるjQueryプラグイン「AjaxScroll」:phpspot開発日誌
スクロールするとAjaxで次の内容をガンガン読んでくれるjQueryプラグイン「AjaxScroll」 2010年03月31日- AjaxScroll ? Ajax Scroll jQuery Plugin | blogfreakz.com スクロールするとAjaxで次の内容をガンガン読んでくれるjQueryプラグイン「AjaxScroll」 「MSN Image Search」は画面遷移なしに画像をガンガンよんでくれて、スクロールすれば次の画像を見れるためストレスが少なく、画像を探せます。 これと同様の機能を実現するためのjQueryプラグインのご紹介です。 デモページはこちら。スクロールすると次の画像を読んでいっているのが分かると思います。 Ajaxで次の内容を読むので、一回における転送量を少なくした上で、利用者には画面遷移なしの利便性を提供出来ると言うわけですね。 垂直方向だけでなく
ストリートファイター系ゲームまで！ゲーム用jQueryプラグイン·gameQuery MOONGIFT
gameQueryはJavaScript製/jQueryプラグインのオープンソース・ソフトウェア。iPhoneでストリートファイター4が発売になったと話題になっている。最適化処理が行われているのだろうが、意外とiPhoneでも遊べるレベルで動作する。アクションゲームまでこなせるようになるとiPhoneの可能性は飛躍的にあがりそうだ。 なんとストリートファイター系！ しかしもっと手軽に遊びたいならばWebブラウザベースで動作する方が良さそうだ。Webブラウザで動くゲームと言えば、これまではFlash製のものが多かった。だがこれからは違う、JavaScriptでゲームが作れるようになる。それを実現するのがgameQueryだ。 gameQueryでまず目を引かれるのがストリートファイター風ゲーム「JavaScript Fighter」だろう。デモなので自分で動かすことはできないが、二人のキャラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
複数カラムのアコーディオンメニューを実装するjQuery – creamu
バナーをクリックしたときに、くるっと回転させたように見せるjQuery – creamu
わずか8KBのjQuery用カレンダープラグイン「CalendarPicker」 | Web活メモ帳
Aext.net