An Image with parallax-effect and with some text, which is fading out while scrolling

parallax-image-with-text.html

<div id="banner">
  	<div class="wrap-center">
		<div class="banner-centered" id="banner-text">
			<h2>Hello <strong>We Are Company-Name</strong>, Glad To See You. :-)</h2>
		</div>
	</div>
</div>

script.js

function scrollBanner() {
  $(document).scroll(function(){
  	var scrollPos = $(this).scrollTop();
  	$('#banner-text').css({
  	  'top' : (scrollPos/3)+'px',
  	  'opacity' : 1-(scrollPos/510)
  	});
  	$('#banner').css({
  	  'background-position' : 'center ' + (-scrollPos/2)+'px'
  	});
  });    
}
scrollBanner();

style.css

#banner {
  margin-bottom: 50px;
	overflow: hidden;
	width: 100%;
	height: 500px;
	position: relative;
	clear: both;
	background: transparent url(path/to/image/1.jpg) center center no-repeat fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path/to/image/1.jpg',sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path/to/image/1.jpg',sizingMethod='scale')";
}

.wrap-center{
	margin: 0 auto;
	position: relative;
	max-width: 73.231em;
}

.banner-centered {
	text-align: center;
	position: absolute;
	display: block;
	max-width: 75.231em;
	height: inherit;
	overflow: hidden;
	margin-top: 100px;
}

.banner-centered h2 {
	font-size: 5.385em;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #fafafa;
	font-weight: 100;
	display: block;
}

Thanks for this. Very nice little code. I've set up an example here so you can see what it does (I needed to show someone) http://codepen.io/AshboDev/pen/WGKXwg

I've seen your example and for me it shows a white background on an almost white text, It works but if someone wants to see it in action it'll be difficult without changing anything.