fuck parallax, use scrollster

scrollster.js

      var Scrollster = (function(options){
        window.requestAnimationFrame = window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame||function(f){setTimeout(f,1000/60)};
        var options = options || {}, effects = {}, i = 0, intrinsics = {};

        var calculateIntrinsics = function(){
          intrinsics = {
            scrollHeight: document.body.scrollHeight, // height of entire document
            windowHeight: window.innerHeight, // height of browser window
            scrollTop:    window.pageYOffset // distance scrolled
          };
          intrinsics['scrollAmount'] = (intrinsics.scrollTop / (intrinsics.scrollHeight - intrinsics.windowHeight)) * 100; // amount scrolled (in %)
          return intrinsics;
        };
        calculateIntrinsics();

        var scrollAndResizeHandler = function(){
          calculateIntrinsics();
          console.log(intrinsics);
          requestAnimationFrame(function(){
            for(var name in effects){
              if(effects.hasOwnProperty(name)){ effects[name](intrinsics, document.getElementById(name)); }
            }
          });
        };

        var addEffect = function(name, func){ return effects[name] = func; };
        var removeEffect = function(name){ return delete effects[name]; };

        window.addEventListener('scroll', scrollAndResizeHandler, false);
        window.addEventListener('resize', scrollAndResizeHandler, false);

        return {
          calculateIntrinsics: calculateIntrinsics,
          addEffect: addEffect,
          removeEffect: removeEffect
        };
      });

/*usage*/

      var scrollster = Scrollster();

      scrollster.addEffect('parallax-red-box', function(intrinsics, obj){
        obj.style.left = intrinsics.scrollAmount * -100 + 'px';
      });

      scrollster.addEffect('parallax-first-dark-box', function(intrinsics, obj){
        if(intrinsics.scrollTop >= 200 && intrinsics.scrollTop <= 1060){
          obj.style.left = 1060 - intrinsics.scrollTop + 'px';
        }else if(intrinsics.scrollTop > 1060){
          obj.style.left = '0px';
        }
      });

      scrollster.addEffect('parallax-second-dark-box', function(intrinsics, obj){
        if(intrinsics.scrollTop >= 800 && intrinsics.scrollTop < 1200){
          obj.style.left = -1200 + intrinsics.scrollTop + 'px';
        }else if(intrinsics.scrollTop > 1200){
          obj.style.left = '0px';
        }
      });