glassesfactory/ParallaxObj.coffee

## common.coffee
createParallax = ()->
  pal1 = new ParallaxObj("segment2", 100, 400, 200, 0, Easing.QuartOut)
  pal2 = new ParallaxObj("segment3", 200, 800, 400, 100, Easing.QuartIn)
  pal3 = new ParallaxObj("segment4", 300, 1200, 800, 600, Easing.SineIn)

  objs = [ pal1, pal2, pal3]

  win = window
  userAgent = win.navigator.userAgent.toLowerCase();
  if userAgent.indexOf("msie") > -1 or userAgent.indexOf("firefox") > -1 or userAgent.indexOf("opera") > -1
    scrollTarget = document.documentElement
  else
    scrollTarget = document.body

  window.onscroll = ()->
    for obj in objs
      obj.update(scrollTarget.scrollTop)
      obj.draw()
  null

## index.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Parallax Test</title>
		<link rel="stylesheet" href="common/css/main.css">
	</head>
	<body>
		<div id="container">
			<div id="segment1">
				(´･ω｀･)ｴｯ?
			</div>

			<div id="segment2">
				(´･ω｀･)ｴｯ?
			</div>

			<div id="segment3">
				(´･ω｀･)ｴｯ?
			</div>

			<div id="segment4">
				(´･ω｀･)ｴｯ?
			</div>
		</div>
	<script data-main="common/js/main" src="common/js/require.js" type="text/javascript"></script>
	</body>
</html>

## main.css
body,html{
	margin:0;
	padding:0;
	font-size: 180px;
}

#container{
	min-height: 2000px;
}

#segment1{
	position:absolute;
	color:#fff;
	width:100%;
	height:400px;
	background: rgba(60, 220, 120, 0.8);
	text-align: center;
	z-index: 0;
}

#segment2{
	position: absolute;
	top:100px;
	color:#fff;
	width:100%;
	height:400px;
	background: rgba(240, 210, 20, 0.8);
	text-align: center;
	z-index: -1;
}


#segment3{
	position: absolute;
	top:200px;
	color:#fff;
	width:100%;
	height:400px;
	background: rgba(240, 30, 20, 0.8);
	text-align: center;
	z-index: -2;
}

#segment4{
	position: absolute;
	top:300px;
	color:#fff;
	width:100%;
	height:400px;
	background: rgba(10, 20, 220, 0.8);
	text-align: center;
	z-index: -3;
}

## main.js
require([
   'jquery'
],
function(jquery){
    require([
        'common',
        'Easing',
        'ParallaxObj'
    ],
    function(){
        createParallax();
    });
});

## ParallaxObj.coffee
class ParallaxObj
  id:""
  target:null
  #イージング関数 jquery.easing とか
  easing:null

  currentPos:0
  #scroll がどの辺まで来たらアニメーションが完了するか
  threshold:0
  #scroll がどの辺まで来たらアニメーションを開始するか、オフセット値
  offset:0

  #変化させたい値
  #currentVal:0
  #例えば y値
  y:0

  #アニメーション開始時の値
  begin:0
  #アニメーション終了時の値
  end:0

  change:0

  constructor:(@id,@begin,@end,@threshold,@offset,@easing = Easing.liner)->

  update:(delta)->
    thre = @threshold - @offset
    factor = Math.max(0, thre - (delta - @offset)) / thre
    factor = Math.max(0, 1 - factor)
    #example
    @y = @easing(factor, @begin, @end - @begin, 1)
    console.log @y
    null

  draw:()->
    if not @target?
      @target = $("#" + @id)
    #console.log @y
    @target.css({top:@y})
    null
	createParallax = ()->
	pal1 = new ParallaxObj("segment2", 100, 400, 200, 0, Easing.QuartOut)
	pal2 = new ParallaxObj("segment3", 200, 800, 400, 100, Easing.QuartIn)
	pal3 = new ParallaxObj("segment4", 300, 1200, 800, 600, Easing.SineIn)

	objs = [ pal1, pal2, pal3]

	win = window
	userAgent = win.navigator.userAgent.toLowerCase();
	if userAgent.indexOf("msie") > -1 or userAgent.indexOf("firefox") > -1 or userAgent.indexOf("opera") > -1
	scrollTarget = document.documentElement
	else
	scrollTarget = document.body

	window.onscroll = ()->
	for obj in objs
	obj.update(scrollTarget.scrollTop)
	obj.draw()
	null
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Parallax Test</title>
	<link rel="stylesheet" href="common/css/main.css">
	</head>
	<body>
	<div id="container">
	<div id="segment1">
	(´･ω｀･)ｴｯ?
	</div>

	<div id="segment2">
	(´･ω｀･)ｴｯ?
	</div>

	<div id="segment3">
	(´･ω｀･)ｴｯ?
	</div>

	<div id="segment4">
	(´･ω｀･)ｴｯ?
	</div>
	</div>
	<script data-main="common/js/main" src="common/js/require.js" type="text/javascript"></script>
	</body>
	</html>
	body,html{
	margin:0;
	padding:0;
	font-size: 180px;
	}

	#container{
	min-height: 2000px;
	}

	#segment1{
	position:absolute;
	color:#fff;
	width:100%;
	height:400px;
	background: rgba(60, 220, 120, 0.8);
	text-align: center;
	z-index: 0;
	}

	#segment2{
	position: absolute;
	top:100px;
	color:#fff;
	width:100%;
	height:400px;
	background: rgba(240, 210, 20, 0.8);
	text-align: center;
	z-index: -1;
	}


	#segment3{
	position: absolute;
	top:200px;
	color:#fff;
	width:100%;
	height:400px;
	background: rgba(240, 30, 20, 0.8);
	text-align: center;
	z-index: -2;
	}

	#segment4{
	position: absolute;
	top:300px;
	color:#fff;
	width:100%;
	height:400px;
	background: rgba(10, 20, 220, 0.8);
	text-align: center;
	z-index: -3;
	}
	require([
	'jquery'
	],
	function(jquery){
	require([
	'common',
	'Easing',
	'ParallaxObj'
	],
	function(){
	createParallax();
	});
	});
	class ParallaxObj
	id:""
	target:null
	#イージング関数 jquery.easing とか
	easing:null

	currentPos:0
	#scroll がどの辺まで来たらアニメーションが完了するか
	threshold:0
	#scroll がどの辺まで来たらアニメーションを開始するか、オフセット値
	offset:0

	#変化させたい値
	#currentVal:0
	#例えば y値
	y:0

	#アニメーション開始時の値
	begin:0
	#アニメーション終了時の値
	end:0

	change:0

	constructor:(@id,@begin,@end,@threshold,@offset,@easing = Easing.liner)->

	update:(delta)->
	thre = @threshold - @offset
	factor = Math.max(0, thre - (delta - @offset)) / thre
	factor = Math.max(0, 1 - factor)
	#example
	@y = @easing(factor, @begin, @end - @begin, 1)
	console.log @y
	null

	draw:()->
	if not @target?
	@target = $("#" + @id)
	#console.log @y
	@target.css({top:@y})
	null