水平スクロールをうまく使ったデザインサイト４０
2009年11月19日-
スポンサード リンク
水平スクロールをうまく使ったデザインサイトが４０種類ほどまとまったエントリのご紹介です。
使い方によってはユニークなサイトが作れそうな水平スクロールサイトのサンプルが色々あって、水平スクロールするようなサイトを作る場合のアイデアのネタ帳として活用できそうですね。
Alex Flueras
横にスクロールすると写真がズラっと出てくるＵＩでクリックするとクリックした写真にアニメーションスクロールします。
これは水平スクロールを無駄に使っていない、なかなかよいデザインだなぁと思いました。
BBH
スクロールバーが出るのではなく、JavaScriptによって要素をスライドさせています。これもなかなかクールなデザインです。
スクロール部分が微妙に分かりにくい点がユーザビリティ的には良くないかもしれませんがスタイル的にはクールですね。
Chalie Gentle
上のBBHに比べて矢印が大きくて分かりやすい水平スクロールデザインです。
サイトが紙芝居のようにスライドして新鮮な感覚を持つことが出来ますね。
Dean Oakley
backgroundを固定して、要素を横にズラーっと並べたもの。背景が固定されているのでそのままだけど、内容がスクロールバーを動かすことでスライドするところがなかなか面白いデザインです。
他にも全部で40種類ほど紹介されていますので、参考に覚えておくとよさそうですね。
リンク先は以下のエントリを参照してください。
40 of the Best Horizontal Scrolling Websites | Web Design Ledger
関連エントリ
スポンサード リンク
By.KJ : 2009年11月19日 09:01 
間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- selectボックスのbootstrap化「bootstrapSelect」
- マウス位置に反応して画像がバラバラひろがる「Image Trail Effects」
- テーブルを検索・ソート・ページ分けができる「jquery.fancyTable」
- タイプライターアニメーション「type-this」
- すぐ隠れてくれるヘッダー実装「shyheader」
- 画像を円形でくり抜くためのUIを実装する「Cropme」
- スクロールで画像や文字がいい感じに拡大縮小されていくデモ「Smooth Scrolling Image Effects」
- あえてダサくして自分で１からデザインできる軽量なポップアップ「Uglipop」
- JSで楽譜を描画して再生までできる「abcjs」
- ページ内の画像をスムーススクロールするデモ
- 過去のエントリ
