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 &darr; I go!</h3>
<img src="http://placekitten.com/300/300/&quot; 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

One thought on “Quick and Dirty Parallax

Comments are closed.