sudoers-parallax-header.html

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

<dom-module id="sudoers-parallax-header">
  <template>
    <style>
      :host {
        position:               relative;
        display:                inline-block;
        width:                  100%;
        height:                 300px;
        text-align:             center;
        overflow:               hidden;
      }
      #bg {
        position:               absolute;
        left:                   50%;
        top:                    50%;
        width:                  1600px;
        height:                 600px;
        margin-left:            -800px;
        margin-top:             -450px;
        background-repeat:      no-repeat;
        @apply                  (--sudoers-parallax-background);
      }
      #fg {
        position:               absolute;
        width:                  100%;
        height:                 100px;
        top:                    50%;
        margin:                 -180px 0 0 0;
        color:                  #fff;
      }
      h1, h2, h3, h4, h5 {
        margin:                 0;
        padding:                0;
        font-size:              6em;
      }
      @media all and (max-width: 630px) {
        h1, h2, h3, h4, h5 {
          font-size:              3.5em;
        }
      }
    </style>
    <div id="bg">
      <content></content>
    </div>
    <div id="fg">
      <h1>[[title]]</h1>
    </div>
  </template>
</dom-module>

<script>
  (function() {
    'use strict';
    var manager = (function() {
      var update, handler, getScrollTop;
      var delegates   = [];

      // Create the getScrollTop method based on the browser type.
      if (typeof pageYOffset!='undefined')
        getScrollTop  = function() { return pageYOffset; };
      else {
        var de      = document.documentElement,
            db      = document.body;
        var obj     = (de.clientHeight) ? de : db;
        getScrollTop  = function() { return obj.scrollTop; };
      }

      // The `handler` method gets called every time scrolling / resizing occurs.
      handler = function() {
        var wTop      = getScrollTop();
        var wBot      = wTop+window.innerHeight;
        var wHeight   = wBot-wTop;
        for (var idx in delegates) {
          var elem = delegates[idx];
          var eTop = elem.offsetTop;
          var eBot = eTop + elem.offsetHeight;
          if ((eTop >= wTop || eBot >= wTop) && (eTop <= wBot || eBot <= wBot))
            update(elem, eTop, eBot, wTop, wHeight);
        }
      };
      // The `update` method updates a single item stored in the `elem`
      // scope variable, based on `eTop`, `eBot`, `wHeight` and `val`.
      update  = function(elem, eTop, eBot, wTop, wHeight) {
        var zero            = eTop - wHeight;
        var val             = 1 / (eBot - zero) * (wTop - zero);
        elem.fgs.opacity    = (val - 0.1) * 2;
        elem.fgs.transform  = 'translateY(' + (elem.fgAmplitude * val) + 'px)';
        elem.bgs.transform  = 'translateY(' + (elem.bgAmplitude * val) + 'px)';
      };

      document.addEventListener('scroll', handler);
      window.addEventListener('resize', handler);
      return {
        register: function(elem) {
          if (delegates.indexOf(elem) < 0) {
            elem.fgs = elem.$.fg.style;
            elem.bgs = elem.$.bg.style;
            delegates.push(elem);
            handler();
          }
        },
        unregister: function(elem) {
          var idx = delegates.indexOf(elem);
          if (idx >= 0)
            delegates.splice(idx, -1);
        }
      };
    })();

    Polymer({
      is: 'sudoers-parallax-header',
      properties: {
        title:        String,
        bgAmplitude:  Number,
        fgAmplitude:  Number
      },
      attached: function() { manager.register(this); },
      detached: function() { manager.unregister(this); }
    });
  })();
</script>