[JS]複数のコンテンツをクロスにスライドして自動表示するスクリプト

CSS TRICKSのエントリーから、複数の打ち出し用の画像やテキストをそれぞれクロスのアニメーションでスライドさせ、次々に自動表示するスクリプトを紹介します。

Start/Stop Slider
demo

スライドするエリアはdivで囲まれており、左のテキストエリアは水平方向、右の画像エリアは垂直方向にスライドします。

スクリプトのオフ時には一番上に配置したもののみが表示され、スタイルシートのオフ時にはdivの順番通りに表示されます。

スタイルシートのオフ時

Start/Stop SliderはjQueryのプラグインのため、動作にはjquery.jsが必要です。