クライアントワークでよくお世話になっているjQueryプラグインいろいろ
私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ（透過PNGの黒ずみなど）対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね！インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。 今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク（仕
アイコンがふわっと拡大するjQuery – creamu
マウスオーバー時に気持ちのいい効果をつけたい。 そんなときにおすすめなのが、『BubbleUP』。アイコンがふわっと拡大するjQueryです。 アイコンにマウスオーバーすると、ふわっとサイズが大きくなりますね。動きが滑らかで気持ちいいです。 デモは以下から。 jQuery Menu Plugin: BubbleUP 実装方法も詳しく解説されているので、ぜひ見てみてください。 Learning jQuery: Your First jQuery Plugin, “BubbleUP” ブログ遅くなりました。。昨日は書けなかった。すんまへんm(_ _)m 急いで作業しているところでOSが起動しなくなり、ここ数年で一番大変な日を過ごしました。。。 セキュリティーについて深く考えさせられたので、心機一転してがんばります。
フォームで使えるjQuery25 – creamu
フォーム周りでjQueryを使いたい。 そんなときにおすすめなのが、『25 jQuery Tutorials for Creating and Working with Forms』。フォームで使えるjQuery集です。 かっこいいものが揃っていますね。いくつかご紹介します。 Creating a Slide-in jQuery Contact Form クリックするとスライドインして現れるコンタクトフォーム Build an Incredible Login Form with jQuery クリックすると、ぐいんと勢いよく現れるフォーム Using Form Labels as Text Field Values ラベルタグの内容をテキストフィールドの値にして透かしテキストにしたフォーム Create a Progress Bar with JavaScript フォームの進捗状況をプ
コンテンツにエフェクトを掛けるjQueryプラグイン10個 - かちびと.net
個人的に必要になるかもと思ってメモ。 テキストや画像にエフェクトを与えて Webサイトを動きのあるサイトにする 手助けをしてくれるjQueryのプラグイン をいくつかご紹介します。 コンテンツに対するユーザーの興味を高めたり、画像を使用せずテキストを装飾したりと、使い方次第でいろいろ用途がありそうです。 Sliding Door Effect マウスオーバーで画像が4隅に開きます。動きも素敵。 Sliding Door Effect / デモ Rainbows テキストにグラデーションや影をつけます。これは凄いですね。 Rainbows / デモ Opacity to Show Focus マウスオーバーしたコンテンツ以外に半透明のエフェクトを掛けるjQueryプラグイン。テキストでも可能。 Opacity to Show Focus / デモ Color Changing Text an
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B
ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集:phpspot開発日誌
25 jQuery Tutorials for Improved Navigation Menus ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集が紹介されています。 How to Make a Smooth Animated Menu with jQuery アニメーションする、おしゃれなメニュー Create an Apple Style Menu and Improve it via jQuery Apple風のクールなメニュー。アニメーションしつつ、アイコンも表示してくれなかなかクール Create a Slick Tabbed Content Area Using CSS and jQuery 少ないスペースにタブを設置してメニューにしている例。アニメーションもあり。 Using jQuery for Background Image Animat
知っておいて損はないAJAXやCSSを駆使したタブインターフェース18種類 - GIGAZINE
技術的知識が無くてもタブを作れるフリーソフトからかなり派手な効果を伴うタブ作成ライブラリ、Yahoo！やGoogle、Adobeの作ったタブまで、いろいろと応用が利いて独自の特徴があるものをざっくりと18種類ほどピックアップしてみました。 いろいろなページやブログで頻繁に見かけるタブ方式のメニューですが、こうやって並べてみると実は見せ方も使い方も種々様々であることがよくわかります。 まずは知識不要でタブが簡単に作成できる「CSS Tab Designer」。Windows用のフリーソフトで、約60種類ものデザインが用意されています。その中にタブ方式のメニューもたくさん用意されており、ほかにも縦型のメニューやZDNet風メニューなども用意されています。 OverZone Software - CSS Tab Designer 細かいカスタマイズが可能なタブメニュー。画像を使ったサンプルも用意
lockエラー | 月額200円からのレンタルサーバー JSN
auのトップページのような、伸縮してスライドするメニューをjavascript+cssで作れるみたいです。「Image Menu」というライブラリで、動かすにはmootools.jsが必要のよう。 <script type="text/javascript" xsrc="imagemenu.js" mce_src="imagemenu.js" ></script> <div id="kwick"> <ul class="kwicks"> <li><a class="kwick opt1" xhref="" mce_href="" ><span>TOP</span></a></li> <li><a class="kwick opt2" xhref="" mce_href="" ><span>CSS</span></a></li> <li><a class="kwick opt3" xhref
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
マウスオーバーをデザインする | DesignWalker