1/** 2 * Parallax 3 * 4 * Translate3d 5 * 6 * 1.0 | Muffin Group 7 */ 8 9var mfnSetup = { 10 translate: null 11}; 12 13(function( $ ){ 14 "use strict"; 15 16 /* ------------------------------------------------------------------------ 17 * 18 * mfnSetup 19 * 20 * --------------------------------------------------------------------- */ 21 22 23 // has3d ------------------------------------------------ 24 25 var has3d = function(){ 26 27 if ( ! window.getComputedStyle ) { 28 return false; 29 } 30 31 var el = document.createElement('div'), 32 has3d, 33 transforms = { 34 'webkitTransform':'-webkit-transform', 35 'OTransform':'-o-transform', 36 'msTransform':'-ms-transform', 37 'MozTransform':'-moz-transform', 38 'transform':'transform' 39 }; 40 41 document.body.insertBefore(el, null); 42 43 for (var t in transforms) { 44 if (el.style[t] !== undefined) { 45 el.style[t] = "translate3d(1px,1px,1px)"; 46 has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]); 47 } 48 } 49 50 document.body.removeChild(el); 51 52 return( has3d !== undefined && has3d !== null && has3d.length > 0 && has3d !== "none" ); 53 }; 54 55 56 // browserPrefix ------------------------------------------------ 57 58 var browserPrefix = function(){ 59 60 var el = document.createElement('div'), 61 vendor = ["ms", "O", "Webkit", "Moz"], 62 i, prefix; 63 64 for (i in vendor) { 65 if (el.style[vendor[i] + "Transition"] !== undefined) { 66 prefix = vendor[i]; 67 break; 68 } 69 } 70 return prefix; 71 }; 72 73 74 // __construct ------------------------------------------------ 75 76 var __construct = function(){ 77 78 if( has3d() ){ 79 80 mfnSetup.translate = function( el, x, y ){ 81 el.css( '-' + browserPrefix() + '-transform', 'translate3d(' + x + ', ' + y + ', 0)' ); 82 }; 83 84 } else { 85 86 mfnSetup.translate = function( el, x, y ){ 87 el.css({ "left": x, "top": y }); 88 }; 89 90 } 91 }; 92 93 __construct(); 94 95})(jQuery); 96 97 98(function( $ ){ 99 "use strict"; 100 101 /* ------------------------------------------------------------------------ 102 * 103 * $.fn.mfnParallax 104 * 105 * --------------------------------------------------------------------- */ 106 107 $.fn.mfnParallax = function(){ 108 109 var el = $(this), 110 parent = el.parent(), 111 speed = 500, 112 element, parentPos, windowH; 113 114 115 // imageSize ------------------------------------------------ 116 117 var imageSize = function( img ){ 118 119 var w, h, l, t; // width, height, left, top 120 121 var imageW = img.get(0).naturalWidth; 122 var imageH = img.get(0).naturalHeight; 123 124 var parentW = img.parent().outerWidth(); 125 var parentH = img.parent().outerHeight(); 126 127 var windowH = $(window).height(); 128 129 // fix for small sections 130 if( windowH > parentH ){ 131 parentH = windowH; 132 } 133 134 var diff = imageW / parentW; 135 136 if( ( imageH / diff ) < parentH ){ 137 138 w = imageW / ( imageH / parentH ); 139 h = parentH; 140 141 if( w > imageW ){ 142 143 w = imageW; 144 h = imageH; 145 146 } 147 148 } else { 149 150 w = parentW; 151 h = imageH / diff; 152 153 } 154 155 l = ( parentW - w ) / 2; 156 t = ( parentH - h ) / 2; 157 158 return [w, h, l, t]; 159 }; 160 161 162 // parallax ------------------------------------------------ 163 164 var parallax = function(){ 165 166 var scrollTop = $(window).scrollTop(), 167 scrollDiff, ratio, translateTop; 168 169 if( parentPos !== undefined ){ 170 171 if( scrollTop >= parentPos.min && scrollTop <= parentPos.max ) { 172 173 scrollDiff = scrollTop - parentPos.min; 174 ratio = scrollDiff / parentPos.height; 175 176 translateTop = windowH + ( ratio * speed ) - scrollDiff - ( speed * ( windowH / parentPos.height ) ) ; 177 178 mfnSetup.translate( el, element.left + "px", -Math.round( translateTop ) + "px" ); 179 } 180 181 } 182 }; 183 184 185 // init ------------------------------------------------ 186 187 var init = function(){ 188 189 windowH = $(window).height(); 190 191 192 var initElement = function(){ 193 194 var size = imageSize( el ); 195 196 el.removeAttr( 'style' ).css({ 197 'width' : size[0], 198 'height' : size[1] 199 }); 200 201 mfnSetup.translate(el, size[2] + "px", size[3] + "px"); 202 203 return { 204 'width' : size[0], 205 'height' : size[1], 206 'left' : size[2], 207 'top' : size[3] 208 }; 209 }; 210 211 element = initElement(); 212 213 214 var initParent = function(){ 215 216 var min = parent.offset().top - $(window).height(); 217 var max = parent.offset().top + $(parent).outerHeight(); 218 219 return { 220 'min' : min, 221 'max' : max, 222 'height' : max - min 223 }; 224 }; 225 226 parentPos = initParent(); 227 }; 228 229 230 // reload ------------------------------------------------ 231 232 var reload = function(){ 233 234 setTimeout( function(){ 235 init(); 236 parallax(); 237 }, 50); 238 239 }; 240 241 242 // .bind() ------------------------------------------------ 243 244 $(window).bind( 'load resize', reload ); 245 $(window).bind( 'scroll', parallax ); 246 247 }; 248 249 250 /* ------------------------------------------------------------------------ 251 * 252 * $(document).ready 253 * 254 * --------------------------------------------------------------------- */ 255 256 $( document ).ready( function(){ 257 258 if( $(".mfn-parallax").length ) { 259 260 $(".mfn-parallax").each( function(){ 261 $(this).mfnParallax(); 262 }); 263 264 } 265 266 }); 267 268 269})(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.