Parallax

parallax.coffee

# Parallax
# 	IE9+, iOS* (без анимации)
# --------------------------------------------------------
# cache
# 	parallax — блоки, которым необходимо применить параллакс
# settings
# 	start, stop — ограничительные позиции. Если экран находится за пределами этих позиции - параллакс к указанным элементам применяться не будет
# 	coefs — коэффициент скорости прокрутки, чем больше — тем быстрее прокрутка
# 	objStart — стартовые позиции параллакс-блоков
# bindEvents — по скроллу запускаем перерасчет позиции параллакс-блоков
# setPosition — перерасчет позиции параллакс-блоков
# 	windowTop — позиция окна по Y
# --------------------------------------------------------
# HTML:
# 	.parallax блокам указывается коэффициент прокрутки через data-coef, например data-coef="1.25"
# --------------------------------------------------------


Parallax = do ->
	init: ->
		@cache()
		@settings()
		@bindEvents()
	cache: ->
		@parallax = document.getElementsByClassName("parallax")
	settings: ->
		@start = 0
		@coefs = []
		for i in @parallax
			coef = i.getAttribute("data-coef")
			if coef is null then coef = 0.95
			@coefs.push(coef)
		@objStart = []
		for i in @parallax then @objStart.push(i.getBoundingClientRect().top)
		@stop = []
		for i in [[email protected]]
			@stop.push(@objStart[i] - parseInt(getComputedStyle(@parallax[i]).height))
	bindEvents: ->
		self = @
		window.addEventListener "scroll", -> self.setPosition()
	setPosition: ->
		windowTop = window.pageYOffset
		for i in [[email protected]]
			# if windowTop >= @start and windowTop <= @stop[i]
				newCoord = @objStart[i] - windowTop * @coefs[i]
				@parallax[i].style.top = "#{newCoord}px"

parallax.html

<div class="parallax" data-coef="1.25"></div>
<div class="parallax" data-coef="2"></div>