サイトのトップページやプロモーションページに最適な複数の画像をスムーズなアニメーションでスライド表示するスクリプトをSoh Tanakaから紹介します。
Automatic Image Slider w/ CSS & jQuery
デモページ
画像とコントローラーはdiv要素で実装されており、実装イメージは下記のようになります。
実装のイメージ
画像のスライドはコントローラーでの手動操作と自動操作に対応しています。
スクリプトのベースにはjQueryが使用されており、HTML/CSS/JavaScriptのコードも紹介されているのでカスタマイズも可能です。
Inspiration
上記のスクリプトのようなテクニックを使用したサイトのショーケースです。
フレームやコントローラーなどUIをサイトのテーマにあわせるといっそう洗練された印象を与えます。
Post on:2010年2月12日
