translate3d.js

/**
 * Parallax 
 * 
 * Translate3d 
 * 
 * 1.0 | Muffin Group
 */

var mfnSetup = {
    translate: null
};

(function( $ ){
    "use strict";
    
    /* ------------------------------------------------------------------------
     * 
     * mfnSetup
     *
     * --------------------------------------------------------------------- */
    
    
    // has3d ------------------------------------------------
    
    var has3d = function(){
    	
        if ( ! window.getComputedStyle ) {
            return false;
        }

        var el = document.createElement('div'), 
            has3d,
            transforms = {
                'webkitTransform':'-webkit-transform',
                'OTransform':'-o-transform',
                'msTransform':'-ms-transform',
                'MozTransform':'-moz-transform',
                'transform':'transform'
            };

        document.body.insertBefore(el, null);

        for (var t in transforms) {
            if (el.style[t] !== undefined) {
                el.style[t] = "translate3d(1px,1px,1px)";
                has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
            }
        }

        document.body.removeChild(el);

        return( has3d !== undefined && has3d !== null && has3d.length > 0 && has3d !== "none" );
    };

    
    // browserPrefix ------------------------------------------------
    
    var browserPrefix = function(){
    	
        var el = document.createElement('div'),
        	vendor = ["ms", "O", "Webkit", "Moz"],
        	i, prefix;
        
        for (i in vendor) {
            if (el.style[vendor[i] + "Transition"] !== undefined) {
            	prefix = vendor[i];
                break;
            }
        }
        return prefix;
    };


    // __construct ------------------------------------------------
    
    var __construct = function(){

        if( has3d() ){
        	
        	mfnSetup.translate = function( el, x, y ){
                el.css( '-' + browserPrefix() + '-transform', 'translate3d(' + x + ', ' + y + ', 0)' );
            };
            
        } else {
        	
            mfnSetup.translate = function( el, x, y ){
                el.css({ "left": x, "top": y });
            };
            
        }
    };

    __construct();

})(jQuery);


(function( $ ){
    "use strict";
    
    /* ------------------------------------------------------------------------
     * 
     * $.fn.mfnParallax
     *
     * --------------------------------------------------------------------- */
 
    $.fn.mfnParallax = function(){
    	
        var el = $(this),
        	parent = el.parent(),
        	speed = 500,
        	element, parentPos, windowH;

        
        // imageSize ------------------------------------------------
        
        var imageSize = function( img ){
        	
        	var w, h, l, t;	// width, height, left, top
        	
        	var imageW = img.get(0).naturalWidth;
        	var imageH = img.get(0).naturalHeight;
        	
        	var parentW = img.parent().outerWidth();
        	var parentH = img.parent().outerHeight();
        	
        	var windowH = $(window).height();
        	
        	// fix for small sections
        	if( windowH > parentH ){
        		parentH = windowH;
        	}

        	var diff = imageW / parentW;

        	if( ( imageH / diff ) < parentH ){
        		
        		w = imageW / ( imageH / parentH );
        		h = parentH;
        		
        		if( w > imageW ){

    				w = imageW;
        			h = imageH;

        		}
        		
        	} else {
        		
        		w = parentW;
        		h = imageH / diff;
        		
        	}
        	
        	l = ( parentW - w ) / 2;
            t = ( parentH - h ) / 2;
            
            return [w, h, l, t];    	
        };
        
        
        // parallax ------------------------------------------------
        
        var parallax = function(){
        	
        	var scrollTop = $(window).scrollTop(),
        		scrollDiff, ratio, translateTop;

            if( parentPos !== undefined ){

                if( scrollTop >= parentPos.min && scrollTop <= parentPos.max ) {
                	
                    scrollDiff = scrollTop - parentPos.min;
                    ratio = scrollDiff / parentPos.height;
   
                    translateTop = windowH + ( ratio * speed ) - scrollDiff - ( speed * ( windowH / parentPos.height ) ) ;

                    mfnSetup.translate( el, element.left + "px", -Math.round( translateTop ) + "px" );
                }
                
            }
        };
        
        
        // init ------------------------------------------------
        
        var init = function(){

        	windowH = $(window).height();
        	

            var initElement = function(){

                var size = imageSize( el );
                
                el.removeAttr( 'style' ).css({
                	'width'		: size[0],
                    'height'	: size[1]
                });

                mfnSetup.translate(el, size[2] + "px", size[3] + "px");
                
                return {
                	'width'		: size[0],
                    'height'	: size[1],
                    'left'		: size[2],
                    'top'		: size[3]
                };
            };

            element = initElement();
            
            
            var initParent = function(){
            	
                var min = parent.offset().top - $(window).height();
                var max = parent.offset().top + $(parent).outerHeight();

                return {
                    'min'		: min,
                    'max'		: max,
                    'height'	: max - min
                };
            };
            
            parentPos = initParent();
        };

        
        // reload ------------------------------------------------
        
        var reload = function(){
        	
            setTimeout( function(){
                init();
                parallax();
            }, 50);
            
        };
        
        
        // .bind() ------------------------------------------------
        
        $(window).bind( 'load resize', reload );
        $(window).bind( 'scroll', parallax );

    };   
    

    /* ------------------------------------------------------------------------
     * 
     * $(document).ready
     *
     * --------------------------------------------------------------------- */
    
    $( document ).ready( function(){
		
		if( $(".mfn-parallax").length ) {
        	
            $(".mfn-parallax").each( function(){
            	$(this).mfnParallax();
            });

        }
		
	});
    
    
})(jQuery);