[JS]画像やコンテンツを水平・垂直に気持ちよくスクロールさせて表示することにこだわったスクリプト -Sly

水平・垂直に配置した画像やコンテンツを気持ちよくスクロールさせることと次に表示するアイテムのロジックにこだわったjQueryのプラグインを紹介します。
IE6にも対応してるのがびっくりです!

デモのキャプチャ

Sly -GitHub

Slyの仕組みは、表示される「FRAME」部分とコンテンツを配置する「SLIDEE」部分の二つから構成されています。

サイトのキャプチャ

特徴は気持ちのいいスクロールだけでなく、ナビゲーションのロジックも直観的で、次に表示するべきアイテムを自動的に先頭に配置します。クリックでアクティブにしたアイテムも常に保持します。

操作は上部のバー、FRAME上でホイール、パネルのクリック、下部のナビゲーションがあり、また下部のボタンでは前・次、最初・最後・中央などの操作もできます。
ナビゲーションでの操作は次に表示するアイテムを先頭に配置します。

デモでは、水平方向のスクロールだけでなく、垂直方向、無限スクロールもあります。

デモのキャプチャ

デモページ:水平

Slyのベーシックな水平方向のデモです。

デモのキャプチャ

デモページ:水平

レイアウトを施したコンテンツも配置できます。

デモのキャプチャ

デモページ:垂直

垂直方向ではスマフォのようなレイアウトになっています。

デモのキャプチャ

デモページ:無限

無限スクロールはFRAMEをスクロールし、コンテンツが終わりに近づくと次のコンテンツを読み込み、スクロールが続きます。

top of page

©2017 coliss