Javascript

Flashのようなアニメーションの動きをする jQuery プラグイン

Flashのようなアニメーションの動きをする jQuery プラグイン

久しぶりにいいなぁ~と思った jQuery プラグインがあったので使い方など込みで紹介したいと思います。

横や斜めのスライドを行ってくれるんですが、制御や変更するのも簡単なのでけっこう使えるかも?って感じです。

demo page

リンク要素をマウスオーバー時に画像表示する

リンク要素をマウスオーバー時に画像表示する

今回紹介する jQuery プラグインは、リンク要素にマウスオーバーした際に、画像やテキストをポップアップ形式で表示してくれます。

以前に似たようなプラグインを紹介しましたが、今回紹介するのがいろいろと応用も効くような気がします。

demo page

jQuery マウスオーバーしていない画像部分が薄くなるスクリプト

jQuery マウスオーバーしていない画像部分が薄くなるスクリプト

マウスオーバーしていない部分の画像がオーバーレイがかかった感じに薄くなり、マウスオーバーしている部分の画像だけが目立つようになるスクリプトです。

Using Opacity to Show Focus with jQueryで紹介、配布されいるのですが使い方を紹介しておきます。

demo page

jQueryでselectボックスの見ためを変えるプラグイン

jQueryでselectボックスの見ためを変えるプラグイン

select関係のプラグインは海外のサイト含め色々調べてみたのですが、5509 のnoriさんが作った「selectボックスをシンプルなプルダウンに拡張するjQuery.selectable.js 」が一番クオリティも高く、自分も使わせて頂いた経験もあるので紹介しておきます。

floatさせた要素をレンガ風に整列してくれるjQuery Masonry

floatさせた要素をレンガ風に整列してくれるjQuery Masonry

floatさせると要素の高さによっては、想定していたように並ばないことがあるかと思うんですが、そんな時に使えるのが今回紹介するjQuery Masonryです。

まず水平方向に合わせた後、垂直方向にもあわせるので、綺麗に要素を整列できます。

demo page

jQuery ドロップダウンメニュー

input内のテキスト表示しfocusするjQueryプラグイン

ナビゲーションにマウスオーバーした際にドロップダウン式にサブメニューみたいな感じで表示してくれる jQuery のプラグインです。

demo page

Flashの用な動きのあるサイドメニュー

Flashの用な動きのあるサイドメニュー

マウスオーバーした Flash の伸縮するアニメーションをしてくれる jQuery のプラグインです。

demo page

input内のテキスト表示しfocusするjQueryプラグイン

input内のテキスト表示しfocusするjQueryプラグイン

フォームに使う際、input内にうっすらとテキストを表示し、focusした際にボーダーの色を変更してくれるjQueryのプラグインです。

demo page

右クリックなどの画像ダウンロードを防止するjQueryプラグイン

右クリックなどの画像ダウンロードを防止するjQueryプラグイン

Webサイトに掲載してある画像は、右クリックや画像をドラッグして保存する事が簡単に出来ちゃいます。

Web上で画像保存を完全に防ぐ事は不可能ですが、簡単にダウンロードする事を防ぐ事が出来るjQueryプラグインです。

demo page

jQuery スクロールタブ式メニュー

jQuery スクロールタブ式メニュー

最近 Web関係のブログを見ているとサイドに、カテゴリや最近の記事やコメントなどがタブ式メニューになっているのを見かけたりします。

今回紹介するスクロールタブ式メニューはそこに使える jQuery のプラグインです。

demo page

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年