nickjackson/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<style id="jsbin-css">
body, html {
  margin:0;
  padding:0;
}

section {
  height:900px;
  background-color:#fff;
  padding:50px 20px;
}

section.one, section.three {
  background-color:grey;
}

.big, .small {
  max-width:100%;
  height: auto;
  margin: 50px 0;
}


@media only screen and (min-width: 600px) {
  section {
    padding:50px 100px;
  }

  .big {
    width: 50%;
    margin: 30px 5%;
    float:left;
  }

  .small {
    width:30%;
    margin:30px 5%;
    float:left;
  }

  .right {
    float:right;
  }

  .top-margin {
    margin-top:15%;
  }
}
</style>
</head>
<body>
  <section class="one">
    <img class="big" src="https://scontent.cdninstagram.com/vp/306c271d7180b5e5f5dd8d99cedf627f/5BAEE5E7/t51.2885-15/s640x640/sh0.08/e35/33174060_2062667183973763_3242897468953722880_n.jpg" />
    <div class="parallax-3">
      <img class="small right top-margin" src="https://scontent.cdninstagram.com/vp/393cae8a74d45b455341db909aee4102/5BA91353/t51.2885-15/sh0.08/e35/p640x640/33911537_242465156507120_4074564894517624832_n.jpg" />
    </div>
  </section>
  <section class="two">
    <div class="parallax">
      <img class="big right" src="https://scontent.cdninstagram.com/vp/a96ce978efa6f412dc0073405111853c/5BA65144/t51.2885-15/sh0.08/e35/p640x640/34266203_636520400029443_7127776825060622336_n.jpg" />
    </div>
    <div class="parallax-3">
      <img class="small top-margin" src="https://i.vimeocdn.com/video/526092017.webp?mw=1600&mh=900&q=70" />
    </div>
      <img class="small" src="https://scontent.cdninstagram.com/vp/f1a3c060ea7b1cef3ece20ea342a244f/5BB780DB/t51.2885-15/sh0.08/e35/p640x640/33650934_195822767715902_1254131992325259264_n.jpg" />
  </section>
  <section class="three"></section>
  <section class="four"></section>
<script id="jsbin-javascript">
$(document).ready(function(){
  $(window).scroll(function(){

    $(".parallax").each(parallax(0.3))
    $(".parallax-2").each(parallax(0.4))
    $(".parallax-3").each(parallax(-0.5))
  })
})


function parallax(factor) {
  return function(){
      var $this = $(this);
      var $parent = $(this).parent();

      var scrollTop = $(window).scrollTop();
      var parentTop = $parent.offset().top;

      var imgPos = ((scrollTop - parentTop) * factor);

      $(this).find("img").css('transform', "translateY(" + imgPos + "px)");
  }
}
</script>


<script id="jsbin-source-css" type="text/css">body, html {
  margin:0;
  padding:0;
}

section {
  height:900px;
  background-color:#fff;
  padding:50px 20px;
}

section.one, section.three {
  background-color:grey;
}

.big, .small {
  max-width:100%;
  height: auto;
  margin: 50px 0;
}


@media only screen and (min-width: 600px) {
  section {
    padding:50px 100px;
  }

  .big {
    width: 50%;
    margin: 30px 5%;
    float:left;
  }

  .small {
    width:30%;
    margin:30px 5%;
    float:left;
  }

  .right {
    float:right;
  }

  .top-margin {
    margin-top:15%;
  }
}


</script>

<script id="jsbin-source-javascript" type="text/javascript">$(document).ready(function(){
  $(window).scroll(function(){

    $(".parallax").each(parallax(0.3))
    $(".parallax-2").each(parallax(0.4))
    $(".parallax-3").each(parallax(-0.5))
  })
})


function parallax(factor) {
  return function(){
      var $this = $(this);
      var $parent = $(this).parent();

      var scrollTop = $(window).scrollTop();
      var parentTop = $parent.offset().top;

      var imgPos = ((scrollTop - parentTop) * factor);

      $(this).find("img").css('transform', "translateY(" + imgPos + "px)");
  }
}</script></body>
</html>

## jsbin.raxivedibu.css
body, html {
  margin:0;
  padding:0;
}

section {
  height:900px;
  background-color:#fff;
  padding:50px 20px;
}

section.one, section.three {
  background-color:grey;
}

.big, .small {
  max-width:100%;
  height: auto;
  margin: 50px 0;
}


@media only screen and (min-width: 600px) {
  section {
    padding:50px 100px;
  }

  .big {
    width: 50%;
    margin: 30px 5%;
    float:left;
  }

  .small {
    width:30%;
    margin:30px 5%;
    float:left;
  }

  .right {
    float:right;
  }

  .top-margin {
    margin-top:15%;
  }
}

## jsbin.raxivedibu.js
$(document).ready(function(){
  $(window).scroll(function(){

    $(".parallax").each(parallax(0.3))
    $(".parallax-2").each(parallax(0.4))
    $(".parallax-3").each(parallax(-0.5))
  })
})


function parallax(factor) {
  return function(){
      var $this = $(this);
      var $parent = $(this).parent();

      var scrollTop = $(window).scrollTop();
      var parentTop = $parent.offset().top;

      var imgPos = ((scrollTop - parentTop) * factor);

      $(this).find("img").css('transform', "translateY(" + imgPos + "px)");
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
	<style id="jsbin-css">
	body, html {
	margin:0;
	padding:0;
	}

	section {
	height:900px;
	background-color:#fff;
	padding:50px 20px;
	}

	section.one, section.three {
	background-color:grey;
	}

	.big, .small {
	max-width:100%;
	height: auto;
	margin: 50px 0;
	}


	@media only screen and (min-width: 600px) {
	section {
	padding:50px 100px;
	}

	.big {
	width: 50%;
	margin: 30px 5%;
	float:left;
	}

	.small {
	width:30%;
	margin:30px 5%;
	float:left;
	}

	.right {
	float:right;
	}

	.top-margin {
	margin-top:15%;
	}
	}
	</style>
	</head>
	<body>
	<section class="one">
	<img class="big" src="https://scontent.cdninstagram.com/vp/306c271d7180b5e5f5dd8d99cedf627f/5BAEE5E7/t51.2885-15/s640x640/sh0.08/e35/33174060_2062667183973763_3242897468953722880_n.jpg" />
	<div class="parallax-3">
	<img class="small right top-margin" src="https://scontent.cdninstagram.com/vp/393cae8a74d45b455341db909aee4102/5BA91353/t51.2885-15/sh0.08/e35/p640x640/33911537_242465156507120_4074564894517624832_n.jpg" />
	</div>
	</section>
	<section class="two">
	<div class="parallax">
	<img class="big right" src="https://scontent.cdninstagram.com/vp/a96ce978efa6f412dc0073405111853c/5BA65144/t51.2885-15/sh0.08/e35/p640x640/34266203_636520400029443_7127776825060622336_n.jpg" />
	</div>
	<div class="parallax-3">
	<img class="small top-margin" src="https://i.vimeocdn.com/video/526092017.webp?mw=1600&mh=900&q=70" />
	</div>
	<img class="small" src="https://scontent.cdninstagram.com/vp/f1a3c060ea7b1cef3ece20ea342a244f/5BB780DB/t51.2885-15/sh0.08/e35/p640x640/33650934_195822767715902_1254131992325259264_n.jpg" />
	</section>
	<section class="three"></section>
	<section class="four"></section>
	<script id="jsbin-javascript">
	$(document).ready(function(){
	$(window).scroll(function(){

	$(".parallax").each(parallax(0.3))
	$(".parallax-2").each(parallax(0.4))
	$(".parallax-3").each(parallax(-0.5))
	})
	})


	function parallax(factor) {
	return function(){
	var $this = $(this);
	var $parent = $(this).parent();

	var scrollTop = $(window).scrollTop();
	var parentTop = $parent.offset().top;

	var imgPos = ((scrollTop - parentTop) * factor);

	$(this).find("img").css('transform', "translateY(" + imgPos + "px)");
	}
	}
	</script>


	<script id="jsbin-source-css" type="text/css">body, html {
	margin:0;
	padding:0;
	}

	section {
	height:900px;
	background-color:#fff;
	padding:50px 20px;
	}

	section.one, section.three {
	background-color:grey;
	}

	.big, .small {
	max-width:100%;
	height: auto;
	margin: 50px 0;
	}


	@media only screen and (min-width: 600px) {
	section {
	padding:50px 100px;
	}

	.big {
	width: 50%;
	margin: 30px 5%;
	float:left;
	}

	.small {
	width:30%;
	margin:30px 5%;
	float:left;
	}

	.right {
	float:right;
	}

	.top-margin {
	margin-top:15%;
	}
	}


	</script>

	<script id="jsbin-source-javascript" type="text/javascript">$(document).ready(function(){
	$(window).scroll(function(){

	$(".parallax").each(parallax(0.3))
	$(".parallax-2").each(parallax(0.4))
	$(".parallax-3").each(parallax(-0.5))
	})
	})


	function parallax(factor) {
	return function(){
	var $this = $(this);
	var $parent = $(this).parent();

	var scrollTop = $(window).scrollTop();
	var parentTop = $parent.offset().top;

	var imgPos = ((scrollTop - parentTop) * factor);

	$(this).find("img").css('transform', "translateY(" + imgPos + "px)");
	}
	}</script></body>
	</html>