MYGxgZ

index.html

<div class='wrapper'>
<div class='header-container'>
  <div class='inner-content parallax'>
    <img src='http://placehold.it/1260x675'>
  </div>
</div>
<div class='body-content'>
  Typewriter small batch assumenda bitters Portland. Fugiat American Apparel flannel, Banksy aliqua sartorial voluptate Echo Park laboris banh mi shabby chic consectetur. Aesthetic photo booth Williamsburg, pickled yr art party health goth fugiat four dollar toast flexitarian. Vero Etsy pour-over YOLO meh, polaroid ea butcher you probably haven't heard of them irure synth. Brunch chambray forage disrupt pop-up, ullamco flexitarian messenger bag cronut labore. Banh mi beard drinking vinegar consectetur mlkshk, post-ironic pour-over dolor ennui cillum. DIY do Pitchfork narwhal art party gluten-free, sustainable nisi tote bag mumblecore elit leggings placeat.
</div>
</div>

MYGxgZ.markdown

MYGxgZ

A Pen by Captain Anonymous on CodePen.

License.

script.js

var parallaxHeader = function(){
	var num = 1, //used to set opacity value
		paralaxEl = document.querySelectorAll('.parallax'); //Grab the parallax class

	var scrollEffect = function(){
    //Get the window element's top position in pixels
		var windowPos = window.scrollY;

    //Loop through if multiple elements
		for (var i = paralaxEl.length - 1; i >= 0; i--) {
			//Do some fancy shit in here!
			paralaxEl[i].style.transform = 'translate3d( 0,' + windowPos / 2 + 'px, 0px )',//Numbers refer to offsets
			paralaxEl[i].style.opacity = ( num - windowPos / 500 )
		};
	};
	
  //Add a scroll istener to the window and call 'scrollEffect' function
	window.addEventListener('scroll', scrollEffect, false);
};

//initialise a new instance of the scroll effect
var scrollEffectProject = new parallaxHeader();

style.stylus

*
  box-sizing border-box
.wrapper
  max-width 1200px
  margin 0 auto
  img
    width 100%
.header-container, .body-content
  position relative
.body-content
  background-color #000
  width 100%
  color #fff
  padding 40px
  height 600px