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

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

デモページのキャプチャ

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

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

デモページのキャプチャ

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

デモページのキャプチャ
ツールチップナビゲーション
マウスオーバーで補足情報を表示。

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

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

sponsors

top of page

©2018 coliss