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

サイト構築 -JavaScript

Post on:2015年3月26日

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>