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