スライドスクリプトとスライドを上手く利用したウェブサイトいろいろ

JavaScriptを使って、ダイナミックな動きのあるサイトがたくさんありますね。

今回は特にスライドに注目していろいろなスクリプトとスライドを上手く利用したウェブサイトをまとめてみました。

サンプルのスクリプトと、インスピレーションサイトを参考にして、かっこいい動きのあるサイト作りに挑戦してみてはいかがでしょうか?

jQuery pageSlide

ページ右側からスライドしてきます。


jQuery pageSlide

Slider Gallery

アップルのサイトでも使われていた、商品画像のスライド

デモページ


Slider Gallery

BarackSlideshow – An elegant, lightweight slideshow script

オバマ氏のサイトで使われていたスライドショースクリプト

デモページ


BarackSlideshow - An elegant, lightweight slideshow script

Accessible News Slider

矢印ボタンをクリックすると、記事リストがスライドします。


Accessible News Slider

Start/Stop Slider

画像は上下に、テキストは左右にスライドします。

デモページ


Start/Stop Slider

mooSlide

上から、もしくは下からコンテンツがスライド


mooSlide

Coda Slider Effect

コンテンツ上部のタブ、もしくは左右の矢印ボタンをクリックするとコンテンツがスライド

デモページ


Coda Slider Effect

Sliding Tabs

左右の矢印ボタンをクリックするとコンテンツがスライドします。

デモページ



Coda-Slider

コンテンツ上部のタブ、もしくは左右の矢印ボタンをクリックするとコンテンツがスライド


Coda-Slider

Creating a Slick Auto-Playing Featured Content Slider

サムネイルクリックでスライド

デモページ


Creating a Slick Auto-Playing Featured Content Slider

Build An Incredible Login Form With jQuery

ログインフォームのスライド

デモページ


Build An Incredible Login Form With jQuery

Carousel

左右の矢印ボタンでスライド

デモページ


Carousel

jCarousel

左右の矢印ボタンでスライド


jCarousel

Scroll your HTML with jquery scrollable

左右の矢印ボタンでスライド


Scroll your HTML with jquery scrollable

インスピレーションサイト

これらのスライドスクリプトをうまく使うと、以下のようなかっこいいサイトがつくれますよ。ご参考にどうぞ。

youlove.us


youlove.us

tap tap tap ~ tasty bits for your iPhone


tap tap tap ~ tasty bits for your iPhone

Viget Labs Is Hiring


Viget Labs Is Hiring

Panic – Coda – One-Window Web Development for Mac OS X


Panic - Coda - One-Window Web Development for Mac OS X

IL FRUTTETO


IL FRUTTETO

Lucuma | Audiovisual


Lucuma | Audiovisual

Engage Interactive


Engage Interactive

Goodworks Media


Goodworks Media

Danny Blackman // est. 1985


Danny Blackman // est. 1985

NOFRKS.design


NOFRKS.design

Qlear Interaction Design


Qlear Interaction Design

Ann Arbor Web Design and Ann Arbor Graphic Design, by 3.7 Designs Interactive


Ann Arbor Web Design and Ann Arbor Graphic Design, by 3.7 Designs Interactive

Web Design Belgrade


Web Design Belgrade

www.MelissaHie.com


www.MelissaHie.com

volll


volll

CSS Brigit | Fuente de Inspiración


CSS Brigit |  Fuente de Inspiración

IJsfontein


IJsfontein

sourcebits


sourcebits

VivaViralVideo.com


VivaViralVideo.com

Hotel Oxford – Timisoara


Hotel Oxford - Timisoara

The portfolio of Bryan Katzel


The portfolio of Bryan Katzel

デザインblogランキング

コメント 6 Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



6 Responses to “スライドスクリプトとスライドを上手く利用したウェブサイトいろいろ”

  1. webdesignlab » Blog Archive » スライドを上手に使用したサイト集 Says:

    […] スライドスクリプトとスライドを上手く利用したウェブサイトいろいろ […]

  2. 次なるもの » Blog Archive » スライドスクリプトとスライドを上手く利用したウェブサイトいろいろ Says:

    […] original article […]

  3. Daily Summary 2009-01-09 - mskari.org Says:

    […] スライドスクリプトとスライドを上手く利用したウェブサイトいろいろ[Webデザイン,JavaScript] […]

  4. orezo Says:

    VivaVideoとThe portfolio of Bryan Katzelが気に入りました。

  5. 2009/01/12に気になったこと | debeso Says:

    […] スライドスクリプトとスライドを上手く利用したウェブサイトいろいろ | D… (jQeryのpluginsなどもあり)スライドスクリプト […]

  6. 秀逸なデザインのまとめ その2 | Nutspress Says:

    […] スライドスクリプトとスライドを上手く利用したウェブサイトいろいろ […]

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ