How to use

HTML JS 
							
	<div class="elevator_scroll">
		<div class="es-left">
			<div class="es-section">Section 1 left</div>
			<div class="es-section">Section 2 left</div>
			<div class="es-section">Section 3 left</div>
		</div>
		<div class="es-right">
			<div class="es-section">Section 1 right</div>
			<div class="es-section">Section 2 right</div>
			<div class="es-section">Section 3 right</div>
		</div>
	</div>
							
							
	var obj = new elevator_scroll('#elevator_scroll', {
		sectionsName: ['section1', 'section2', 'section3'],
		sectionsColor: ['#6e5aff', '#f8b500', '#53beb7'],
		menu: '#nav',
		activeMenu: ['section1', 'section2', 'section3'],
		animateSpeed: 2
		onPageChange: function () {
			console.log("elevatorScroll");
		}
	});

LOVE IT

Two-split
screen

左右で2分割したスクリーンは他とは違う新しいWebサイトの表現方法を実現できます。

Full screen

分割画面のみならず、画面フルサイズを使用することも可能です。その際スクロールアニメーションはセンターで綺麗に分割され期待通りの動きをしてくれます。

Slider

Sliderを使用した際のスクロールアニメーションも左右の画面でスライドの位置を共有することで綺麗に分割できます。

Responsive
support

画面幅が狭くなった際は左右に分割されたスクリーンを上下の分割に切り替える事でレスポンシブ対応を可能にできます。

SECTION

overflow

SECTION

overflow

セクションの内容が画面サイズ(高さ)に入りきらない場合でもセクション内でのスクロールにて表示することができます。

それぞれのセクションの高さを計算処理してくれるため、
画面サイズに収まらない場合はセクション内スクロールに切り替えて表示してくれます。

その場合、コンテンツの最初か最後にスクロールするまで前後セクションに移動するスクロールアニメーションは始まりません。

これによって高さの制限なく柔軟に制作を進める事が可能です。

elevator_scrollは思い通りのデザインを目指せるライブラリとして利用できるように
様々な可能性に対応できるように設計されています。

ダウンロードや詳細はGitHubにてご覧ください。

ELEVATOR SCROLL

elevator scroll.

How to use

HTML JS 
							
	<div class="elevator_scroll">
		<div class="es-left">
			<div class="es-section">Section 1 left</div>
			<div class="es-section">Section 2 left</div>
			<div class="es-section">Section 3 left</div>
		</div>
		<div class="es-right">
			<div class="es-section">Section 1 right</div>
			<div class="es-section">Section 2 right</div>
			<div class="es-section">Section 3 right</div>
		</div>
	</div>
							
							
	var obj = new elevator_scroll('#elevator_scroll', {
		sectionsName: ['section1', 'section2', 'section3'],
		sectionsColor: ['#6e5aff', '#f8b500', '#53beb7'],
		menu: '#nav',
		activeMenu: ['section1', 'section2', 'section3'],
		animateSpeed: 2
		onPageChange: function () {
			console.log("elevatorScroll");
		}
	});

LOVE IT

Two-split
screen

左右で2分割したスクリーンは他とは違う新しいWebサイトの表現方法を実現できます。

Full screen

分割画面のみならず、画面フルサイズを使用することも可能です。その際スクロールアニメーションはセンターで綺麗に分割され期待通りの動きをしてくれます。

Slider

Sliderを使用した際のスクロールアニメーションも左右の画面でスライドの位置を共有することで綺麗に分割できます。

Responsive
support

画面幅が狭くなった際は左右に分割されたスクリーンを上下の分割に切り替える事でレスポンシブ対応を可能にできます。

セクションの内容が画面サイズ(高さ)に入りきらない場合でもセクション内でのスクロールにて表示することができます。

それぞれのセクションの高さを計算処理してくれるため、
画面サイズに収まらない場合はセクション内スクロールに切り替えて表示してくれます。

その場合、コンテンツの最初か最後にスクロールするまで前後セクションに移動するスクロールアニメーションは始まりません。

これによって高さの制限なく柔軟に制作を進める事が可能です。

elevator_scrollは思い通りのデザインを目指せるライブラリとして利用できるように
様々な可能性に対応できるように設計されています。

ダウンロードや詳細はGitHubにてご覧ください。

SECTION

overflow

セクションの内容が画面サイズ(高さ)に入りきらない場合でもセクション内でのスクロールにて表示することができます。

それぞれのセクションの高さを計算処理してくれるため、
画面サイズに収まらない場合はセクション内スクロールに切り替えて表示してくれます。

その場合、コンテンツの最初か最後にスクロールするまで前後セクションに移動するスクロールアニメーションは始まりません。

これによって高さの制限なく柔軟に制作を進める事が可能です。

elevator_scrollは思い通りのデザインを目指せるライブラリとして利用できるように
様々な可能性に対応できるように設計されています。

ダウンロードや詳細はGitHubにてご覧ください。

ELEVATOR SCROLL

elevator scroll.