[JS]ページの打ち出しエリアの画像とテキストを大胆に変更するチュートリアル
ページの打ち出しエリアを使用して、画像とテキストを切り替えるダイナミックなスライドショーを実装するチュートリアルをMarcofolioから紹介します。
Advanced jQuery background image slideshow
デモページ
このスクリプトの開発にあたっては、下記のサイトにインスパイアされたそうです。
ページの打ち出しエリアを使用して、ダイナミックにスライドショーが展開しています。
実装のイメージ
ポイントとなるのは、テキストを含めた背景画像のスライドショーです。
透過PNGを使用して、HTML+CSS+jQueryで同様のコンテンツを実装します。
実装のイメージ
実装とダウンロード
HTMLは各スライドはdiv要素で実装されているので、コンテンツに合わせてさまざまな要素に変更することが簡単です。
スクリプトのベースにはjQueryが使用されており、オプションではスライドショーのスピードが調整できます。
コードはサイトにも記載されていますが、一括でダウンロードすることもできます。
Post on:2010年4月12日
Comments
freewebdev.jp
on 2010年4月12日
ページの打ち出しエリアの画像とテキストをダイナミックに変更するJSチュートリアル
「Advanced jQuery background image slideshow 」
ページの打ち出しエリアを使用して、画像とテキストを切り替えるダイナミックなスライドショーを実装するチュートリアルをMarcofolioから紹介します…