Sway.js

(function($){

    var sway = {
        ease:6,
        mobileWidth:767,
        container: $(".interactive-piece"),
        elements: null,
        active:false,
        currX:0,
        currY:0,
        offsetX:0,
        offsetY:0,
        containerWidth:0,
        containerHeight:0,
        renderLoop:null,
        sizeStep:0
    };

    window.sway = sway;

    sway.init = function(){
        sway.calculateSizing();
        sway.getElements();
        $(window).load(sway.resized);
        $(window).on('resize',sway.resized);
    };

    sway.getElements = function(){

        sway.elements = [];
        sway.container.find("[data-sway]").each(function(i,el){
            sway.elements.push({
                el:el,
                play: parseInt($(el).attr('data-sway')),
                x:0,
                y:0
            });
        });

    };

    sway.resized = function(){
        var w = $(window).width();
        if(w > sway.mobileWidth){
            if(!sway.active){
                sway.setupInteraction();
            }
        }
        else if(sway.active){
            sway.removeInteraction();
        }
    };

    sway.setupInteraction = function(){
        console.log('add interaction');
        sway.active = true;
        sway.container.on('mouseenter.sway', sway.start);
        sway.container.on('mouseleave.sway', sway.leave);
        sway.container.on('mousemove.sway', sway.move);
        if(container.is(':hover')){
            sway.start();
        }
    };

    sway.removeInteraction = function(){
        console.log('remove interaction');
        sway.active = false;
        sway.container.off('.sway');
    };

    sway.calculateSizing = function(){
        sway.containerWidth = sway.container.width();
        sway.containerHeight = sway.container.height();
        sway.offsetX = sway.container.offset().left;
        sway.offsetY = sway.container.offset().top;
    };

    ////////////////////
    // Mouse Handlers //
    ////////////////////
    sway.start = function(e){
        //console.log('start');
        sway.render();
    };

    sway.move = function(e){

        sway.currX = e.pageX - sway.offsetX;
        sway.currY = e.pageY - sway.offsetY;


        //Occasionally recalculate the sizing.
        if(sway.sizeStep > 50){
            sway.sizeStep = 0;
            sway.calculateSizing();
        }
        sway.sizeStep++;
    };

    sway.leave = function(e){
        //console.log('leave');
        sway.stopRender();
    };


    /////////////////////
    // Rendering Stuff //
    /////////////////////
    sway.render = function(){

        sway.renderLoop = requestAnimationFrame(function(){
            sway.adjustPositions();
            sway.render();
        });
    };

    sway.stopRender = function(){
        cancelAnimationFrame(sway.renderLoop);
    };

    sway.adjustPositions = function(){

        var xPerc = (sway.currX - (sway.containerWidth/2)) / sway.containerWidth,
            yPerc = (sway.currY - (sway.containerHeight/2)) / sway.containerHeight,
            len = sway.elements.length,
            play,
            str,
            el,
            x,
            y;

        for(var i = 0; i < len; i++){
            el = sway.elements[i].el;
            play = sway.elements[i].play;

            x = sway.elements[i].x = 0;//sway.elements[i].x + (((play*xPerc) - sway.elements[i].x) / sway.ease);
            y = sway.elements[i].y = sway.elements[i].y + (((play*yPerc) - sway.elements[i].y) / sway.ease);

            str = 'translate3D('+x+'px,'+y+'px,0)';
            $(el).css('transform',str);
        }
    };

    sway.init();

}(jQuery));