1.parallax.intro.md

This is the code that powers the parallax effect on codetunes.com.

I think it’s quite chaotic at the moment and waits for being released as open source when it’s cleaned up. Requires resizeend.

2.codetunes.parallax.js

/**
 * Creates the parallax effect.
*/
function createParallaxEffect() {
  var parallaxElement = document.getElementsByClassName("parallax-outer")[0];
  var parallaxClassName = "js-parallax";
  var parallaxEnabled = (
    parallaxElement.nodeType === 1 &&
    getStyle(document.body, "content", ":after").indexOf("parallax") >= 0 &&
    !hasClass(rootElement, parallaxClassName)
  );

  if ( !parallaxEnabled ) {
    return;
  }

  addClass(rootElement, parallaxClassName);

  var parallaxSpeed = 0.5;
  var parallaxTopClassName = parallaxClassName + "-alt";

  var parallaxLimitMax;
  var lastPositionY;

  var setTransform;
  var handleScrollY;
  var handleResize;

  if ( Modernizr.ios ) {
    setTransform = function(){};
  }
  else if ( Modernizr.qgraphicsview && Modernizr.csstransforms3d ) {
    setTransform = function(offset, scale) {
      parallaxElement.style[transformProperty] = "translate3d(0," + offset + "px,0) scale(" + scale + ")";
    };
  }
  else if ( Modernizr.qgraphicsview && Modernizr.csstransforms ) {
    setTransform = function(offset, scale) {
      parallaxElement.style[transformProperty] = "translateY(" + offset + "px) scale(" + scale + ")";
    };
  }
  else {
    setTransform = function(offset) {
      parallaxElement.style.backgroundPosition = "50% " + offset + "px";
    };
  }

  handleScrollY = function() {
    var positionY = parseInt(window.pageYOffset, 10);
    positionY = Math.min(parallaxLimitMax, positionY);

    if ( positionY !== lastPositionY ) {
      lastPositionY = positionY;

      if ( positionY > 0 ) {
        setTransform(positionY * parallaxSpeed, 1);
      }
      else {
        setTransform(positionY / -6, -1 * positionY / parallaxLimitMax + 1);
      }

      if ( positionY >= (parallaxLimitMax - 35) ) {
        addClass(rootElement, parallaxTopClassName);
      }
      else {
        removeClass(rootElement, parallaxTopClassName);
      }
    }
  };

  handleResize = function() {
    parallaxLimitMax = parallaxElement.offsetHeight || 440;
    lastPositionY += 999;
    handleScrollY();
  };

  handleResize();
  window.addEventListener("resizeend", handleResize, false);
  window.addEventListener("scroll", handleScrollY, false);
}

3.codetunes.helpers.js

Modernizr.addTest("qgraphicsview", function() {
  var platform = !!navigator.userAgent.match(/Macintosh/i);
  var engine = !!navigator.userAgent.match(/AppleWebKit/i);
  return ( platform && engine );
});

var rootElement = document.documentElement;
var classListSupport = "classList" in document.createElement("a");
var classNameDisabled = "js-disabled";
var classNameLoaded = "js-loaded";
var classNameVisible = "js-visible";
var transformProperty = Modernizr.prefixed("transform");

/**
 * Removes the given class from the element’s `className`.
*/
function removeClass(element, className) {
  if ( !hasClass(element, className) ) {
    return element;
  }

  if ( classListSupport ) {
    element.classList.remove(className);
  }
  else {
    var elClassName = " " + element.className + " ";
    className = " " + className +  " ";

    element.className = elClassName.replace(className, " ");
  }

  return element;
}

/**
 * Add the given class to the element’s `className`.
*/
function addClass(element, className) {
  if ( hasClass(element, className) ) {
    return element;
  }

  if ( classListSupport ) {
    element.classList.add(className);
  }
  else {
    element.className += " " + className;
  }

  return element;
}

/**
 * Returns true when the element contains the given class.
*/
function hasClass(element, className) {
  if ( classListSupport ) {
    return element.classList.contains(className);
  }

  var elClassName = " " + element.className + " ";
  className = " " + className +  " ";

  return elClassName.replace(/[\n\t]/g, " ").indexOf(className) >= 0;
}

/**
 * Wrapper for `getComputedStyle`.
*/
function getStyle(element, styleName, pseudoElement) {
  return window.getComputedStyle(element, pseudoElement || null).getPropertyValue(styleName);
}