コンテンツスライダーとツールチップナビゲーションを実装するチュートリアル

ウェブサイトのトップページなどにぴったりなコンテンツスライダーやツールチップナビゲーションなどを実装したページを作成するチュートリアルをAcrisDesignから紹介します。

デモページのキャプチャ

Create Portfolio Website With CSS/jQuery
デモページ

チュートリアルのポイントはダイナミックなアニメーションでスライドするコンテンツスライダーと補足情報がツールチップ表示されるナビゲーションです。

デモページのキャプチャ

コンテンツスライダー
スライドは自動と手動の両方に対応。

デモページのキャプチャ

ツールチップナビゲーション
マウスオーバーで補足情報を表示。

スクリプトのベースにはjQueryが使用されており、プラグインはそれぞれ下記のものが使用されています。

チュートリアルではそれらのHTML/CSS/JavaScriptだけでなく、ヘッダやフッタなどの実装方法も含め、ページ全体の作成方法が解説されています。

top of page

Trackback

leave your Comments

※承認制のため、即時には反映されません。
※匿名、通りすがりさんなどへの回答は控えさせていただきます。

Comments

10時のヘッドライン | CROSS SBM

on 2010年3月19日

[...] [...]

top of page

©2011 coliss