コンテンツスライダーとツールチップナビゲーションを実装するチュートリアル
Post on:2010年3月19日
ウェブサイトのトップページなどにぴったりなコンテンツスライダーやツールチップナビゲーションなどを実装したページを作成するチュートリアルをAcrisDesignから紹介します。
![デモページのキャプチャ](/wp-content/uploads-2010/2010031901.png)
Create Portfolio Website With CSS/jQuery
デモページ
チュートリアルのポイントはダイナミックなアニメーションでスライドするコンテンツスライダーと補足情報がツールチップ表示されるナビゲーションです。
![デモページのキャプチャ](/wp-content/uploads-2010/2010031901-01.png)
コンテンツスライダー
スライドは自動と手動の両方に対応。
![デモページのキャプチャ](/wp-content/uploads-2010/2010031901-02.png)
マウスオーバーで補足情報を表示。
スクリプトのベースにはjQueryが使用されており、プラグインはそれぞれ下記のものが使用されています。
- コンテンツスライダー
Automatic Image Slider - ツールチップナビゲーション
Create A Floating Navigation
チュートリアルではそれらのHTML/CSS/JavaScriptだけでなく、ヘッダやフッタなどの実装方法も含め、ページ全体の作成方法が解説されています。
sponsors