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 w = imageW; 145 h = imageH; 146 147 } 148 149 } else { 150 151 w = parentW; 152 h = imageH / diff; 153 154 } 155 156 l = ( parentW - w ) / 2; 157 t = ( parentH - h ) / 2; 158 159 return [w, h, l, t]; 160 } 161 162 163 // parallax ------------------------------------------------ 164 165 var parallax = function(){ 166 167 var scrollTop = $(window).scrollTop(), 168 scrollDiff, ratio, translateTop; 169 170 if( parentPos !== undefined ){ 171 172 if( scrollTop >= parentPos.min && scrollTop <= parentPos.max ) { 173 174 scrollDiff = scrollTop - parentPos.min; 175 ratio = scrollDiff / parentPos.height; 176 177 translateTop = windowH + ( ratio * speed ) - scrollDiff - ( speed * ( windowH / parentPos.height ) ) ; 178 179 mfnSetup.translate( el, element.left + "px", -Math.round( translateTop ) + "px" ); 180 } 181 182 } 183 }; 184 185 186 // init ------------------------------------------------ 187 188 var init = function(){ 189 190 windowH = $(window).height(); 191 192 193 var initElement = function () { 194 195 var size = imageSize( el ); 196 197 el.removeAttr('style').css({ 198 'width' : size[0], 199 'height' : size[1] 200 }); 201 202 mfnSetup.translate(el, size[2] + "px", size[3] + "px"); 203 204 return { 205 'width' : size[0], 206 'height' : size[1], 207 'left' : size[2], 208 'top' : size[3] 209 }; 210 }; 211 212 element = initElement(); 213 214 215 var initParent = function () { 216 217 var min = parent.offset().top - $(window).height(); 218 var max = parent.offset().top + $(parent).outerHeight(); 219 220 return { 221 'min' : min, 222 'max' : max, 223 'height' : max - min 224 }; 225 }; 226 227 parentPos = initParent(); 228 }; 229 230 231 // reload ------------------------------------------------ 232 233 var reload = function () { 234 235 setTimeout(function () { 236 init(); 237 parallax(); 238 }, 200); 239 240 }; 241 242 243 // .bind() ------------------------------------------------ 244 245 $(window).bind('load resize', reload); 246 $(window).bind('scroll', parallax); 247 248 }; 249 250 251 /* ------------------------------------------------------------------------ 252 * 253 * $(document).ready 254 * 255 * --------------------------------------------------------------------- */ 256 257 $(document).ready(function() { 258 259 if( $(".mfn-parallax").length ) { 260 261 $(".mfn-parallax").each( function(){ 262 $(this).mfnParallax(); 263 }); 264 265 } 266 267 }); 268 269 270})(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.