My Paralax 2

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="dvParlx">
  <div id="dvCapA" class="myImgClass myCaptionClass" style="background-color:gray;">
  </div>
  <div id="dvCapB" class="myImgClass myCaptionClass" style="background-color:gray;">
  </div>
  <div id="dvCapC" class="myImgClass myCaptionClass" style="background-color:gray;">
  </div>
  <div id="dvCapD" class="myImgClass myCaptionClass" style="background-color:gray;">
  </div>
  <div id="dvCapE" class="myImgClass myCaptionClass" style="background-color:gray;">
  </div>
  <div id="dvCapF" class="myImgClass myCaptionClass" style="background-color:gray;">
  </div>
</div>

CSS

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

JavaScript

$(document).ready(function () {
	$('#dvParlx').css({
  	'position': 'fixed',
    'top': '0px',
    'left': '0px',
    'width': '100%'
  });
	$('.myCaptionClass').css({
  	'left': '0px',
    'opacity': '0.75',
    'margin-top': ($(window).height() + 'px'),
    'height': $(window).height() + 'px'
  });
  
  $('.myImgClass').css('height', $(window).height() + 'px');
});

$(window).scroll(function () {
	var scrollPos = $(document).scrollTop();
  
  $('#dvParlx').css({
  	'top': '-' + (scrollPos * 2) + 'px'
  });
});