
最近よくみる定番の動きは、だいたいこれで対応できるjqueryライブラリ
- 2011-09-09 Fri 08:46:43
- デザイン

ウェブデザインのなかで、
jqueryをつかった、さりげない「動き」をウェブサイト上で導入するのが
定番になりつつありますね。
ふわっと、ポップアップみたいに浮き上がってくるウインドウ、
画像やテキストのスライドなど
最近良く見るjqueryでつくる「動き」で、おすすめのライブラリをまとめてみます。
要素をスライドさせるならJquery.cycle.plugin

画像や、テキストなど、
非常にシンプルなhtmlソースを認識して対応してくれるプラグイン。
上から落ちてきたり、横にスライドしたり、フェードイン・フェードアウトしたり
スライド番号をつけたり、スライド領域の要素の右左に矢印をつけたりもできます。
シンプルなdemo
Even More Demosもオススメです。
オプション一覧はこちら
→ jquery.cycle.plugin
ページ内ポップアップ、lightbox風表現ならfancybox

ページ内で要素をポップアップさせる、lightbox風表現などと括られる表現方法なら、
fancyboxがキレイです。
ファイル構成もjqueryをすでに読み込んでいる場合は
DLしたzipの中の「fancybox」をコピーすればOKなので
シンプルなインストールとなります。
画像と、htmlエレメント、SWF、Iframeと、Ajaxリクエストで動きます。
複数画像も、まとめて表示できます。
画像の出現エフェクトと、背景の表現の違うサンプルが
16点入っているので、好きなものを選びましょう。
背景などのオプションの指示も直感的に可能です。
デモ&ダウンロード
大きな背景画像をスライドさせたいなら、maxImage Scaling Plugin

大きな背景画像をスライドさせているおしゃれなサイトってありますよね。
そんなサイトが作りたければ、maxImage Scaling Pluginが便利です。
bodyタグ内にimgタグを書き込んで、ライブラリに読み込ませるので、
画像の追加時もカンタンにできます。
最初の設定の際、オプションによって相性があるようなので、そのあたりだけ気をつけましょう。
maxImage Scaling Pluginの解説ページ
日本語で解説してくださっているサイト
大きな背景画像をウィンドウサイズによってフィットさせたいならjQuery Backstretch

スライドは要らないのだけど、
大きな背景画像をウインドウサイズに合わせて自動でフィットさせてくれる、
そんなjqueryプラグインをお探しならこちら。
私が設置してみた例:http://vanl.la/te/
jQuery Backstretchのダウンロード&解説
boxがランダムに動いたりする可変グリッドならjquery.vgrid.js

小さなboxがふわっと浮き出て、ウインドウサイズに合わせて動く、
可変グリッドの動きを付けたいなら、jquery.vgrid.jsが便利です。
boxのサイズを倍にしたりするときにすこし計算が必要なのと、
きれいに見せるために調整する必要がありますが、
それさえこなせばページをダイナミックに動かすことができますよ!
Demo
ダウンロード&解説
OSX lion風のおしゃれなカスタムスクロールバーをつけるなら、Skroll.js

要素のマウスオーバーでスクロールバーが現れて
マウスアウトで消える、必要なときだけ出現するスクロールバーです。
overflowでiframe風にしているときなど、素敵に演出できるはず!
iOSにも対応しているようです。
demo
ダウンロード&解説
これらを組み合わせたり、カスタマイズするだけでも
ウェブサイトを素敵に演出できるはずです。
あとはアイデア次第♪
シンプルなライブラリも、あなたのCSSやhtmlの技術でキラキラ輝き出します。
ご参考にどうぞ。

画像や、テキストなど、
非常にシンプルなhtmlソースを認識して対応してくれるプラグイン。
上から落ちてきたり、横にスライドしたり、フェードイン・フェードアウトしたり
スライド番号をつけたり、スライド領域の要素の右左に矢印をつけたりもできます。
シンプルなdemo
Even More Demosもオススメです。
オプション一覧はこちら
→ jquery.cycle.plugin
ページ内ポップアップ、lightbox風表現ならfancybox

ページ内で要素をポップアップさせる、lightbox風表現などと括られる表現方法なら、
fancyboxがキレイです。
ファイル構成もjqueryをすでに読み込んでいる場合は
DLしたzipの中の「fancybox」をコピーすればOKなので
シンプルなインストールとなります。
画像と、htmlエレメント、SWF、Iframeと、Ajaxリクエストで動きます。
複数画像も、まとめて表示できます。
画像の出現エフェクトと、背景の表現の違うサンプルが
16点入っているので、好きなものを選びましょう。
背景などのオプションの指示も直感的に可能です。
デモ&ダウンロード
大きな背景画像をスライドさせたいなら、maxImage Scaling Plugin

大きな背景画像をスライドさせているおしゃれなサイトってありますよね。
そんなサイトが作りたければ、maxImage Scaling Pluginが便利です。
bodyタグ内にimgタグを書き込んで、ライブラリに読み込ませるので、
画像の追加時もカンタンにできます。
最初の設定の際、オプションによって相性があるようなので、そのあたりだけ気をつけましょう。
maxImage Scaling Pluginの解説ページ
日本語で解説してくださっているサイト
大きな背景画像をウィンドウサイズによってフィットさせたいならjQuery Backstretch

スライドは要らないのだけど、
大きな背景画像をウインドウサイズに合わせて自動でフィットさせてくれる、
そんなjqueryプラグインをお探しならこちら。
私が設置してみた例:http://vanl.la/te/
jQuery Backstretchのダウンロード&解説
boxがランダムに動いたりする可変グリッドならjquery.vgrid.js

小さなboxがふわっと浮き出て、ウインドウサイズに合わせて動く、
可変グリッドの動きを付けたいなら、jquery.vgrid.jsが便利です。
boxのサイズを倍にしたりするときにすこし計算が必要なのと、
きれいに見せるために調整する必要がありますが、
それさえこなせばページをダイナミックに動かすことができますよ!
Demo
ダウンロード&解説
OSX lion風のおしゃれなカスタムスクロールバーをつけるなら、Skroll.js

要素のマウスオーバーでスクロールバーが現れて
マウスアウトで消える、必要なときだけ出現するスクロールバーです。
overflowでiframe風にしているときなど、素敵に演出できるはず!
iOSにも対応しているようです。
demo
ダウンロード&解説
これらを組み合わせたり、カスタマイズするだけでも
ウェブサイトを素敵に演出できるはずです。
あとはアイデア次第♪
シンプルなライブラリも、あなたのCSSやhtmlの技術でキラキラ輝き出します。
ご参考にどうぞ。
- 関連記事
-
-
ホワイトスペースを使ったウェブデザインの考え方 2011/09/13
-
シンプルでデザイン性のあるインスピレーションを受けられそうなサイト 2011/09/12
-
Instagramやポラロイドのようにかわいい写真を加工できるフリーのPhotoshopアクション 2011/09/10
-
最近よくみる定番の動きは、だいたいこれで対応できるjqueryライブラリ 2011/09/09
-
8/18〜9/7日の間にtwitter経由などで気になったデザイン 2011/09/07
-
使いやすそうなフリーのハイクオリティなアイコン集 2011/08/19
-
海外ウェブでトレンドっぽいぼかし表現と、ストライプ表現 2011/08/16
-