elevatorScroll

---

---

• デモページ

• 導入実績サイト(LEVELS DENTAL TEAM)

• お問い合わせ

---

elevatorScrollはシンプル且つデザイン性の高いWEBサイトを作成できるプラグインです。

左右に2分割で表示し、左右非対称にスクロールするアニメーションは、 よりスタイリッシュな見た目を実現できます。

左右のセクションは高さに制限なく、デバイスの画面サイズを超えても違和感なく表示できたり、 フルスクリーンで見せたいセクションにも対応できたりなど、 より柔軟に自身の想像を可能にできます。

---

• 導入方法

• HTML構造

• elevatorScroll初期設定

• オプション

導入方法

Install

elevatorScrollのファイルをインストールして使用する場合、 elevator_scroll.js, elevator_scroll.css の2つのファイルをインストールした後、 以下のように読み込みします。

<link rel="stylesheet" type="text/css" href="elevator_scroll.css">
<script type="text/javascript" src="elevator_scroll.js"></script>

CDN

CDNを使用してファイルのロードを行う場合 以下のように読み込みします。

<link rel="stylesheet" href="https://elevator-scroll.next-code.jp/elevator_scroll.css">
<script src="https://elevator-scroll.next-code.jp/elevator_scroll.js"></script>

HTML構造

elevatorScrollには独自のクラスがあり、 es-left, es-rightは画面を左右に分けるクラスで その子要素にes-sectionというクラスを付与します。 es-sectionの中にhtmlを記述していく事で左右にその中身が表示されていきます。

以下はサンプルコード

<div id="elevator_scroll">
	<div class="es-left">
		<div class="es-section"><p>セクション1_left</p></div>
		<div class="es-section"><p>セクション2_left</p></div>
		<div class="es-section"><p>セクション3_left</p></div>
	</div>
	<div class="es-right">
		<div class="es-section"><p>セクション1_right</p></div>
		<div class="es-section"><p>セクション2_right</p></div>
		<div class="es-section"><p>セクション3_right</p></div>
	</div>
</div>

elevatorScroll初期設定

初期設定は必須でありscriptタグ内に記述していきます

以下はサンプルコード

<script>
	var obj = new elevator_scroll('#elevator_scroll', {
	sectionsName: ['section1', 'section2', 'section3']
});
</script>

インスタンスを生成、elevatorScrollの要素を引数に渡し、 sectionsNameにセクション数と同じ数のセクション名を設定します。

オプション

各種オプションの設定方法

sectionsColor

各セクションごとに背景色を設定

var obj = new elevator_scroll('#elevator_scroll', {
	sectionsColor: ['#ffdd79', '#ffffff', '#f2f2f2']
});

menu

ヘッダーナビゲーションにリンク機能追加

html

<header>
	<ul id="nav">
		<li><a href="#section1">セクション1</a></li>
		<li><a href="#section2">セクション2</a></li>
		<li><a href="#section3">セクション3</a></li>
	</ul>
</header>

javascript

var obj = new elevator_scroll('#elevator_scroll', {
	menu:'#nav'
});

activeMenu

現在のセクション位置のナビゲーションliタグにactiveクラスを付与

var obj = new elevator_scroll('#elevator_scroll', {
	sectionsName: ['about', 'service1', 'service2', 'contact'],
	activeMenu: ['about', ['service1', 'service2'], 'contact',]
});

animateSpeed

スクロールアニメーションの速度を設定

速度(単位)

animateSpeed: (設定値) * 1000ミリ秒

var obj = new elevator_scroll('#elevator_scroll', {
	animateSpeed: 2
});

(デフォルト値:1)

wheelDelta

スクロールに必要なマウスホイールの回転量を設定

var obj = new elevator_scroll('#elevator_scroll', {
	wheelDelta: 200
});

(デフォルト値:100)

touchMove

スクロールに必要なスマートフォンのスワイプ量を設定

var obj = new elevator_scroll('#elevator_scroll', {
	touchMove: 200
});

(デフォルト値:100)

onPageChange

スクロール時に行いたい処理を設定

var obj = new elevator_scroll('#elevator_scroll', {
	onPageChange: function () {
	//	ここに行いたい処理を記述
	}
});

スライダーを使用した場合などにスワイプした内容が

スクロール時に右画面だけ反映されない現象を解消する際に使用したりします。

fullscreen.html にて使用しているのでご参考ください。

---

こちらを利用したホームページ作成は https://next-code.jp/contact からお問い合わせ下さい。