[JS]スライダーなどのさまざまなUIエレメントのスクロール操作をスマホ対応・無限スクロール対応にするスクリプト -eco Scroll

コンテンツスライダー、画像ギャラリー、カルーセル、ウォールなど、スクロールするさまざまなUIエレメントを無限スクロール対応にするjQueryのプラグインを紹介します。

スクロール操作はデスクトップのドラッグやスマホのスワイプやフリックにも対応しており、非常に快適に動作します。

サイトのキャプチャ

eco Scroll
eco Scroll -GitHub

eco Scrollのデモ

デモではWebページやアプリで見かけるさまざまなスクロールするUIエレメントを無限スクロール対応にしています。
操作はデスクトップのドラッグ、スマホのスワイプやフリックでもOKです。

デモのキャプチャ

デモページ:ウォール

ウォール状に配置された画像を水平・垂直・斜めに無限スクロールできます。

デモのキャプチャ

デモページ:スライダー

スクロールすると区切りごとに自動停止する優れ物。

デモのキャプチャ

デモページ:カルーセル

Bootstrapのカルーセルをタッチ・ドラッグ対応にします。

デモのキャプチャ

デモページ:ウォール

一つ目のデモとは異なり、スクロールに惰性がついています。

デモのキャプチャ

デモページ:フリックスクロール

画面に触れ、さっと弾くだけでもコンテンツがスクロールします。

デモのキャプチャ

デモページ:YouTubeウォール

動画コンテンツでもウォール状に配置し、無限スクロールさせることができます。

eco Scrollの使い方

スクリプトの仕組みは、コンテンツを配置した巨大なレイヤーをクリップして一部だけ表示させ、上下左右斜めにスクロールさせています。
横一列だけ、縦一列だけ、というのも可能です。

サイトのキャプチャ

スクリプトの仕組み

Step 1: 外部ファイル

当スクリプトをjquery.jsを外部ファイルとして記述します。

<body>
  ...
  コンテンツ
  ...
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <script src="../js/jquery.eco-scroll.js"></script>   
</body>

Step 2: HTML

無限スクロールさせるコンテンツをラッパーで囲みます。

<div id="divContainer">
  <div class="wrapper">                                
  </div>        
</div> 

Step 3: JavaScript

jQueryのセレクタでラッパーを指定し、オプションを定義し、スクリプトを実行します。

<script>            
  $(function(){               
    $("#divContainer").ecoScroll({
      itemWidth: 400,
      itemHeight: 400,
       rangeX : [-10,10],
      rangeY : [-10,10],
      axis : "x",
      snap : true
  });
});
</script>

top of page

©2017 coliss