ノボリランチ（Nobori launch : ver. 20210331）

複数の画像をスクロールさせて、ユーザーのスワイプ（ドラッグ）に対応したHTMLソースセットです。このセットはHTMLとCSS、JavaScriptによって構成されています。JavaScriptがES6（ECMAScript2015）で記述してあるため、IE（Internet Explorer）には対応しておりません。現在、比較的新しいOS上の主要ブラウザーでは問題なく動作しているようです。動作確認OSは、macOS 10.15、Windows10 Home 64bit (19042.906)、iOS 14、iPadOS 14、Android 9、でした。主要ブラウザは、Safari、Google Chrom、Firefox、Microsoft Edge、Opera、の最新版でした。

HTMLとCSSのコードは本ページの'huslemouse_BEGIN'から'huslemouse_END'の範囲を元に作成ください。Javascript ('hustleNoboriClass.js'）はこちらです。

JavaScriptソース'hustleNoboriClass.js'内の設定項目について

ソースの冒頭部分に下のように指定項目があります。本HTML内に水平と垂直スクロールの変更項目もありますので参考にしていただけると良いでしょう。基本的な構成を守って、ノボリ枠内で画像を小さく表示する設定にすると、余白に他の要素を配置することもできます。指定項目には余分なものがあると思われるかもしれませんが、将来、水平垂直自由にスワイプさせるための布石とご了承ください。

//コンテンツモードの指定
this.SCROLL_MODE = 'H';//'H'は水平、'V'は垂直にスクロールする。
this.SWIPE_ON = true;//'true'でスワイプ可能モードをオン、'false'でオフになる。
//基準となるコンテンツサイズの指定
this.trgBoxDWH = ['100%', 'auto'];//コンテンツ表示枠の値（幅高さ）がCSSよりも優先的に強制設定される。['100%', 'auto']と指定して親要素でサイズコントロールすることを推奨する。
this.minWH = [640, 0];//コンテンツ表示枠の最小サイズ（幅高さ）がCSSよりも優先的に強制設定される。基本的に'mini-width'だけを利用する。
this.itmDWH = [300, 200];//各ノボリ枠の基準サイズ'px'の値（幅高さ）を指定する。
this.itemStepDWH = [300, 200];//各ノボリ枠の基準表示ステップ'px'の値（幅高さ）を指定する。
this.imgDWH = [300, 200];//各ノボリ枠内の画像の基準サイズ'px'の値（幅高さ）を指定する。
this.appearItmsCR = [5, 0];//コンテンツ表示枠内でのノボリ枠表示数でスクロール方向に整数（列行）を指定する。
//スクロールの指定（本バージョンではX方向水平方向のみ実現）
this.movDStepWH = [2, 0];//移動する基準ピクセル数でスクロール方向に'px'の値（幅高さ）を指定する。
this.movDirHV = [-1, 0];//移動の方向指定でスクロール方向に数値を指定（水平垂直）する。'1'であれば正方向へ、'-1'であれば負方向へスクロール、'0'は停止する。
//本コンテンツ特有の描画処理を呼び出す間隔（1ms = 1/1000秒）
this.DILAY = 40;//整数'40'であれば'40/1000秒'で25fps（フレームパーセコンド）になる。

コンテンツモードの指定
プロパティ	値	備考
SCROLL_MODE	'H'か'V'の文字	'H'は水平、'V'は垂直にスクロールする。
SWIPE_ON	真偽値	'true'でスワイプ可能モードをオン、'false'でオフになる。

基準となるコンテンツサイズの指定
プロパティ	値（配列）	備考
trgBoxDWH	[width, height]の二値	コンテンツ表示枠の値（幅高さ）がCSSよりも優先的に強制設定される。['100%', 'auto']と指定して親要素でサイズコントロールすることを推奨する。
minWH	[mini-width, mini-height]の二値	コンテンツ表示枠の最小サイズ（幅高さ）がCSSよりも優先的に強制設定される。基本的に'mini-width'だけを利用する。
itmDWH	[width, height]の二値	各ノボリ枠の基準サイズ'px'の値（幅高さ）を指定する。
itemStepDWH	[width, height]の二値	各ノボリ枠の基準表示ステップ'px'の値（幅高さ）を指定する。
imgDWH	[width, height]の二値	各ノボリ枠内の画像の基準サイズ'px'の値（幅高さ）を指定する。
appearItmsCR	[column, row]の二値	コンテンツ表示枠内でのノボリ枠表示数でスクロール方向に整数（列行）を指定する。

スクロールの指定（本バージョンではX方向水平方向のみ実現）
プロパティ	値（配列）	備考
movDStepWH	[width, height]の二値	移動する基準ピクセル数でスクロール方向に'px'の値（幅高さ）を指定する。
movDirHV	[水平値, 垂直値]の二値	移動の方向指定でスクロール方向に数値を指定（水平垂直）する。'1'であれば正方向へ、'-1'であれば負方向へスクロール、'0'は停止する。

本コンテンツ特有の描画処理を呼び出す間隔（1ms = 1/1000秒）
プロパティ	値	備考
DILAY	整数	整数'40'であれば'40/1000秒'で25fps（フレームパーセコンド）になる。

Intractive Media Studio 'hustlemouse'

複数画像（リンク付き）を縦横にスクロール＆スワイプさせんべ。

ノボリランチ（Nobori launch : ver. 20210331）