Quick and Dirty Parallax

	window.onscroll = function() {
	// Mobile doesn't normally work well with Parallax, so let's bail out.
	if( navigator.userAgent.match(/mobile/i) != null ) return;

	els = d.querySelectorAll( '[data-parallax]' );
	for( i in els ) {
	el = els[i];
	if( typeof el.parentNode == 'undefined' ) continue;
	multiplier = el.getAttribute( 'data-parallax' );
	offset = ( el.parentNode.offsetTop – window.pageYOffset ) / multiplier;
	xOffset = 0 – Math.max( offset, 0 );
	if( el.hasAttribute( 'data-parallax-flip-horz' ) )
	xOffset = 0 – xOffset;
	yOffset = Math.min( offset, 0 );
	if( el.hasAttribute( 'data-parallax-flip-vert' ) )
	yOffset = 0 – yOffset;
	transform = 'translateY(' + yOffset + 'px) translateX(' + xOffset + 'px)';
	el.style.webkitTransform = transform;
	el.style.MozTransform = transform;
	el.style.msTransform = transform;
	el.style.OTransform = transform;
	el.style.transform = transform;
	}
	}

	/* Usage:
	<div style="padding-top:20em;">
	<h1 data-parallax="2">I enter from the left, then go up</h1>
	<h2 data-parallax="3" data-parallax-flip-horz="true">I enter from the right, then go up</h2>
	<h3 data-parallax="4" data-parallax-flip-vert="true" >I enter from the left, then ↓ I go!</h3>
	<img src="http://placekitten.com/300/300/" alt="I enter from the right, then down I go!" data-parallax="2" data-parallax-flip-vert="true" data-parallax-flip-horz="true" />
	</div>
	/**/

view raw

parallax.js

hosted with ❤ by GitHub

Comments