fc2ブログ

Home > デザイン > 最近よくみる定番の動きは、だいたいこれで対応できるjqueryライブラリ

最近よくみる定番の動きは、だいたいこれで対応できるjqueryライブラリ

slide.jpg


ウェブデザインのなかで、
jqueryをつかった、さりげない「動き」をウェブサイト上で導入するのが
定番になりつつありますね。

ふわっと、ポップアップみたいに浮き上がってくるウインドウ、
画像やテキストのスライドなど
最近良く見るjqueryでつくる「動き」で、おすすめのライブラリをまとめてみます。




要素をスライドさせるならJquery.cycle.plugin

slide.jpg


画像や、テキストなど、
非常にシンプルなhtmlソースを認識して対応してくれるプラグイン。
上から落ちてきたり、横にスライドしたり、フェードイン・フェードアウトしたり
スライド番号をつけたり、スライド領域の要素の右左に矢印をつけたりもできます。

シンプルなdemo
Even More Demosもオススメです。

オプション一覧はこちら

→ jquery.cycle.plugin



ページ内ポップアップ、lightbox風表現ならfancybox

fancy.jpg

ページ内で要素をポップアップさせる、lightbox風表現などと括られる表現方法なら、
fancyboxがキレイです。

ファイル構成もjqueryをすでに読み込んでいる場合は
DLしたzipの中の「fancybox」をコピーすればOKなので
シンプルなインストールとなります。
画像と、htmlエレメント、SWF、Iframeと、Ajaxリクエストで動きます。
複数画像も、まとめて表示できます。

画像の出現エフェクトと、背景の表現の違うサンプルが
16点入っているので、好きなものを選びましょう。
背景などのオプションの指示も直感的に可能です。

デモ&ダウンロード




大きな背景画像をスライドさせたいなら、maxImage Scaling Plugin

maximage.jpg

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

maxImage Scaling Pluginの解説ページ
日本語で解説してくださっているサイト


大きな背景画像をウィンドウサイズによってフィットさせたいならjQuery Backstretch

vani_20110909003036.jpg

スライドは要らないのだけど、
大きな背景画像をウインドウサイズに合わせて自動でフィットさせてくれる、
そんなjqueryプラグインをお探しならこちら。

私が設置してみた例:http://vanl.la/te/

jQuery Backstretchのダウンロード&解説



boxがランダムに動いたりする可変グリッドならjquery.vgrid.js

grid.jpg

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

Demo
ダウンロード&解説


OSX lion風のおしゃれなカスタムスクロールバーをつけるなら、Skroll.js

scroll.jpg

要素のマウスオーバーでスクロールバーが現れて
マウスアウトで消える、必要なときだけ出現するスクロールバーです。
overflowでiframe風にしているときなど、素敵に演出できるはず!
iOSにも対応しているようです。


demo
ダウンロード&解説




これらを組み合わせたり、カスタマイズするだけでも
ウェブサイトを素敵に演出できるはずです。
あとはアイデア次第♪
シンプルなライブラリも、あなたのCSSやhtmlの技術でキラキラ輝き出します。

ご参考にどうぞ。

関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/12-23839f35
Listed below are links to weblogs that reference
最近よくみる定番の動きは、だいたいこれで対応できるjqueryライブラリ from バニデザノート

Home > デザイン > 最近よくみる定番の動きは、だいたいこれで対応できるjqueryライブラリ

Sponsored Link
【WebDesign】Photoshopでプロになる!オシャレ&クールなWebデザイン作成講座
▲Udemy講座第二弾!Photoshopデザインカンプ作成の流れをレクチャーします。クーポンコード【PS_BANIDESIGN】
はじめよう!Wordpressで作るおしゃれサイト【デザイン入門】
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、お得な価格で受講可能!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。10年以上に渡りオールラウンドウェブクリエイターとして活動した経験を活かして高品質なPhotoshopデータでの「デザインカンプ作成」のお仕事を主に行っています。業務提携いただける企業さま、ウェブディレクターさまを随時募集中です。Wordpress(ワードプレス)、レスポンシブ、スマホ用サイトもできます♪
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items