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

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

デモのキャプチャ

Advanced jQuery background image slideshow
デモページ

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

サイトのキャプチャ

Philadelphia

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

実装のイメージ

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

サイトのキャプチャ

実装のイメージ

実装とダウンロード

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

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

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

sponsors

top of page

©2018 coliss