content: import React from 'react';
  
  var lastTime = 0,
      lastTimeSelected = 0,
      elementCache = [];
  
  export default React.createClass({
      getDefaultProps() {
          return {
              perspective: 100,
              x: false,
              y: true,
              relativeToParent: true
          }
      },
      componentDidMount() {
          this._raf = window.requestAnimationFrame(this.tick);
      },
      componentWillUnmount() {
          window.cancelAnimationFrame(this._raf);
      },
      tick(t) {
          // Cap updates to near 60fps
          if (t-lastTime < 1000/60) {
              window.requestAnimationFrame(this.tick);
              lastTime = t;
              return;
          }
          // Only update element cache every 500ms to avoid bottlenecks
          // caused by repeatedly selecting elements
          if (t-lastTimeSelected > 500) {
              elementCache = this.node.getElementsByClassName('parallax');
              lastTimeSelected = t;
          }
          var depthElements = elementCache,
              yOffset = window.pageYOffset,
              xOffset = window.pageXOffset,
              viewportHeight = window.innerHeight,
              viewportWidth = window.innerWidth,
              i = depthElements.length - 1,
              el, elOffsetX, elOffsetY, depth, x, y, parent, parentRect;
  
          for (i; i >= 0; i--) {
              el = depthElements[i];
              depth = el.getAttribute('data-parallax-depth');
              elOffsetX = el.getAttribute('data-parallax-offset-x') || 0;
              elOffsetY = el.getAttribute('data-parallax-offset-y') || 0;
              parent = el.parentElement;
  
              if (this.props.relativeToParent && parent) {
                  parentRect = parent.getBoundingClientRect();
                  y = this.props.y ? -parentRect.top * depth / this.props.perspective : 0;
                  x = this.props.x ? -parentRect.left * depth / this.props.perspective : 0;
              } else {
                  y = this.props.y ? yOffset * depth / this.props.perspective : 0;
                  x = this.props.x ? xOffset * depth / this.props.perspective : 0;
              }
              x += +elOffsetX;
              y += +elOffsetY;
              el.style.transform = 'translate3d('+ x +'px,'+ y +'px, 0)';
          }
          lastTime = t;
          window.requestAnimationFrame(this.tick);
      },
      render() {
          return (
              <div className='parallax' ref={(el) => {this.node = el}}>
                  {this.props.children}
              </div>
          );
      }
  });
  