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

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

関連記事

6件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です