スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

実践トレーニング(GU) 6カルーセルパネル自動スライド&まとめ



6回に渡って作成してきましたGUのプロモーションサイト制作。

今回が最終回になります。

前回はタブを使用した商品紹介の部分を作成しました。

続いて、本家GUサイトにもありますが、

複数の画像を一行で表示して数秒間隔で自動スライドするカルーセルパネルの
作成です。

  →モデルが着用した時のイメージ画像をカルーセルパネルにて自動スライドさせます。
  →任意のタイミングでボタンを押すことで見たい画像まで移動する事を可能にします。

GUとまったく同じ形にしようとも考えましたが、左右のボタンと全体の大きさを若干小さめにしてみました。

パネルの作成方法は過去記事を参照
複数の画像が自動でスライドするカルーセルパネルの作成

カルーセルパネル内の画像をクリックした時にかっこよく拡大表示させたい為、

LightboxというJavaScriptを使用します。

作成方法は過去記事を参照
Javascriptで画像をかっこよく表示させる

カルーセルパネルから下部分は、GUのサイトを模写しました。

デザインや配置など吸収するには良いかなと思います。

一番下のフッターの直前にあるアイコンが複数並べて置いてありそれぞれのアイコンをクリックすると

そのサイトに飛ぶ箇所もそのまま再現しました。

ひとつの画像にアイコンを何個も入れる為、ひとつの画像に複数のリンクを貼らなければいけません。

複数リンクの貼り方は過去の記事参照
ひとつの画像に対し任意の箇所に複数のリンクを貼る

これで一通りのデザインは完成しました。

完成したサイトはこちらから
実践練習サイト GU


今後の制作勉強は、サイト模写もやりつつ、オリジナルデザインのWEBページも作成していこうかなと考えております。




トラックバック

コメント

コメントを残す

Secret


スポンサードリンク

最新記事

最新コメント

プロフィール

かっこいいデザイン、にぎやかなデザイン、きゅ~となデザイン、シンプルで洗練されたデザイン。
想像するだけで心がモワモワしてきます♪
いいデザインにいっぱい出会いますように★

好きな言葉は、旋律と色彩

ブログランキングに参加しています。こちらにも是非♪

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。