My Paralax

by Luis Valle

HTML

<span id="lblPos" style="position:fixed;top:5px;left:5px;"></span>
<div id="dvHolder">
  <div id="dvA" class="myImgClass">  
  </div>
  <div id="dvB" class="myImgClass">  
  </div>
  <div id="dvC" class="myImgClass">  
  </div>
  <div id="dvD" class="myImgClass">  
  </div>
  <div id="dvE" class="myImgClass">  
  </div>
  <div id="dvF" class="myImgClass">  
  </div>
</div>
<div id="dvCapA" class="myImgClass myCaptionClass" style="position:fixed;width:100%;background-color:gray;">
</div>
<div id="dvCapB" class="myImgClass myCaptionClass" style="position:fixed;width:100%;background-color:gray;">
</div>
<div id="dvCapC" class="myImgClass myCaptionClass" style="position:fixed;width:100%;background-color:gray;">
</div>
<div id="dvCapD" class="myImgClass myCaptionClass" style="position:fixed;width:100%;background-color:gray;">
</div>
<div id="dvCapE" class="myImgClass myCaptionClass" style="position:fixed;width:100%;background-color:gray;">
</div>
<div id="dvCapF" class="myImgClass myCaptionClass" style="position:fixed;width:100%;background-color:gray;">
</div>

CSS

html, body {
  padding: 0px;
  margin: 0px;
}
#dvA {
  background-image: url(http://www.evicore.net/Src/imgs/paralax/imgComp1.jpg);
  background-repeat:no-repeat;
  background-size: cover;
}
#dvB {
  background-image: url(http://www.evicore.net/Src/imgs/paralax/imgComp2.jpg);
  background-repeat:no-repeat;
  background-size: cover;
}
#dvC {
  background-image: url(http://www.evicore.net/Src/imgs/paralax/imgMobile5.jpg);
  background-repeat:no-repeat;
  background-size: cover;
}
#dvD {
  background-image: url(http://www.evicore.net/Src/imgs/paralax/imgComp3.jpg);
  background-repeat:no-repeat;
  background-size: cover;
}
#dvE {
  background-image: url(http://www.evicore.net/Src/imgs/paralax/imgComp4.jpg);
  background-repeat:no-repeat;
  background-size: cover;
}
#dvF {
  background-image: url(http://www.evicore.net/Src/imgs/paralax/imgTablet6.jpg);
  background-repeat:no-repeat;
  background-size: cover;
}

JavaScript

$(document).ready(function () {
	$('.myCaptionClass').css({
  	'left': '0px',
    'opacity': '0.75'
  });
  
	//var scH = $(window).height() * $('.myImgClass').length;
  //$('#dvHolder').css('height', dvHolder + 'px');
  $('.myImgClass').css('height', $(window).height() + 'px');
  
  $('#dvCapA').css({
  	'top': $(window).height() + 'px'//((scrollPos / 2)) + 'px'
  });  
  $('#dvCapB').css({
  	'top': ($(window).height() * 3) + 'px'
  });
  $('#dvCapC').css({
  	'top': ($(window).height() * 5) + 'px'
  });
  $('#dvCapD').css({
  	'top': ($(window).height() * 7) + 'px'
  });
  $('#dvCapE').css({
  	'top': ($(window).height() * 9) + 'px'
  });
  $('#dvCapF').css({
  	'top': ($(window).height() * 11) + 'px'
  });
});

var dAtop = 0;
$(window).scroll(function () {
	var scrollPos = $(document).scrollTop();
  
  $('#dvCapA').css({
  	'top': ($(window).height() - (scrollPos * 2)) + 'px'
  });  
  $('#dvCapB').css({
  	'top': (($(window).height() * 3) - (scrollPos * 2)) + 'px'
  });
  $('#dvCapC').css({
  	'top': (($(window).height() * 5) - (scrollPos * 2)) + 'px'
  });
  $('#dvCapD').css({
  	'top': (($(window).height() * 7) - (scrollPos * 2)) + 'px'
  });
  $('#dvCapE').css({
  	'top': (($(window).height() * 9) - (scrollPos * 2)) + 'px'
  });
  $('#dvCapF').css({
  	'top': (($(window).height() * 11) - (scrollPos * 2)) + 'px'
  });
});