jQuery Parallax Class

Parallax.js

var Parallax = function () {

    /**
     * @type {Parallax}
     */
    var that = this;

    /**
     * Holds all of the elements and their callback
     * functions inside objects.
     * @type {Array}
     */
    this.callable = [];

    /**
     * Initialization of the class.
     */
    this.listen = function () {
        events();
    };

    /**
     * Add an element to the callable array.
     *
     * @param elements
     * @param callback
     */
    this.add = function (elements, callback) {
        visible = visible || [];

        $.each(elements, function () {
            that.callable.push({
                el: $(this),
                cb: callback
            });
        });

        parallaxVisibleElements();
    };

    /**
     * Iterate through each element in the callable array
     * and call the callback function if visible.
     */
    var parallaxVisibleElements = function () {
        that.callable.map(function (object) {
            if (
                visible(object.el) &&
                object['animating'] !== true
            ) {
                object['animating'] = true;
                object.cb(object.el);
            }
        });
    };

    /**
     * Determine if the given element is visible in the viewport.
     *
     * @param element
     * @returns {boolean}
     */
    var visible = function (element) {
        if (typeof jQuery === 'function' && element instanceof jQuery) {
            element = element[0];
        }

        var rect = element.getBoundingClientRect();

        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    };

    /**
     * Small delay to fix IE performance issues.
     *
     * @param ms
     * @param callback
     * @returns {Function}
     */
    var throttle = function (ms, callback) {
        var lastCall = 0;

        return function () {
            var now = new Date().getTime(),
                diff = now - lastCall;
            if (diff >= ms) {
                lastCall = now;
                callback.apply(this, arguments);
            }
        };
    };

    /**
     * Event bindings.
     */
    var events = function () {
        $('#container').on('scroll', throttle(30, parallaxVisibleElements));
    };

};

usage.js

(function() {
  var parallax = new Parallax();

  parallax.add($('.some-element-selector'), function(element) {
      console.log('This will get called when "element" is visible', element);
  });

  parallax.listen();
}());