[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js
Post on:2015年3月16日
sponsorsr
マークアップは非常にシンプル、スクリプトの設置も簡単、スマホでもタブレットでもデスクトップでもすいすい快適に操作できる水平スクロールコンテンツを実装できるjQueryのプラグインを紹介します。
jquery.horizonScroll.js -GitHub
horizonScroll.jsのデモ
デモはスマホでもタブレットでもデスクトップでもOKです。
操作は左右のアイコン、デスクトップのドラッグ、スマホなどはスワイプに対応しています。
水平スクロールは、コンテンツを横にさっとスライドさせる感じです。
スワイプやドラッグの操作に非常にあってます。
デモのアニメーション
horizonScroll.jsの使い方
Step 1: 外部ファイル
当スクリプトとjquery.jsを外部ファイルとして記述します。
[html]
...
[/html]
スマホなどタッチデバイス対応にする場合は、touchSwipe.jsも加えます。
[html]
...
[/html]
Step 2: HTML
横スクロールで表示させる各コンテンツはsection要素で実装します。
[html]
[/html]
Step 3: JavaScript
横スクロールで表示させるコンテンツをjQueryのセレクタで指定し、スクリプトを実行します。
[javascript]
[/javascript]
スワイプ操作を含めないようにするには、下記のように指定します。
[javascript]
[/javascript]
スクリプトのオプションでは、スクロールのタイミングなどを調整できます。
[javascript]
$.fn.horizon.defaults = {
scrollTimeout: null,
scrollEndDelay: 250,
scrollDuration: 400,
i: 0,
limit: 0,
docWidth: 0,
sections: null,
swipe: true,
fnCallback: function (i) {}
};
[/javascript]
sponsors
