[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js

Post on:2015年3月16日

マークアップは非常にシンプル、スクリプトの設置も簡単、スマホでもタブレットでもデスクトップでもすいすい快適に操作できる水平スクロールコンテンツを実装できるjQueryのプラグインを紹介します。

サイトのキャプチャ

jquery.horizonScroll.js -GitHub

horizonScroll.jsのデモ

デモはスマホでもタブレットでもデスクトップでもOKです。

デモのキャプチャ

デモページ

操作は左右のアイコン、デスクトップのドラッグ、スマホなどはスワイプに対応しています。

水平スクロールは、コンテンツを横にさっとスライドさせる感じです。
スワイプやドラッグの操作に非常にあってます。

デモのアニメーション

デモのアニメーション

horizonScroll.jsの使い方

Step 1: 外部ファイル

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

<head>
  ...
  <script type="text/javascript" src="jquery-1.10.2.js"></script>
  <script type="text/javascript" src="jquery.horizonScroll.js"></script>
</head>

スマホなどタッチデバイス対応にする場合は、touchSwipe.jsも加えます。

<head>
  ...
  <script type="text/javascript" src="jquery-1.10.2.js"></script>
  <script type="text/javascript" src="jquery.touchSwipe.js"></script>
  <script type="text/javascript" src="jquery.horizonScroll.js"></script>
</head>

Step 2: HTML

横スクロールで表示させる各コンテンツはsection要素で実装します。

<section data-role="section" id="section-section1"></section>
<section data-role="section" id="section-section2"></section>
<section data-role="section" id="section-section3"></section>
<section data-role="section" id="section-section4"></section>

Step 3: JavaScript

横スクロールで表示させるコンテンツをjQueryのセレクタで指定し、スクリプトを実行します。

<script type="text/javascript">
  $('section').horizon();
</script>

スワイプ操作を含めないようにするには、下記のように指定します。

<script type="text/javascript">
  $('section').horizon({swipe: false});
</script>

スクリプトのオプションでは、スクロールのタイミングなどを調整できます。

$.fn.horizon.defaults = {
    scrollTimeout: null,
    scrollEndDelay: 250,
    scrollDuration: 400,
    i: 0,
    limit: 0,
    docWidth: 0,
    sections: null,
    swipe: true,
    fnCallback: function (i) {}
};

sponsors

top of page

©2024 coliss