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