Sly の使い方 – スクロールとナビゲーションをJavaScriptで実装

Bookmark this on Google Bookmarks
LINEで送る
Pocket

アイテムベースのスクロールとナビゲーションを実装できる Slyの使い方
Sly http://darsa.in/sly/

HTMLの構造はこうなっている
FRAME、SLIDEE、CONTENT ITEMSの関係を理解する
sly

横スクロールのサンプルページ
http://darsa.in/sly/examples/horizontal.html

このサンプルページのソースを見てみる。
読み込まれているファイルの中で自分で試してみるのに必要なのは、
jquery.js
plugins.js
sly.min.js
horizontal.js
horizontal.css

上3つはSLYを使うための基本的なファイル、
このサンプルでは、オプションの設定を horizontal.js、見た目の設定を horizontal.css で行っている

この中からフレームに1つのアイテムが表示されるサンプル’One item per frame’を以下に抜粋
(上記ファイルはfiles以下に入れている)

<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Horizontal examples - Sly</title>
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="files/horizontal.css">
</head>
<body>
	<div >
		<div class="wrap" style="width:970px; margin: 0 auto;">
			<h2>One item per frame</h2>

			<div class="scrollbar">
				<div style="transform: translateZ(0px) translateX(0px); width: 71px;" class="handle">
					<div class="mousearea"></div>
				</div>
			</div>

			<div style="overflow: hidden;" class="frame oneperframe" id="oneperframe">
				<ul style="transform: translateZ(0px); width: 18256px;" class="clearfix">
					<li class="active"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li>
					<li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li class="">15</li>
				</ul>
			</div>

			<div class="controls center">
				<button disabled="disabled" class="btn prev disabled"><i class="icon-chevron-left"></i> prev</button>
				<button class="btn next">next <i class="icon-chevron-right"></i></button>
			</div>
		</div>
	</div>

	<!-- Scripts -->
	<script src="files/jquery.js"></script>
	<script src="files/plugins.js"></script>
	<script src="files/sly.min.js"></script>
	<script src="files/horizontal.js"></script>
</body></html>

horizontal.js 抜粋
FLAMEとして使うオブジェクトの指定やオプションの設定を行っている。
オプション一覧はこちら
https://github.com/Darsain/sly/wiki/Options

// -------------------------------------------------------------
//   One Item Per Frame
// -------------------------------------------------------------
(function () {
	var $frame = $('#oneperframe');
	var $wrap  = $frame.parent();

	// Call Sly on frame
	$frame.sly({
		horizontal: 1,
		itemNav: 'forceCentered',
		smart: 1,
		activateMiddle: 1,
		mouseDragging: 1,
		touchDragging: 1,
		releaseSwing: 1,
		startAt: 0,
		scrollBar: $wrap.find('.scrollbar'),
		scrollBy: 1,
		speed: 300,
		elasticBounds: 1,
		easing: 'easeOutExpo',
		dragHandle: 1,
		dynamicHandle: 1,
		clickBar: 1,

		// Buttons
		prev: $wrap.find('.prev'),
		next: $wrap.find('.next')
	});
}());

horizontal.css 抜粋

/* One Item Per Frame example*/
.oneperframe { height: 300px; line-height: 300px; }
.oneperframe ul li { width: 1140px; }
.oneperframe ul li.active { background: #333; }

スクロールバーやボタンの見た目もこのCSSで設定しているので、見た目を変えたい時は変更する

参照
Slyオブジェクトのプロパティメソッドイベント(コールバックを登録できる)

—– 追記 ——
Slyを利用しているサイトやアプリ

Gozaaru」 みんなで戦国武将の足跡を地図上に記録するプロジェクト
Gozaaruで地図横(スマホでは地図下)に表示しているマッピング情報をスクロールさせるのに使っています。

西暦和暦変換」 西暦と旧暦の対照表
日付の選択にSlyを使っています。日付を縦にスクロールさせています。
このサイトは上記Gozaaruサイトの内部で使っている西暦と旧暦の変換機能を切り出して作成したサイトです。

MNPomodoro」 ポモドーロテクニック用のタイマー
こちらはiOSアプリです。中身はWebビューを使っていてHTML,CSS,JSでできています。タイマー、設定の各ページを縦にスライドさせるのに使っています。