[JS]ページの打ち出しエリアの画像とテキストを大胆に変更するチュートリアル

Post on:2010年4月12日

sponsors

ページの打ち出しエリアを使用して、画像とテキストを切り替えるダイナミックなスライドショーを実装するチュートリアルをMarcofolioから紹介します。

このスクリプトの開発にあたっては、下記のサイトにインスパイアされたそうです。

ページの打ち出しエリアを使用して、ダイナミックにスライドショーが展開しています。

実装のイメージ

ポイントとなるのは、テキストを含めた背景画像のスライドショーです。
透過PNGを使用して、HTML+CSS+jQueryで同様のコンテンツを実装します。

実装のイメージ

HTMLは各スライドはdiv要素で実装されているので、コンテンツに合わせてさまざまな要素に変更することが簡単です。

スクリプトのベースにはjQueryが使用されており、オプションではスライドショーのスピードが調整できます。

コードはサイトにも記載されていますが、一括でダウンロードすることもできます。