/** * 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);