1/* 2 * Horparallax 3 * 4 * @version 1.0 5 * 6 * Copyright 2013, UpSolution 7 */ 8 9!function($){ 10 11 /* 12 ********* Horparallax class definition ***********/ 13 var Horparallax = function(container, options){ 14 // Context 15 var that = this; 16 this.$window = $(window); 17 this.container = $(container); 18 // Apply options 19 if (container.onclick != undefined){ 20 options = $.extend({}, container.onclick() || {}, typeof options == 'object' && options); 21 this.container.removeProp('onclick'); 22 } 23 options = $.extend({}, $.fn.horparallax.defaults, typeof options == 'object' && options); 24 this.options = options; 25 this.bg = this.container.find(options.bgSelector); 26 // Count sizes 27 this.containerWidth = this.container.outerWidth(); 28 this.containerHeight = this.container.outerHeight(); 29 this.bgWidth = this.bg.outerWidth(); 30 this.windowHeight = this.$window.height(); 31 // Count frame rate 32 this._frameRate = Math.round(1000 / this.options.fps); 33 // To fix IE bug that handles mousemove before mouseenter 34 this.mouseInside = false; 35 // Mouse events for desktop browsers 36 if ( ! ('ontouchstart' in window) || ! ('DeviceOrientationEvent' in window)){ 37 this.container 38 .mouseenter(function(e){ 39 // To fix IE bug that handles mousemove before mouseenter 40 that.mouseInside = true; 41 var offset = that.container.offset(), 42 coord = (e.pageX - offset.left) / that.containerWidth; 43 that.cancel(); 44 that._hoverAnimation = true; 45 that._hoverFrom = that.now; 46 that._hoverTo = coord; 47 that.start(that._hoverTo); 48 }) 49 .mousemove(function(e){ 50 // To fix IE bug that handles mousemove before mouseenter 51 if ( ! that.mouseInside) return; 52 // Reducing processor load for too frequent event calls 53 if (that._lastFrame + that._frameRate > Date.now()) return; 54 var offset = that.container.offset(), 55 coord = (e.pageX - offset.left) / that.containerWidth; 56 // Handle hover animation 57 if (that._hoverAnimation){ 58 that._hoverTo = coord; 59 return; 60 } 61 that.set(coord); 62 that._lastFrame = Date.now(); 63 }) 64 .mouseleave(function(e){ 65 that.mouseInside = false;
66 that.cancel(); 67 that.start(that.options.basePoint); 68 }); 69 } 70 // Handle resize 71 this.$window.resize(function(){ that.handleResize(); }); 72 // Device orientation events for touch devices 73 this._orientationDriven = ('ontouchstart' in window && 'DeviceOrientationEvent' in window); 74 if (this._orientationDriven){ 75 // Check if container is visible 76 this._checkIfVisible(); 77 window.addEventListener("deviceorientation", function(e){ 78 // Reducing processor load for too frequent event calls 79 if ( ! that.visible || that._lastFrame + that._frameRate > Date.now()) return; 80 that._deviceOrientationChange(e); 81 that._lastFrame = Date.now(); 82 }); 83 this.$window.resize(function(){ that._checkIfVisible(); }); 84 this.$window.scroll(function(){ that._checkIfVisible(); }); 85 } 86 // Set to basepoint 87 this.set(this.options.basePoint); 88 this._lastFrame = Date.now(); 89 }; 90 91 Horparallax.prototype = { 92 93 /** 94 * Event to fire on deviceorientation change 95 * @private 96 */ 97 _deviceOrientationChange: function(e){ 98 var gamma = e.gamma, 99 beta = e.beta, 100 x, y; 101 switch (window.orientation){ 102 case -90: 103 beta = Math.max(-45, Math.min(45, beta)); 104 x = (beta + 45) / 90; 105 break; 106 case 90: 107 beta = Math.max(-45, Math.min(45, beta)); 108 x = (45 - beta) / 90; 109 break; 110 case 180: 111 gamma = Math.max(-45, Math.min(45, gamma)); 112 x = (gamma + 45) / 90; 113 break; 114 case 0: 115 default: 116 // Upside down 117 if (gamma < -90 || gamma > 90) gamma = Math.abs(e.gamma)/e.gamma * (180 - Math.abs(e.gamma)); 118 gamma = Math.max(-45, Math.min(45, gamma)); 119 x = (45 - gamma) / 90; 120 break; 121 } 122 this.set(x); 123 }, 124 125 /** 126 * Handle container resize 127 */ 128 handleResize: function() 129 { 130 this.containerWidth = this.container.outerWidth(); 131 this.containerHeight = this.container.outerHeight(); 132 this.bgWidth = this.bg.outerWidth(); 133 this.windowHeight = this.$window.height(); 134 this.set(this.now); 135 }, 136 137 /** 138 * Update container visibility status (to prevent unnessesary rendering) 139 * @private 140 */ 141 _checkIfVisible: function() 142 { 143 var scrollTop = this.$window.scrollTop(), 144 containerTop = this.container.offset().top; 145 this.visible = (containerTop + this.containerHeight > scrollTop && containerTop < scrollTop + this.windowHeight); 146 }, 147 148 149 /** 150 * Render horparallax frame. 151 * @param {Array} x is ranged in [0, 1] 152 */ 153 set: function(x) 154 { 155 this.bg.css('left', (this.containerWidth - this.bgWidth) * x); 156 this.now = x; 157 return this; 158 }, 159 160 /** 161 * Step value computing function, read more at http://mootools.net/docs/core/Fx/Fx 162 * @param {Number} from 163 * @param {Number} to 164 * @param {Number} delta 165 * @return {Number} 166 */ 167 compute: function(from, to, delta) 168 { 169 if (this._hoverAnimation) return (this._hoverTo - this._hoverFrom) * delta + this._hoverFrom; 170 return (to - from) * delta + from; 171 }, 172 173 /** 174 * Start animation to certain point 175 * @param {Array} to 176 * @return {Horparallax} 177 */ 178 start: function(to) 179 { 180 var from = this.now, 181 that = this; 182 this.container 183 .css('delta', 0) 184 .animate({ 185 delta: 1 186 }, { 187 duration: this.options.duration, 188 easing: this.options.easing, 189 complete: function(){ 190 that._hoverAnimation = false; 191 }, 192 step: function(delta){ 193 that.set(that.compute(from, to, delta)); 194 }, 195 queue: false 196 }); 197 return this; 198 }, 199 200 /** 201 * Cancel animation 202 * @return {Horparallax} 203 */ 204 cancel: function() 205 { 206 this._hoverAnimation = false; 207 this.container.stop(true, false); 208 return this; 209 } 210 211 212 }; 213 214 // EaseOutElastic easing 215 if ($.easing.easeOutElastic == undefined){ 216 /** 217 * Original function by George McGinley Smith 218 * @link http://gsgd.co.uk/sandbox/jquery/easing/ 219 */ 220 $.easing.easeOutElastic = function (x, t, b, c, d) { 221 var s = 1.70158, p = 0, a = c; 222 if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; 223 if (a < Math.abs(c)) { a=c; var s=p/4; } 224 else var s = p/(2*Math.PI) * Math.asin (c/a); 225 return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; 226 }; 227 } 228 229 $.fn.horparallax = function(options){ 230 return this.each(function(){ 231 var $this = $(this), 232 data = $this.data('horparallax'); 233 if ( ! data) $this.data('horparallax', (data = new Horparallax(this, options))) 234 }); 235 }; 236 237 $.fn.horparallax.defaults = { 238 /** 239 * @var {Number} Frame per second limit for rendering 240 */ 241 fps: 60, 242 243 /** 244 * @var {Number} Point for basic position (after the cursor moves out of the container) 245 */ 246 basePoint: .5, 247 248 /** 249 * @var {Number} Return to base point duration 250 */ 251 duration: 500, 252 253 /** 254 * @var {String}
254 Background layer selector 255 */ 256 bgSelector: '.l-submain-bg', 257 258 /** 259 * @var {Function} Returning-to-basepoint easing 260 */ 261 easing: 'swing'// 'easeOutElastic' 262 }; 263 264 $.fn.horparallax.Constructor = Horparallax; 265 266}(jQuery); 267
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.