flashを使わないスライドのサイト作ってみました
公開日:
:
コーディング・ツール系, デザイン系 flashの代わりのスライド, jsでスライド, コーディング, サンプル
今更感もありますが、HTML5の初歩とJSでメインイメージのスライドを作ってみたくてサイトを試作しました。
架空のちょっとお高めなイタリアレストランを想定。
メニューに海外で流行ってたリボンを取り入れて、暖色の深い赤で高級感と食べ物にあった色あいに。
メイン画像の隣にでるボタンを押すと画像がスライドします。設定しだいでは自動スクロールも可能。
技術的にはスライドさせるボタンの位置をIE6で微調整できなかった。
間にタグを挟むと動作しなくなった。ie6はいいかな~と放置。
html5は、古いブラウザでもタグを読み込むスクリプト(Easy HTML5 Template)と付属のリセットCSSのためか、画像の下に余白がでました。とりあえずline-heightで調整しました。
使用したスクリプト
[JS]シンプル!高性能!超軽量!使い勝手の良いコンテンツスライダーのスクリプト -jContent
PR
関連記事
-
-
なんか楽しい人物イラスト、カシスカラーの街、黄金町のアートサロンちっくなお店~WEBサイトのぶくま#49~
この人のイラスト好きなんです!なんて名前なんだろう。 カシスカラーの街のイラストがいい!
-
-
【1週間分おまとめ】WEBデザインの人気記事#20~フラットまとめ、リラックスできるネイチャーなサイトに素材やチュートリアル~
『今年流行りのフラットなデザイン制作に役立つCSSフレームワークやPSD素材まとめ8つ』 フラット!
-
-
【1週間分おまとめ】WEBサイトのぶくま#38~美しい水面の波紋のサイト、ここまでできるリボンのアート作品~
キャッチなど、目を引く力があるな~ 波紋が美しい。。是非サイトを御覧ください。必見! キレ
-
-
配色センスとパララックス効果(視差効果)
CSSだけで実装されることもあるパララックス効果。 下記のサイトはflashで作られてますが、 その
-
-
最近見た中でほんとのお気に入りサイト3つ
ここ最近で、特に素晴らしいなと思ったサイトを紹介しますね。 技術ではなく、コンテンツ主体な傾向はあり
-
-
なごむ旅のキャラ・良い感じの落書き+コラージュデザイン・水彩で爽やかに・おしゃれな写真の海外サイト~WEBサイトのぶくま#55~
優しい雰囲気。言葉にアイデアのある企画 みかんのサイト。オレンジは元気になりし、色の量も良い感
-
-
【1週間分おまとめ】WEBサイトのぶくま#35~女の子向け、目を引く色彩、ルービックキューブに砂嵐~
柔らかなトーン イラストが良い感じ。こちらも女性向けかな。 ルービックキューブのようにごろ
-
-
2014の年賀状をウマく描く。【資料まとめ】
そろそろ年賀状の準備をし始める方も多いのではないでしょうか。 そこで、趣味も兼ねてオリジナルのもの
-
-
ストッキングブランドでWEBサイトでの商品の見せ方を知る
http://www.relish-style.net/ 今回は、女性向け商品サイトを一つの
-
-
夏向けのスッキリクールなアイデアサイト
丸の内SUPERCOOLBIZ 丸の内の皆さんが夏をどう涼しく過ごすか!とアイデアをだしている
PR
- PREV
- 自分好みのAKBメンバーが作れるサイト
- NEXT
- 自分のあが歌うサイト