TOP  >  WebDesign  >  スライダーを極める為のテクニック集「25+ Awesome Slider Techniques」
2009年08月15日

スライダーを極める為のテクニック集「25+ Awesome Slider Techniques」

現在WEBサイトで良く見かけるテクニックの一つスライダー。少ないスペースで様々なコンテンツを見せられるのが魅力ですが、今日はそんなスライダーのテクニックを集めたエントリー「25+ Awesome Slider Techniques」を紹介したいと思います。

scrollable01
Scrollable

よく見るスライダーから、動きが特殊なものやインターフェイスが優れているもの様々なスライダーのテクニックが紹介されています。今日はその中からいくつか気になったものを紹介したいと思います。

詳しくは以下

jQuery.ScrollTo
様々な方向にスライドさせる事ができるスライダー応用次第では面白いものが作れるかもしれません。

scrollable02
 
 
 
 
 
Slider Gallery
Macライクなスライドショー。シンプルに綺麗に見せたいときは良いですね。切り抜き写真とは相性が良さそうです。

scrollable03
 
 
 
 
 
Sliding Boxes and Captions with jQuery
キャプション付きのボックスタイプのスライドショーです。jQueryを利用しています。

scrollable04

 
上記の他にも様々なタイプのスライダーが紹介されています。サイトに動きをつけたいとか、もっとコンテンツを押し出していきたいと言う方にはオススメの手法です。

多くのサイトはデモも見られるようになっており、サンプルコードもダウンロードできるようになっていますので実装はそこまで困難ではないかと思います。スライダーを導入してみたいと言うWEB制作者、開発者の方は是非どうぞ。

25+ Awesome Slider Techniques

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればこちらからご連絡ください。即刻削除いたします。
posted 07:50  |  
Category: WebDesign   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。

【ご注意】「Designworks」の旧ホームページドメインを利用したWEBサイトにご注意ください
Template deisgn by iDEACLOUD inc.
トップに戻る