[JS]スライダーなどのさまざまなUIエレメントのスクロール操作をスマホ対応・無限スクロール対応にするスクリプト -eco Scroll
Post on:2015年3月26日
sponsorsr
コンテンツスライダー、画像ギャラリー、カルーセル、ウォールなど、スクロールするさまざまなUIエレメントを無限スクロール対応にするjQueryのプラグインを紹介します。
スクロール操作はデスクトップのドラッグやスマホのスワイプやフリックにも対応しており、非常に快適に動作します。
eco Scrollのデモ
デモではWebページやアプリで見かけるさまざまなスクロールするUIエレメントを無限スクロール対応にしています。
操作はデスクトップのドラッグ、スマホのスワイプやフリックでもOKです。
デモページ：ウォール
ウォール状に配置された画像を水平・垂直・斜めに無限スクロールできます。
デモページ：スライダー
スクロールすると区切りごとに自動停止する優れ物。
デモページ：カルーセル
Bootstrapのカルーセルをタッチ・ドラッグ対応にします。
デモページ：ウォール
一つ目のデモとは異なり、スクロールに惰性がついています。
デモページ：フリックスクロール
画面に触れ、さっと弾くだけでもコンテンツがスクロールします。
デモページ：YouTubeウォール
動画コンテンツでもウォール状に配置し、無限スクロールさせることができます。
eco Scrollの使い方
スクリプトの仕組みは、コンテンツを配置した巨大なレイヤーをクリップして一部だけ表示させ、上下左右斜めにスクロールさせています。
横一列だけ、縦一列だけ、というのも可能です。
スクリプトの仕組み
Step 1: 外部ファイル
当スクリプトをjquery.jsを外部ファイルとして記述します。
[html]
...
コンテンツ
...
[/html]
Step 2: HTML
無限スクロールさせるコンテンツをラッパーで囲みます。
[html]
[/html]
Step 3: JavaScript
jQueryのセレクタでラッパーを指定し、オプションを定義し、スクリプトを実行します。
[javascript]
[/javascript]
sponsors
