BooksホームWebデザインJSによるコンテンツスライダーを使用しているサイトのサンプル集AdsWebデザインスライダーコンテンツ個人的なまとめです。サイトに絞っています。Oxford個人的なまとめです。スライドで画像やコンテンツを実装しているサイトのデザインサンプルです。jQuery等を使用しているサイトに絞っています。インスピレーション用のサンプル集です。サンプルを見ることで、使い勝手良し悪しの判断も出来るのではないかと思います。ブラウザはChromeのみでしか確認していません。hm-andrei.roデザイナーさんのポートフォリオ。手やフルーツは固定されています。hm-andrei.rojguiss画像は縦にスライドし、同時にテキストコンテンツが横スライドします。Lovelyコンテンツがダイナミックに縦スライドします。背景を変えるとなんか新鮮ですね。ロゴとサイドバーは固定。Studio縦スライドコンテンツですが、時間差にする事で視差が出来る・・上手く説明出来ないのでぜひご覧下さい。Jarnheimerこちらもダイナミックコンテンツスライダー。右下のイラストと気球は固定され、移動の際に噴出しが出る仕組み。JarnheimerAppear物凄く見にくいし使いにくいんですが、これでFlashではない事に感動。ドラッグで横スライドさせます。マウスオーバー時やコンテンツ表示時のエフェクトも秀逸です。No2横長のサイトです。分かるようにキャプチャにスクロールバー入れてあります。横にダイナミックにスライドします。No2carrotcreativeやたらスライド使ってます。画像のスライドだけでなく、ページ移動やサービスページにも、斜めスライドするコンテンツ。2010面白いレイアウトですね。上部メニューと微妙な位置にあるサイドバーが固定されていてコンテンツが横スライド。Studios大きめなカルーセル。フィルターもかけられます。WINESがスライドコンテンツです。存在感あるワインボトルが丸ごと横スライドしますよ。VineyardsPremiereかなり実用的かなと思います。良く見るスライドですが、マウスオーバーだけでスライドしてくれます。PremiereMetaLab縦スライドと横スライドです。見やすいサイトなのでこういったスライドの使い勝手の良し悪しも判断しやすいと思います。MetaLabETONDIGITALこちらも一般的なスライダー。紙の質感を合わせてあります。Labsモバイルのモニター内に納められたスライダーです。ユーザーもイメージしやすくなりそうですね。Meteor素敵なアイデアでスライダー使ってます。コンテンツごと縦にスライド、子ページ移動もスライドします。ページ内にも横スライド。ページ移動が無く、ストレス少ない。Meteorwww.MelissaHie.comページごと縦横斜めにスライドします。酔うwwww.MelissaHie.comKobe時間差でコンテンツとサイドの透過部分が縦スライドします。KobeNOFRKS.designこれもページごとスライド。上にスライドすると空のイラストになります。アクセスする時間で背景も変わります。Reefこちらもイラストを生かした遊び心あるスライド。’11これもダイナミックスライド。写真が切り替わるの面白いですね。Pigeonetteこちらもページごと移動します。Hiringページの移動と下部のカルーセルにスライドが使われています。いった手書き風のサイトは相性いいかも。Jesus縦にページごとスライドします。メニューとフッターは固定。JesusWallSwapsこれもページ移動がスライドになっています。動きがちょっと面白い。Oxfordホテルのサイトです。ページ移動は一切せずに完結できる。コンテンツ数が少ないサイトなら有りですね。Oxford以上、まとめでした。どれも素敵では有りますが、自己満足にならない事が大事ですね。JSをオフにされるケースや、ページ数が多いと、かえってストレスになる、使い勝手が悪くなる可能性も高いです。インパクトは与えられそうですが、使い方に気をつけたいところですね。bookreader.jsという横スライド用のjsを日本の方が出してくれてますので興味のある方はチェックしてみてはいかがでしょう。Designという記事で55個紹介されてますのであわせてご覧になっては如何でしょうか。メニューのまとめです。色々なメニューをまとめました。時に探すのが面倒なので備忘録的に。事にようやく気が付きました・・cssやプログラミング著作権放棄のレスポンシブWebデザイン対応CSSフレームワーク・ingridシンプルで良さそうだったのでメモ。ResourceAdsタイトルとURLをコピーしました。