One Page Scroll Demo

by bc_rikko

HTML

<script src="https://rawgit.com/peachananr/onepage-scroll/master/jquery.onepage-scroll.js"></script>
<div class="main">
  <section class="section page1"><h2>吾輩は猫である。</h2></section>
  <section class="section page2"><h2>名前はまだない。</h2></section>
  <section class="section page3"><h2>どこで生まれたか</h2></section>
  <section class="section page4"><h2>とんと見当がつかぬ。</h2></section>
</div>

CSS

/* reset */
* {
  margin: 0;
  padding: 0;
}

.section {
  width: 100vw;
  height: 100vh;
}
.page1 { background-color: #a7d2cb; }
.page2 { background-color: #f2d388; }
.page3 { background-color: #c98474; }
.page4 { background-color: #874c62; }

.section > h2 {
  color: white;
  font-size: 80px;
  text-align: center;
  height: 100vh;
  line-height: 100vh;
}

JavaScript

$('.main').onepage_scroll({
	sectionContainer: 'section',
  easing: 'ease',
  animationTime: 500,
  
  pagination: false,
  direction: "horizontal"
});