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