Scroll Page

scroll-page.coffee

# ScrollPage
# 	прокрутка страницы, как слайда
# 	IE9, iOS
# --------------------------------------------------------
# cache
# 	page — прокручиваемые страницы (указывать всем главным блокам)
# settings
# 	duration — продолжительность прокрутки
# 	timing — временная функция
# bindEvents — когда вызывать прокрутку
# onWheel — определение направления прокрутки (вверх/вниз)
# key — определение стрелки ввехр и вниз и вызов необходимой прокрутки
# scrollPageDown — прокрутка вниз
# 	currentPage — текущая страница
# 	nextPage — следующая страница
# scrollPageUp — прокрутка вверх
# --------------------------------------------------------

ScrollPage = do ->
	init: ->
		@cache()
		@settings()
		@bindEvents()
	cache: ->
		@page = document.getElementsByClassName("page")
	settings: ->
		@duration = 500
		@timing = "ease-in"
	bindEvents: ->
		self = @
		document.onwheel = document.addEventListener "wheel", (e) -> self.onWheel(e)
		document.onmousewheel = document.addEventListener "mousewheel", (e) -> self.onWheel(e)
		addEventListener "keydown", (e) -> self.key(e)
		# for mobile
		addEventListener "touchstart", (e) ->
			@startY = e.pageY
			@startX = e.pageX
		addEventListener "touchmove", (e) ->
			e.preventDefault()
			@endY = e.pageY
			@endX = e.pageX
		addEventListener "touchend", (e) ->
			if Math.abs(@endY - @startY) > Math.abs(@endX - @startX)
				if @startY > @endY then self.scrollPageDown()
				else self.scrollPageUp()
	onWheel: (e) ->
		e = e || window.event
		delta = e.deltaY || e.detail || e.wheelDelta
		if 0 < delta < 110  or delta < -110	then @scrollPageDown()
		else if -110 < delta < 0  or delta > 110 then @scrollPageUp()
	key: (e) ->
		switch e.keyCode
			when 40 then @scrollPageDown()
			when 38 then @scrollPageUp()
	scrollPageDown: ->
		if !@isScrolling
			@currentPage = @currentPage || 0
			@nextPage = @currentPage + 1
			if @currentPage < @page.length - 1
				@isScrolling = true
				fn = (progress) =>
					@page[@currentPage].style.top = "#{0 - 100 * progress}%"
					@page[@nextPage].style.top = "#{100-100 * progress}%"
					if progress is 1
						@currentPage += 1
						@isScrolling = false
				AnimHandler.init fn, @duration, @timing
	scrollPageUp: ->
		if !@isScrolling
			@currentPage = @currentPage || 0
			@nextPage = @currentPage - 1
			if @currentPage > 0
				@isScrolling = true
				fn = (progress) =>
					@page[@currentPage].style.top = "#{0 + 100 * progress}%"
					@page[@nextPage].style.top = "#{-100 + 100 * progress}%"
					if progress is 1
						@currentPage -= 1
						@isScrolling = false
				AnimHandler.init fn, @duration, @timing

scroll-page.html

<div class="wrapper">

  <header id="header" class="page">
  	It's Header
  </header>
  
  <section class="page second">
  	It's second
  </section>
  
  <section class="page third">
  	It's Third
  </section>
  
  <section class="page fourth">
  	It's fourth
  </section>
  
  <section class="page fifth">
  	It's fifth
  </section>

</div>

scroll-page.styl

.wrapper
	width 100%
	height 100%
	position relative
	overflow hidden

.page
	position absolute
	width 100%
	height 100%
	top 100%

#header
	top 0