[JS]ズーム機能もあるカルーセルのスクリプト -Moving Boxes

画像やテキストを含む複数のパネルを、スムーズにスライド表示するカルーセルスクリプトをCSS TRICKSから紹介します。

デモのキャプチャ

Moving Boxes
demo

デモでは、左右の端にあるアローでパネルがスムーズにスライドし、センターにスライドするパネルがズームします。

各パネルはdiv要素で、画像や見出し・テキストなどを自由に配置することができます。

スクリプトのオフ時には、各パネルが順に表示されます。

スクリプト オフ時の表示のキャプチャ

スクリプト オフ時の表示

Moving BoxesはjQueryのプラグインのため、動作にはjquery.jsが必要です。

sponsors

top of page

©2024 coliss