画像(サムネイル)を円形に奥行きがあるように並べて配置して、
ナビゲーションボタンの操作によって回転しながら
立体的にスライドショーを表示することが出来るjQueryチュートリアル
「Making a Slick MobileApp Website with jQuery & CSS」のご紹介。

Making a Slick MobileApp Website with jQuery & CSS


Making a Slick MobileApp Website with jQuery & CSS | Tutorialzine


デモはこちら:Making a Slick MobileApp Website | Tutorialzine demo

デモ画面では左右の矢印ボタンをクリックすることによって
スライドショー部分であるスマートフォンの画像が回転しながら表示されます。
動きがとても滑らかで気持ちがいいくらい。

スライドショー部分のHTMLソースは
至ってシンプルな形で構成されています。

◆HTML
<div id="phoneCarousel">
	<div class="previous arrow"></div>
	<div class="next arrow"></div>

	<div id="stage">
		<img id="iphone" class="default" src="img/phones/iphone.png" width="270" height="400" alt="iPhone" />
		<img id="nexus" src="img/phones/nexus_one.png" width="270" height="400" alt="Nexus One" />
		<img id="nokia" src="img/phones/nokia.png" width="270" height="400" alt="Nokia" />
		<img id="blackberry" src="img/phones/blackberry.png" width="270" height="400" alt="BlackBerry" />
	</div>
</div>

このHTMLを、CSSとスクリプトで操作して、
位置や角度の指定を切り替えて動かしているもよう。
(ソースは割愛。上記リンク先チュートリアルページから確認できます。)

サイトのトップページなどキ―ビジュアル部分で使うことで
カッコよく演出することが出来そうなスライドショーです。

ご参考までに。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (2)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

滑らかな動きの回転型jQueryスライドショー「Making a Slick MobileApp Website with jQuery & CSS」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner