parallaxParent.html

<link rel="import" href="//polygit.org/components/polymer/polymer.html" />

<dom-module id="parallax-parent">
  <template>
    <style>
      :host {
        position: relative;
        overflow: hidden;
      }
      :host ::content [parallax-speed] {
        position: relative;
      }
    </style>
    <content></content>
  </template>
</dom-module>
<script>
  (function(dlwj){
    dlwj.ParallaxParentElement = Polymer({
      is: 'parallax-parent',
      properties: {},
      ready: function() {
        var parallaxParent = this;
        var parallaxedElements = this.queryAllEffectiveChildren('[parallax-speed]');
        
        for (i = 0; i < parallaxedElements.length; i++) {
          parallaxedElement = parallaxedElements[i];
          parallaxedElement.originalPosition = {
          };
        }

        window.addEventListener('scroll', function() {
          var parallaxedElement, parallaxSpeed, i, parallaxParentTop;

          parallaxParentTop = parallaxParent.getBoundingClientRect().top;

          for (i = 0; i < parallaxedElements.length; i++) {
            parallaxedElement = parallaxedElements[i];
            
            parallaxSpeed = parseInt(parallaxedElement.attributes['parallax-speed'], 10);
            
            if (!isNaN(parallaxSpeed)) {
              parallaxedElement.top = -1 * parallaxSpeed * parallaxParentTop;
            }
          }
        });
      }
    });
  }(window.davidlwatsonjr = window.davidlwatsonjr || {}));
</script>