jquery.parallax.min.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. ! function(t, i, e, s) {
  2. "use strict";
  3. function o(i, e) {
  4. this.element = i, this.$context = t(i).data("api", this), this.$layers = this.$context.find(".layer");
  5. var s = {
  6. calibrateX: this.$context.data("calibrate-x") || null,
  7. calibrateY: this.$context.data("calibrate-y") || null,
  8. invertX: this.$context.data("invert-x") || null,
  9. invertY: this.$context.data("invert-y") || null,
  10. limitX: parseFloat(this.$context.data("limit-x")) || null,
  11. limitY: parseFloat(this.$context.data("limit-y")) || null,
  12. scalarX: parseFloat(this.$context.data("scalar-x")) || null,
  13. scalarY: parseFloat(this.$context.data("scalar-y")) || null,
  14. frictionX: parseFloat(this.$context.data("friction-x")) || null,
  15. frictionY: parseFloat(this.$context.data("friction-y")) || null,
  16. originX: parseFloat(this.$context.data("origin-x")) || null,
  17. originY: parseFloat(this.$context.data("origin-y")) || null
  18. };
  19. for (var o in s) null === s[o] && delete s[o];
  20. t.extend(this, r, e, s), this.calibrationTimer = null, this.calibrationFlag = !0, this.enabled = !1, this.depths = [], this.raf = null, this.bounds = null, this.ex = 0, this.ey = 0, this.ew = 0, this.eh = 0, this.ecx = 0, this.ecy = 0, this.erx = 0, this.ery = 0, this.cx = 0, this.cy = 0, this.ix = 0, this.iy = 0, this.mx = 0, this.my = 0, this.vx = 0, this.vy = 0, this.onMouseMove = this.onMouseMove.bind(this), this.onDeviceOrientation = this.onDeviceOrientation.bind(this), this.onOrientationTimer = this.onOrientationTimer.bind(this), this.onCalibrationTimer = this.onCalibrationTimer.bind(this), this.onAnimationFrame = this.onAnimationFrame.bind(this), this.onWindowResize = this.onWindowResize.bind(this), this.initialise()
  21. }
  22. var n = "parallax",
  23. a = 30,
  24. r = {
  25. relativeInput: !1,
  26. clipRelativeInput: !1,
  27. calibrationThreshold: 100,
  28. calibrationDelay: 500,
  29. supportDelay: 500,
  30. calibrateX: !1,
  31. calibrateY: !0,
  32. invertX: !0,
  33. invertY: !0,
  34. limitX: !1,
  35. limitY: !1,
  36. scalarX: 10,
  37. scalarY: 10,
  38. frictionX: .1,
  39. frictionY: .1,
  40. originX: .5,
  41. originY: .5
  42. };
  43. o.prototype.transformSupport = function(t) {
  44. for (var o = e.createElement("div"), n = !1, a = null, r = !1, h = null, l = null, p = 0, c = this.vendors.length; c > p; p++)
  45. if (null !== this.vendors[p] ? (h = this.vendors[p][0] + "transform", l = this.vendors[p][1] + "Transform") : (h = "transform", l = "transform"), o.style[l] !== s) {
  46. n = !0;
  47. break
  48. } switch (t) {
  49. case "2D":
  50. r = n;
  51. break;
  52. case "3D":
  53. if (n) {
  54. var m = e.body || e.createElement("body"),
  55. u = e.documentElement,
  56. y = u.style.overflow;
  57. e.body || (u.style.overflow = "hidden", u.appendChild(m), m.style.overflow = "hidden", m.style.background = ""), m.appendChild(o), o.style[l] = "translate3d(1px,1px,1px)", a = i.getComputedStyle(o).getPropertyValue(h), r = a !== s && a.length > 0 && "none" !== a, u.style.overflow = y, m.removeChild(o)
  58. }
  59. }
  60. return r
  61. }, o.prototype.ww = null, o.prototype.wh = null, o.prototype.wcx = null, o.prototype.wcy = null, o.prototype.wrx = null, o.prototype.wry = null, o.prototype.portrait = null, o.prototype.desktop = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i), o.prototype.vendors = [null, ["-webkit-", "webkit"],
  62. ["-moz-", "Moz"],
  63. ["-o-", "O"],
  64. ["-ms-", "ms"]
  65. ], o.prototype.motionSupport = !!i.DeviceMotionEvent, o.prototype.orientationSupport = !!i.DeviceOrientationEvent, o.prototype.orientationStatus = 0, o.prototype.transform2DSupport = o.prototype.transformSupport("2D"), o.prototype.transform3DSupport = o.prototype.transformSupport("3D"), o.prototype.propertyCache = {}, o.prototype.initialise = function() {
  66. "static" === this.$context.css("position") && this.$context.css({
  67. position: "relative"
  68. }), this.accelerate(this.$context), this.updateLayers(), this.updateDimensions(), this.enable(), this.queueCalibration(this.calibrationDelay)
  69. }, o.prototype.updateLayers = function() {
  70. this.$layers = this.$context.find(".layer"), this.depths = [], this.$layers.css({
  71. position: "absolute",
  72. display: "block",
  73. left: 0,
  74. top: 0
  75. }), this.$layers.first().css({
  76. position: "relative"
  77. }), this.accelerate(this.$layers), this.$layers.each(t.proxy(function(i, e) {
  78. this.depths.push(t(e).data("depth") || 0)
  79. }, this))
  80. }, o.prototype.updateDimensions = function() {
  81. this.ww = i.innerWidth, this.wh = i.innerHeight, this.wcx = this.ww * this.originX, this.wcy = this.wh * this.originY, this.wrx = Math.max(this.wcx, this.ww - this.wcx), this.wry = Math.max(this.wcy, this.wh - this.wcy)
  82. }, o.prototype.updateBounds = function() {
  83. this.bounds = this.element.getBoundingClientRect(), this.ex = this.bounds.left, this.ey = this.bounds.top, this.ew = this.bounds.width, this.eh = this.bounds.height, this.ecx = this.ew * this.originX, this.ecy = this.eh * this.originY, this.erx = Math.max(this.ecx, this.ew - this.ecx), this.ery = Math.max(this.ecy, this.eh - this.ecy)
  84. }, o.prototype.queueCalibration = function(t) {
  85. clearTimeout(this.calibrationTimer), this.calibrationTimer = setTimeout(this.onCalibrationTimer, t)
  86. }, o.prototype.enable = function() {
  87. this.enabled || (this.enabled = !0, this.orientationSupport ? (this.portrait = null, i.addEventListener("deviceorientation", this.onDeviceOrientation), setTimeout(this.onOrientationTimer, this.supportDelay)) : (this.cx = 0, this.cy = 0, this.portrait = !1, i.addEventListener("mousemove", this.onMouseMove)), i.addEventListener("resize", this.onWindowResize), this.raf = requestAnimationFrame(this.onAnimationFrame))
  88. }, o.prototype.disable = function() {
  89. this.enabled && (this.enabled = !1, this.orientationSupport ? i.removeEventListener("deviceorientation", this.onDeviceOrientation) : i.removeEventListener("mousemove", this.onMouseMove), i.removeEventListener("resize", this.onWindowResize), cancelAnimationFrame(this.raf))
  90. }, o.prototype.calibrate = function(t, i) {
  91. this.calibrateX = t === s ? this.calibrateX : t, this.calibrateY = i === s ? this.calibrateY : i
  92. }, o.prototype.invert = function(t, i) {
  93. this.invertX = t === s ? this.invertX : t, this.invertY = i === s ? this.invertY : i
  94. }, o.prototype.friction = function(t, i) {
  95. this.frictionX = t === s ? this.frictionX : t, this.frictionY = i === s ? this.frictionY : i
  96. }, o.prototype.scalar = function(t, i) {
  97. this.scalarX = t === s ? this.scalarX : t, this.scalarY = i === s ? this.scalarY : i
  98. }, o.prototype.limit = function(t, i) {
  99. this.limitX = t === s ? this.limitX : t, this.limitY = i === s ? this.limitY : i
  100. }, o.prototype.origin = function(t, i) {
  101. this.originX = t === s ? this.originX : t, this.originY = i === s ? this.originY : i
  102. }, o.prototype.clamp = function(t, i, e) {
  103. return t = Math.max(t, i), t = Math.min(t, e)
  104. }, o.prototype.css = function(i, e, o) {
  105. var n = this.propertyCache[e];
  106. if (!n)
  107. for (var a = 0, r = this.vendors.length; r > a; a++)
  108. if (n = null !== this.vendors[a] ? t.camelCase(this.vendors[a][1] + "-" + e) : e, i.style[n] !== s) {
  109. this.propertyCache[e] = n;
  110. break
  111. } i.style[n] = o
  112. }, o.prototype.accelerate = function(t) {
  113. for (var i = 0, e = t.length; e > i; i++) {
  114. var s = t[i];
  115. this.css(s, "transform", "translate3d(0,0,0)"), this.css(s, "transform-style", "preserve-3d"), this.css(s, "backface-visibility", "hidden")
  116. }
  117. }, o.prototype.setPosition = function(t, i, e) {
  118. i += "px", e += "px", this.transform3DSupport ? this.css(t, "transform", "translate3d(" + i + "," + e + ",0)") : this.transform2DSupport ? this.css(t, "transform", "translate(" + i + "," + e + ")") : (t.style.left = i, t.style.top = e)
  119. }, o.prototype.onOrientationTimer = function() {
  120. this.orientationSupport && 0 === this.orientationStatus && (this.disable(), this.orientationSupport = !1, this.enable())
  121. }, o.prototype.onCalibrationTimer = function() {
  122. this.calibrationFlag = !0
  123. }, o.prototype.onWindowResize = function() {
  124. this.updateDimensions()
  125. }, o.prototype.onAnimationFrame = function() {
  126. this.updateBounds();
  127. var t = this.ix - this.cx,
  128. i = this.iy - this.cy;
  129. (Math.abs(t) > this.calibrationThreshold || Math.abs(i) > this.calibrationThreshold) && this.queueCalibration(0), this.portrait ? (this.mx = this.calibrateX ? i : this.iy, this.my = this.calibrateY ? t : this.ix) : (this.mx = this.calibrateX ? t : this.ix, this.my = this.calibrateY ? i : this.iy), this.mx *= this.ew * (this.scalarX / 100), this.my *= this.eh * (this.scalarY / 100), isNaN(parseFloat(this.limitX)) || (this.mx = this.clamp(this.mx, -this.limitX, this.limitX)), isNaN(parseFloat(this.limitY)) || (this.my = this.clamp(this.my, -this.limitY, this.limitY)), this.vx += (this.mx - this.vx) * this.frictionX, this.vy += (this.my - this.vy) * this.frictionY;
  130. for (var e = 0, s = this.$layers.length; s > e; e++) {
  131. var o = this.depths[e],
  132. n = this.$layers[e],
  133. a = this.vx * o * (this.invertX ? -1 : 1),
  134. r = this.vy * o * (this.invertY ? -1 : 1);
  135. this.setPosition(n, a, r)
  136. }
  137. this.raf = requestAnimationFrame(this.onAnimationFrame)
  138. }, o.prototype.onDeviceOrientation = function(t) {
  139. if (!this.desktop && null !== t.beta && null !== t.gamma) {
  140. this.orientationStatus = 1;
  141. var e = (t.beta || 0) / a,
  142. s = (t.gamma || 0) / a,
  143. o = i.innerHeight > i.innerWidth;
  144. this.portrait !== o && (this.portrait = o, this.calibrationFlag = !0), this.calibrationFlag && (this.calibrationFlag = !1, this.cx = e, this.cy = s), this.ix = e, this.iy = s
  145. }
  146. }, o.prototype.onMouseMove = function(t) {
  147. var i = t.clientX,
  148. e = t.clientY;
  149. !this.orientationSupport && this.relativeInput ? (this.clipRelativeInput && (i = Math.max(i, this.ex), i = Math.min(i, this.ex + this.ew), e = Math.max(e, this.ey), e = Math.min(e, this.ey + this.eh)), this.ix = (i - this.ex - this.ecx) / this.erx, this.iy = (e - this.ey - this.ecy) / this.ery) : (this.ix = (i - this.wcx) / this.wrx, this.iy = (e - this.wcy) / this.wry)
  150. };
  151. var h = {
  152. enable: o.prototype.enable,
  153. disable: o.prototype.disable,
  154. updateLayers: o.prototype.updateLayers,
  155. calibrate: o.prototype.calibrate,
  156. friction: o.prototype.friction,
  157. invert: o.prototype.invert,
  158. scalar: o.prototype.scalar,
  159. limit: o.prototype.limit,
  160. origin: o.prototype.origin
  161. };
  162. t.fn[n] = function(i) {
  163. var e = arguments;
  164. return this.each(function() {
  165. var s = t(this),
  166. a = s.data(n);
  167. a || (a = new o(this, i), s.data(n, a)), h[i] && a[i].apply(a, Array.prototype.slice.call(e, 1))
  168. })
  169. }
  170. }(window.jQuery || window.Zepto, window, document),
  171. function() {
  172. for (var t = 0, i = ["ms", "moz", "webkit", "o"], e = 0; e < i.length && !window.requestAnimationFrame; ++e) window.requestAnimationFrame = window[i[e] + "RequestAnimationFrame"], window.cancelAnimationFrame = window[i[e] + "CancelAnimationFrame"] || window[i[e] + "CancelRequestAnimationFrame"];
  173. window.requestAnimationFrame || (window.requestAnimationFrame = function(i) {
  174. var e = (new Date).getTime(),
  175. s = Math.max(0, 16 - (e - t)),
  176. o = window.setTimeout(function() {
  177. i(e + s)
  178. }, s);
  179. return t = e + s, o
  180. }), window.cancelAnimationFrame || (window.cancelAnimationFrame = function(t) {
  181. clearTimeout(t)
  182. })
  183. }();