diff --git a/.travis.yml b/.travis.yml old mode 100644 new mode 100755 index 86ee4f5..e56d91f --- a/.travis.yml +++ b/.travis.yml @@ -1,3 +1,3 @@ language: node_js node_js: - - 4.2.6 \ No newline at end of file + - 4.8.0 \ No newline at end of file diff --git a/demo/index.html b/demo/index.html index 6962365..e305df2 100644 --- a/demo/index.html +++ b/demo/index.html @@ -10,14 +10,29 @@
-
+

+
- - +
+ + + - \ No newline at end of file + + diff --git a/dest/tilt.jquery.js b/dest/tilt.jquery.js index 1726d85..a6dca60 100644 --- a/dest/tilt.jquery.js +++ b/dest/tilt.jquery.js @@ -30,6 +30,8 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol })(function ($) { $.fn.tilt = function (options) { + var has_touch = 'ontouchstart' in document.documentElement; + /** * RequestAnimationFrame */ @@ -44,9 +46,23 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol */ var bindEvents = function bindEvents() { var _this = this; - $(this).on('mousemove', mouseMove); - $(this).on('mouseenter', mouseEnter); - if (this.settings.reset) $(this).on('mouseleave', mouseLeave); + + if (has_touch) { + // For Mobile + // Add support for accelerometeron mobile + window.addEventListener('devicemotion', deviceMotionHandler.bind(this), false); + + this.phonePositions = { x: 0.0, y: 0.0 }; + + this.ticking = false; + $(this).css({ 'will-change': 'transform' }); + setTransition.call(this); + } else { + $(this).on('mousemove', mouseMove); + $(this).on('mouseenter', mouseEnter); + if (this.settings.reset) $(this).on('mouseleave', mouseLeave); + } + if (this.settings.glare) $(window).on('resize', updateGlareSize.bind(_this)); }; @@ -99,6 +115,16 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol requestTick.call(this); }; + var deviceMotionHandler = function deviceMotionHandler(event) { + var accX = Math.round(event.accelerationIncludingGravity.x * 10) / 10; + var accY = Math.round(event.accelerationIncludingGravity.y * 10) / 10; + var newX = accX / 10; + var newY = accY / 10; + + this.phonePositions = { x: newX, y: newY }; + requestTick.call(this); + }; + /** * When user mouse leaves tilt element */ @@ -121,13 +147,29 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol var height = $(this).outerHeight(); var left = $(this).offset().left; var top = $(this).offset().top; - var percentageX = (this.mousePositions.x - left) / width; - var percentageY = (this.mousePositions.y - top) / height; - // x or y position inside instance / width of instance = percentage of position inside instance * the max tilt value - var tiltX = (this.settings.maxTilt / 2 - percentageX * this.settings.maxTilt).toFixed(2); - var tiltY = (percentageY * this.settings.maxTilt - this.settings.maxTilt / 2).toFixed(2); + + var percentageX, percentageY; + var tiltX, tiltY; + var angle; + + var maxTilt; + + if (has_touch) { + maxTilt = this.settings.maxTilt * 4.0; + percentageX = 1.0 - (this.phonePositions.x + 1) / 2.0; + percentageY = (this.phonePositions.y + 1) / 2.0; + } else { + maxTilt = this.settings.maxTilt; + percentageX = (this.mousePositions.x - left) / width; + percentageY = (this.mousePositions.y - top) / height; + } + + //tilt + tiltX = (maxTilt / 2 - percentageX * maxTilt).toFixed(2); + tiltY = (percentageY * maxTilt - maxTilt / 2).toFixed(2); // angle - var angle = Math.atan2(this.mousePositions.x - (left + width / 2), -(this.mousePositions.y - (top + height / 2))) * (180 / Math.PI); + angle = Math.atan2(0.5 - percentageX, percentageY - 0.5) * (180 / Math.PI); + // Return x & y tilt values return { tiltX: tiltX, tiltY: tiltY, 'percentageX': percentageX * 100, 'percentageY': percentageY * 100, angle: angle }; }; diff --git a/dest/tilt.jquery.js.map b/dest/tilt.jquery.js.map index 9004496..51c406c 100644 --- a/dest/tilt.jquery.js.map +++ b/dest/tilt.jquery.js.map @@ -1 +1 @@ -{"version":3,"sources":["tilt.jquery.js"],"names":["factory","define","amd","module","exports","root","jQuery","undefined","window","require","$","fn","tilt","options","requestTick","ticking","requestAnimationFrame","updateTransforms","bind","bindEvents","_this","on","mouseMove","mouseEnter","settings","reset","mouseLeave","glare","updateGlareSize","setTransition","timeout","clearTimeout","css","speed","easing","glareElement","setTimeout","event","call","trigger","getMousePositions","pageX","offset","left","outerWidth","pageY","top","outerHeight","x","y","mousePositions","getValues","width","height","percentageX","percentageY","tiltX","maxTilt","toFixed","tiltY","angle","Math","atan2","PI","transforms","perspective","disableAxis","scale","maxGlare","prepareGlare","glarePrerender","append","glareElementWrapper","find","stretch","destroy","each","remove","off","results","push","data","transition","extend","is","axis","console","warn","init"],"mappings":"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","file":"tilt.jquery.js","sourcesContent":["(function (factory) {\n if (typeof define === 'function' && define.amd) {\n // AMD. Register as an anonymous module.\n define(['jquery'], factory);\n } else if (typeof module === 'object' && module.exports) {\n // Node/CommonJS\n module.exports = function( root, jQuery ) {\n if ( jQuery === undefined ) {\n // require('jQuery') returns a factory that requires window to\n // build a jQuery instance, we normalize how we use modules\n // that require this pattern but the window provided is a noop\n // if it's defined (how jquery works)\n if ( typeof window !== 'undefined' ) {\n jQuery = require('jquery');\n }\n else {\n jQuery = require('jquery')(root);\n }\n }\n factory(jQuery);\n return jQuery;\n };\n } else {\n // Browser globals\n factory(jQuery);\n }\n}(function ($) {\n $.fn.tilt = function (options) {\n\n /**\n * RequestAnimationFrame\n */\n const requestTick = function() {\n if (this.ticking) return;\n requestAnimationFrame(updateTransforms.bind(this));\n this.ticking = true;\n };\n\n /**\n * Bind mouse movement evens on instance\n */\n const bindEvents = function() {\n const _this = this;\n $(this).on('mousemove', mouseMove);\n $(this).on('mouseenter', mouseEnter);\n if (this.settings.reset) $(this).on('mouseleave', mouseLeave);\n if (this.settings.glare) $(window).on('resize', updateGlareSize.bind(_this));\n };\n\n /**\n * Set transition only on mouse leave and mouse enter so it doesn't influence mouse move transforms\n */\n const setTransition = function() {\n if (this.timeout !== undefined) clearTimeout(this.timeout);\n $(this).css({'transition': `${this.settings.speed}ms ${this.settings.easing}`});\n if(this.settings.glare) this.glareElement.css({'transition': `opacity ${this.settings.speed}ms ${this.settings.easing}`});\n this.timeout = setTimeout(() => {\n $(this).css({'transition': ''});\n if(this.settings.glare) this.glareElement.css({'transition': ''});\n }, this.settings.speed);\n };\n\n /**\n * When user mouse enters tilt element\n */\n const mouseEnter = function(event) {\n this.ticking = false;\n $(this).css({'will-change': 'transform'});\n setTransition.call(this);\n\n // Trigger change event\n $(this).trigger(\"tilt.mouseEnter\");\n };\n\n /**\n * Return the x,y position of the mouse on the tilt element\n * @returns {{x: *, y: *}}\n */\n const getMousePositions = function(event) {\n if (typeof(event) === \"undefined\") {\n event = {\n pageX: $(this).offset().left + $(this).outerWidth() / 2,\n pageY: $(this).offset().top + $(this).outerHeight() / 2\n };\n }\n return {x: event.pageX, y: event.pageY};\n };\n\n /**\n * When user mouse moves over the tilt element\n */\n const mouseMove = function(event) {\n this.mousePositions = getMousePositions(event);\n requestTick.call(this);\n };\n\n /**\n * When user mouse leaves tilt element\n */\n const mouseLeave = function() {\n setTransition.call(this);\n this.reset = true;\n requestTick.call(this);\n\n // Trigger change event\n $(this).trigger(\"tilt.mouseLeave\");\n };\n\n /**\n * Get tilt values\n *\n * @returns {{x: tilt value, y: tilt value}}\n */\n const getValues = function() {\n const width = $(this).outerWidth();\n const height = $(this).outerHeight();\n const left = $(this).offset().left;\n const top = $(this).offset().top;\n const percentageX = (this.mousePositions.x - left) / width;\n const percentageY = (this.mousePositions.y - top) / height;\n // x or y position inside instance / width of instance = percentage of position inside instance * the max tilt value\n const tiltX = ((this.settings.maxTilt / 2) - ((percentageX) * this.settings.maxTilt)).toFixed(2);\n const tiltY = (((percentageY) * this.settings.maxTilt) - (this.settings.maxTilt / 2)).toFixed(2);\n // angle\n const angle = Math.atan2(this.mousePositions.x - (left+width/2),- (this.mousePositions.y - (top+height/2)) )*(180/Math.PI);\n // Return x & y tilt values\n return {tiltX, tiltY, 'percentageX': percentageX * 100, 'percentageY': percentageY * 100, angle};\n };\n\n /**\n * Update tilt transforms on mousemove\n */\n const updateTransforms = function() {\n this.transforms = getValues.call(this);\n\n if (this.reset) {\n this.reset = false;\n $(this).css('transform', `perspective(${this.settings.perspective}px) rotateX(0deg) rotateY(0deg)`);\n\n // Rotate glare if enabled\n if (this.settings.glare){\n this.glareElement.css('transform', `rotate(180deg) translate(-50%, -50%)`);\n this.glareElement.css('opacity', `0`);\n }\n\n return;\n } else {\n $(this).css('transform', `perspective(${this.settings.perspective}px) rotateX(${this.settings.disableAxis === 'x' ? 0 : this.transforms.tiltY}deg) rotateY(${this.settings.disableAxis === 'y' ? 0 : this.transforms.tiltX}deg) scale3d(${this.settings.scale},${this.settings.scale},${this.settings.scale})`);\n\n // Rotate glare if enabled\n if (this.settings.glare){\n this.glareElement.css('transform', `rotate(${this.transforms.angle}deg) translate(-50%, -50%)`);\n this.glareElement.css('opacity', `${this.transforms.percentageY * this.settings.maxGlare / 100}`);\n }\n }\n\n // Trigger change event\n $(this).trigger(\"change\", [this.transforms]);\n\n this.ticking = false;\n };\n\n /**\n * Prepare elements\n */\n const prepareGlare = function () {\n const glarePrerender = this.settings.glarePrerender;\n\n // If option pre-render is enabled we assume all html/css is present for an optimal glare effect.\n if (!glarePrerender)\n // Create glare element\n $(this).append('
');\n\n // Store glare selector if glare is enabled\n this.glareElementWrapper = $(this).find(\".js-tilt-glare\");\n this.glareElement = $(this).find(\".js-tilt-glare-inner\");\n\n // Remember? We assume all css is already set, so just return\n if (glarePrerender) return;\n\n // Abstracted re-usable glare styles\n const stretch = {\n 'position': 'absolute',\n 'top': '0',\n 'left': '0',\n 'width': '100%',\n 'height': '100%',\n };\n\n // Style glare wrapper\n this.glareElementWrapper.css(stretch).css({\n 'overflow': 'hidden',\n 'pointer-events': 'none',\n });\n\n // Style glare element\n this.glareElement.css({\n 'position': 'absolute',\n 'top': '50%',\n 'left': '50%',\n 'background-image': `linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)`,\n 'width': `${$(this).outerWidth()*2}`,\n 'height': `${$(this).outerWidth()*2}`,\n 'transform': 'rotate(180deg) translate(-50%, -50%)',\n 'transform-origin': '0% 0%',\n 'opacity': '0',\n });\n\n };\n\n /**\n * Update glare on resize\n */\n const updateGlareSize = function () {\n this.glareElement.css({\n 'width': `${$(this).outerWidth()*2}`,\n 'height': `${$(this).outerWidth()*2}`,\n });\n };\n\n /**\n * Public methods\n */\n $.fn.tilt.destroy = function() {\n $(this).each(function () {\n $(this).find('.js-tilt-glare').remove();\n $(this).css({'will-change': '', 'transform': ''});\n $(this).off('mousemove mouseenter mouseleave');\n });\n };\n\n $.fn.tilt.getValues = function() {\n const results = [];\n $(this).each(function () {\n this.mousePositions = getMousePositions.call(this);\n results.push(getValues.call(this));\n });\n return results;\n };\n\n $.fn.tilt.reset = function() {\n $(this).each(function () {\n this.mousePositions = getMousePositions.call(this);\n this.settings = $(this).data('settings');\n mouseLeave.call(this);\n setTimeout(() => {\n this.reset = false;\n }, this.settings.transition);\n });\n };\n\n /**\n * Loop every instance\n */\n return this.each(function () {\n\n /**\n * Default settings merged with user settings\n * Can be set trough data attributes or as parameter.\n * @type {*}\n */\n this.settings = $.extend({\n maxTilt: $(this).is('[data-tilt-max]') ? $(this).data('tilt-max') : 20,\n perspective: $(this).is('[data-tilt-perspective]') ? $(this).data('tilt-perspective') : 300,\n easing: $(this).is('[data-tilt-easing]') ? $(this).data('tilt-easing') : 'cubic-bezier(.03,.98,.52,.99)',\n scale: $(this).is('[data-tilt-scale]') ? $(this).data('tilt-scale') : '1',\n speed: $(this).is('[data-tilt-speed]') ? $(this).data('tilt-speed') : '400',\n transition: $(this).is('[data-tilt-transition]') ? $(this).data('tilt-transition') : true,\n disableAxis: $(this).is('[data-tilt-disable-axis]') ? $(this).data('tilt-disable-axis') : null,\n axis: $(this).is('[data-tilt-axis]') ? $(this).data('tilt-axis') : null,\n reset: $(this).is('[data-tilt-reset]') ? $(this).data('tilt-reset') : true,\n glare: $(this).is('[data-tilt-glare]') ? $(this).data('tilt-glare') : false,\n maxGlare: $(this).is('[data-tilt-maxglare]') ? $(this).data('tilt-maxglare') : 1,\n }, options);\n\n // Add deprecation warning & set disableAxis to deprecated axis setting\n if(this.settings.axis !== null){\n console.warn('Tilt.js: the axis setting has been renamed to disableAxis. See https://github.com/gijsroge/tilt.js/pull/26 for more information');\n this.settings.disableAxis = this.settings.axis;\n }\n\n this.init = () => {\n // Store settings\n $(this).data('settings', this.settings);\n\n // Prepare element\n if(this.settings.glare) prepareGlare.call(this);\n\n // Bind events\n bindEvents.call(this);\n };\n\n // Init\n this.init();\n\n });\n };\n\n /**\n * Auto load\n */\n $('[data-tilt]').tilt();\n\n return true;\n}));"]} \ No newline at end of file +{"version":3,"sources":["tilt.jquery.js"],"names":["factory","define","amd","module","exports","root","jQuery","undefined","window","require","$","fn","tilt","options","has_touch","document","documentElement","requestTick","ticking","requestAnimationFrame","updateTransforms","bind","bindEvents","_this","addEventListener","deviceMotionHandler","phonePositions","x","y","css","setTransition","call","on","mouseMove","mouseEnter","settings","reset","mouseLeave","glare","updateGlareSize","timeout","clearTimeout","speed","easing","glareElement","setTimeout","event","trigger","getMousePositions","pageX","offset","left","outerWidth","pageY","top","outerHeight","mousePositions","accX","Math","round","accelerationIncludingGravity","accY","newX","newY","getValues","width","height","percentageX","percentageY","tiltX","tiltY","angle","maxTilt","toFixed","atan2","PI","transforms","perspective","disableAxis","scale","maxGlare","prepareGlare","glarePrerender","append","glareElementWrapper","find","stretch","destroy","each","remove","off","results","push","data","transition","extend","is","axis","console","warn","init"],"mappings":"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","file":"tilt.jquery.js","sourcesContent":["(function (factory) {\n if (typeof define === 'function' && define.amd) {\n // AMD. Register as an anonymous module.\n define(['jquery'], factory);\n } else if (typeof module === 'object' && module.exports) {\n // Node/CommonJS\n module.exports = function( root, jQuery ) {\n if ( jQuery === undefined ) {\n // require('jQuery') returns a factory that requires window to\n // build a jQuery instance, we normalize how we use modules\n // that require this pattern but the window provided is a noop\n // if it's defined (how jquery works)\n if ( typeof window !== 'undefined' ) {\n jQuery = require('jquery');\n }\n else {\n jQuery = require('jquery')(root);\n }\n }\n factory(jQuery);\n return jQuery;\n };\n } else {\n // Browser globals\n factory(jQuery);\n }\n}(function ($) {\n $.fn.tilt = function (options) {\n\n const has_touch = 'ontouchstart' in document.documentElement;\n\n /**\n * RequestAnimationFrame\n */\n const requestTick = function() {\n if (this.ticking) return;\n requestAnimationFrame(updateTransforms.bind(this));\n this.ticking = true;\n };\n\n /**\n * Bind mouse movement evens on instance\n */\n const bindEvents = function() {\n const _this = this;\n\n if(has_touch) {\n // For Mobile\n // Add support for accelerometeron mobile\n window.addEventListener('devicemotion', deviceMotionHandler.bind(this), false);\n\n this.phonePositions = {x: 0.0, y: 0.0};\n\n this.ticking = false;\n $(this).css({'will-change': 'transform'});\n setTransition.call(this);\n }\n else {\n $(this).on('mousemove', mouseMove);\n $(this).on('mouseenter', mouseEnter);\n if (this.settings.reset) $(this).on('mouseleave', mouseLeave);\n }\n\n if (this.settings.glare) $(window).on('resize', updateGlareSize.bind(_this));\n };\n\n /**\n * Set transition only on mouse leave and mouse enter so it doesn't influence mouse move transforms\n */\n const setTransition = function() {\n if (this.timeout !== undefined) clearTimeout(this.timeout);\n $(this).css({'transition': `${this.settings.speed}ms ${this.settings.easing}`});\n if(this.settings.glare) this.glareElement.css({'transition': `opacity ${this.settings.speed}ms ${this.settings.easing}`});\n this.timeout = setTimeout(() => {\n $(this).css({'transition': ''});\n if(this.settings.glare) this.glareElement.css({'transition': ''});\n }, this.settings.speed);\n };\n\n /**\n * When user mouse enters tilt element\n */\n const mouseEnter = function(event) {\n this.ticking = false;\n $(this).css({'will-change': 'transform'});\n setTransition.call(this);\n\n // Trigger change event\n $(this).trigger(\"tilt.mouseEnter\");\n };\n\n /**\n * Return the x,y position of the mouse on the tilt element\n * @returns {{x: *, y: *}}\n */\n const getMousePositions = function(event) {\n if (typeof(event) === \"undefined\") {\n event = {\n pageX: $(this).offset().left + $(this).outerWidth() / 2,\n pageY: $(this).offset().top + $(this).outerHeight() / 2\n };\n }\n return {x: event.pageX, y: event.pageY};\n };\n\n /**\n * When user mouse moves over the tilt element\n */\n const mouseMove = function(event) {\n this.mousePositions = getMousePositions(event);\n requestTick.call(this);\n };\n\n const deviceMotionHandler = function(event) {\n var accX = Math.round(event.accelerationIncludingGravity.x * 10) / 10;\n var accY = Math.round(event.accelerationIncludingGravity.y * 10) / 10;\n var newX = (accX / 10);\n var newY = (accY / 10);\n\n this.phonePositions = {x: newX, y: newY};\n requestTick.call(this);\n }\n\n /**\n * When user mouse leaves tilt element\n */\n const mouseLeave = function() {\n setTransition.call(this);\n this.reset = true;\n requestTick.call(this);\n\n // Trigger change event\n $(this).trigger(\"tilt.mouseLeave\");\n };\n\n /**\n * Get tilt values\n *\n * @returns {{x: tilt value, y: tilt value}}\n */\n const getValues = function() {\n const width = $(this).outerWidth();\n const height = $(this).outerHeight();\n const left = $(this).offset().left;\n const top = $(this).offset().top;\n\n var percentageX, percentageY;\n var tiltX, tiltY;\n var angle;\n\n var maxTilt;\n\n if(has_touch) {\n maxTilt = this.settings.maxTilt * 4.0;\n percentageX = 1.0 - (this.phonePositions.x + 1) / (2.0);\n percentageY = (this.phonePositions.y + 1) / (2.0);\n }\n else {\n maxTilt = this.settings.maxTilt;\n percentageX = (this.mousePositions.x - left) / width;\n percentageY = (this.mousePositions.y - top) / height;\n }\n\n //tilt\n tiltX = ((maxTilt / 2) - ((percentageX) * maxTilt)).toFixed(2);\n tiltY = (((percentageY) * maxTilt) - (maxTilt / 2)).toFixed(2);\n // angle\n angle = Math.atan2(0.5 - percentageX, percentageY - 0.5) * (180/Math.PI);\n\n // Return x & y tilt values\n return {tiltX, tiltY, 'percentageX': percentageX * 100, 'percentageY': percentageY * 100, angle};\n };\n\n /**\n * Update tilt transforms on mousemove\n */\n const updateTransforms = function() {\n this.transforms = getValues.call(this);\n\n if (this.reset) {\n this.reset = false;\n $(this).css('transform', `perspective(${this.settings.perspective}px) rotateX(0deg) rotateY(0deg)`);\n\n // Rotate glare if enabled\n if (this.settings.glare){\n this.glareElement.css('transform', `rotate(180deg) translate(-50%, -50%)`);\n this.glareElement.css('opacity', `0`);\n }\n\n return;\n } else {\n $(this).css('transform', `perspective(${this.settings.perspective}px) rotateX(${this.settings.disableAxis === 'x' ? 0 : this.transforms.tiltY}deg) rotateY(${this.settings.disableAxis === 'y' ? 0 : this.transforms.tiltX}deg) scale3d(${this.settings.scale},${this.settings.scale},${this.settings.scale})`);\n\n // Rotate glare if enabled\n if (this.settings.glare){\n this.glareElement.css('transform', `rotate(${this.transforms.angle}deg) translate(-50%, -50%)`);\n this.glareElement.css('opacity', `${this.transforms.percentageY * this.settings.maxGlare / 100}`);\n }\n }\n\n // Trigger change event\n $(this).trigger(\"change\", [this.transforms]);\n\n this.ticking = false;\n };\n\n /**\n * Prepare elements\n */\n const prepareGlare = function () {\n const glarePrerender = this.settings.glarePrerender;\n\n // If option pre-render is enabled we assume all html/css is present for an optimal glare effect.\n if (!glarePrerender)\n // Create glare element\n $(this).append('
');\n\n // Store glare selector if glare is enabled\n this.glareElementWrapper = $(this).find(\".js-tilt-glare\");\n this.glareElement = $(this).find(\".js-tilt-glare-inner\");\n\n // Remember? We assume all css is already set, so just return\n if (glarePrerender) return;\n\n // Abstracted re-usable glare styles\n const stretch = {\n 'position': 'absolute',\n 'top': '0',\n 'left': '0',\n 'width': '100%',\n 'height': '100%',\n };\n\n // Style glare wrapper\n this.glareElementWrapper.css(stretch).css({\n 'overflow': 'hidden',\n 'pointer-events': 'none',\n });\n\n // Style glare element\n this.glareElement.css({\n 'position': 'absolute',\n 'top': '50%',\n 'left': '50%',\n 'background-image': `linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)`,\n 'width': `${$(this).outerWidth()*2}`,\n 'height': `${$(this).outerWidth()*2}`,\n 'transform': 'rotate(180deg) translate(-50%, -50%)',\n 'transform-origin': '0% 0%',\n 'opacity': '0',\n });\n\n };\n\n /**\n * Update glare on resize\n */\n const updateGlareSize = function () {\n this.glareElement.css({\n 'width': `${$(this).outerWidth()*2}`,\n 'height': `${$(this).outerWidth()*2}`,\n });\n };\n\n /**\n * Public methods\n */\n $.fn.tilt.destroy = function() {\n $(this).each(function () {\n $(this).find('.js-tilt-glare').remove();\n $(this).css({'will-change': '', 'transform': ''});\n $(this).off('mousemove mouseenter mouseleave');\n });\n };\n\n $.fn.tilt.getValues = function() {\n const results = [];\n $(this).each(function () {\n this.mousePositions = getMousePositions.call(this);\n results.push(getValues.call(this));\n });\n return results;\n };\n\n $.fn.tilt.reset = function() {\n $(this).each(function () {\n this.mousePositions = getMousePositions.call(this);\n this.settings = $(this).data('settings');\n mouseLeave.call(this);\n setTimeout(() => {\n this.reset = false;\n }, this.settings.transition);\n });\n };\n\n /**\n * Loop every instance\n */\n return this.each(function () {\n\n /**\n * Default settings merged with user settings\n * Can be set trough data attributes or as parameter.\n * @type {*}\n */\n this.settings = $.extend({\n maxTilt: $(this).is('[data-tilt-max]') ? $(this).data('tilt-max') : 20,\n perspective: $(this).is('[data-tilt-perspective]') ? $(this).data('tilt-perspective') : 300,\n easing: $(this).is('[data-tilt-easing]') ? $(this).data('tilt-easing') : 'cubic-bezier(.03,.98,.52,.99)',\n scale: $(this).is('[data-tilt-scale]') ? $(this).data('tilt-scale') : '1',\n speed: $(this).is('[data-tilt-speed]') ? $(this).data('tilt-speed') : '400',\n transition: $(this).is('[data-tilt-transition]') ? $(this).data('tilt-transition') : true,\n disableAxis: $(this).is('[data-tilt-disable-axis]') ? $(this).data('tilt-disable-axis') : null,\n axis: $(this).is('[data-tilt-axis]') ? $(this).data('tilt-axis') : null,\n reset: $(this).is('[data-tilt-reset]') ? $(this).data('tilt-reset') : true,\n glare: $(this).is('[data-tilt-glare]') ? $(this).data('tilt-glare') : false,\n maxGlare: $(this).is('[data-tilt-maxglare]') ? $(this).data('tilt-maxglare') : 1,\n }, options);\n\n // Add deprecation warning & set disableAxis to deprecated axis setting\n if(this.settings.axis !== null){\n console.warn('Tilt.js: the axis setting has been renamed to disableAxis. See https://github.com/gijsroge/tilt.js/pull/26 for more information');\n this.settings.disableAxis = this.settings.axis;\n }\n\n this.init = () => {\n // Store settings\n $(this).data('settings', this.settings);\n\n // Prepare element\n if(this.settings.glare) prepareGlare.call(this);\n\n // Bind events\n bindEvents.call(this);\n };\n\n // Init\n this.init();\n\n });\n };\n\n /**\n * Auto load\n */\n $('[data-tilt]').tilt();\n\n return true;\n}));"]} \ No newline at end of file diff --git a/dest/tilt.jquery.min.js b/dest/tilt.jquery.min.js index 0173a0a..ea3f745 100644 --- a/dest/tilt.jquery.min.js +++ b/dest/tilt.jquery.min.js @@ -1 +1 @@ -"use strict";var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};!function(t){"function"==typeof define&&define.amd?define(["jquery"],t):"object"===("undefined"==typeof module?"undefined":_typeof(module))&&module.exports?module.exports=function(i,s){return void 0===s&&(s="undefined"!=typeof window?require("jquery"):require("jquery")(i)),t(s),s}:t(jQuery)}(function(t){return t.fn.tilt=function(i){var s=function(){this.ticking||(requestAnimationFrame(g.bind(this)),this.ticking=!0)},e=function(){var i=this;t(this).on("mousemove",o),t(this).on("mouseenter",a),this.settings.reset&&t(this).on("mouseleave",l),this.settings.glare&&t(window).on("resize",d.bind(i))},n=function(){var i=this;void 0!==this.timeout&&clearTimeout(this.timeout),t(this).css({transition:this.settings.speed+"ms "+this.settings.easing}),this.settings.glare&&this.glareElement.css({transition:"opacity "+this.settings.speed+"ms "+this.settings.easing}),this.timeout=setTimeout(function(){t(i).css({transition:""}),i.settings.glare&&i.glareElement.css({transition:""})},this.settings.speed)},a=function(i){this.ticking=!1,t(this).css({"will-change":"transform"}),n.call(this),t(this).trigger("tilt.mouseEnter")},r=function(i){return"undefined"==typeof i&&(i={pageX:t(this).offset().left+t(this).outerWidth()/2,pageY:t(this).offset().top+t(this).outerHeight()/2}),{x:i.pageX,y:i.pageY}},o=function(t){this.mousePositions=r(t),s.call(this)},l=function(){n.call(this),this.reset=!0,s.call(this),t(this).trigger("tilt.mouseLeave")},h=function(){var i=t(this).outerWidth(),s=t(this).outerHeight(),e=t(this).offset().left,n=t(this).offset().top,a=(this.mousePositions.x-e)/i,r=(this.mousePositions.y-n)/s,o=(this.settings.maxTilt/2-a*this.settings.maxTilt).toFixed(2),l=(r*this.settings.maxTilt-this.settings.maxTilt/2).toFixed(2),h=Math.atan2(this.mousePositions.x-(e+i/2),-(this.mousePositions.y-(n+s/2)))*(180/Math.PI);return{tiltX:o,tiltY:l,percentageX:100*a,percentageY:100*r,angle:h}},g=function(){return this.transforms=h.call(this),this.reset?(this.reset=!1,t(this).css("transform","perspective("+this.settings.perspective+"px) rotateX(0deg) rotateY(0deg)"),void(this.settings.glare&&(this.glareElement.css("transform","rotate(180deg) translate(-50%, -50%)"),this.glareElement.css("opacity","0")))):(t(this).css("transform","perspective("+this.settings.perspective+"px) rotateX("+("x"===this.settings.disableAxis?0:this.transforms.tiltY)+"deg) rotateY("+("y"===this.settings.disableAxis?0:this.transforms.tiltX)+"deg) scale3d("+this.settings.scale+","+this.settings.scale+","+this.settings.scale+")"),this.settings.glare&&(this.glareElement.css("transform","rotate("+this.transforms.angle+"deg) translate(-50%, -50%)"),this.glareElement.css("opacity",""+this.transforms.percentageY*this.settings.maxGlare/100)),t(this).trigger("change",[this.transforms]),void(this.ticking=!1))},c=function(){var i=this.settings.glarePrerender;if(i||t(this).append('
'),this.glareElementWrapper=t(this).find(".js-tilt-glare"),this.glareElement=t(this).find(".js-tilt-glare-inner"),!i){var s={position:"absolute",top:"0",left:"0",width:"100%",height:"100%"};this.glareElementWrapper.css(s).css({overflow:"hidden","pointer-events":"none"}),this.glareElement.css({position:"absolute",top:"50%",left:"50%","background-image":"linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",width:""+2*t(this).outerWidth(),height:""+2*t(this).outerWidth(),transform:"rotate(180deg) translate(-50%, -50%)","transform-origin":"0% 0%",opacity:"0"})}},d=function(){this.glareElement.css({width:""+2*t(this).outerWidth(),height:""+2*t(this).outerWidth()})};return t.fn.tilt.destroy=function(){t(this).each(function(){t(this).find(".js-tilt-glare").remove(),t(this).css({"will-change":"",transform:""}),t(this).off("mousemove mouseenter mouseleave")})},t.fn.tilt.getValues=function(){var i=[];return t(this).each(function(){this.mousePositions=r.call(this),i.push(h.call(this))}),i},t.fn.tilt.reset=function(){t(this).each(function(){var i=this;this.mousePositions=r.call(this),this.settings=t(this).data("settings"),l.call(this),setTimeout(function(){i.reset=!1},this.settings.transition)})},this.each(function(){var s=this;this.settings=t.extend({maxTilt:t(this).is("[data-tilt-max]")?t(this).data("tilt-max"):20,perspective:t(this).is("[data-tilt-perspective]")?t(this).data("tilt-perspective"):300,easing:t(this).is("[data-tilt-easing]")?t(this).data("tilt-easing"):"cubic-bezier(.03,.98,.52,.99)",scale:t(this).is("[data-tilt-scale]")?t(this).data("tilt-scale"):"1",speed:t(this).is("[data-tilt-speed]")?t(this).data("tilt-speed"):"400",transition:!t(this).is("[data-tilt-transition]")||t(this).data("tilt-transition"),disableAxis:t(this).is("[data-tilt-disable-axis]")?t(this).data("tilt-disable-axis"):null,axis:t(this).is("[data-tilt-axis]")?t(this).data("tilt-axis"):null,reset:!t(this).is("[data-tilt-reset]")||t(this).data("tilt-reset"),glare:!!t(this).is("[data-tilt-glare]")&&t(this).data("tilt-glare"),maxGlare:t(this).is("[data-tilt-maxglare]")?t(this).data("tilt-maxglare"):1},i),null!==this.settings.axis&&(console.warn("Tilt.js: the axis setting has been renamed to disableAxis. See https://github.com/gijsroge/tilt.js/pull/26 for more information"),this.settings.disableAxis=this.settings.axis),this.init=function(){t(s).data("settings",s.settings),s.settings.glare&&c.call(s),e.call(s)},this.init()})},t("[data-tilt]").tilt(),!0}); \ No newline at end of file +"use strict";var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};!function(t){"function"==typeof define&&define.amd?define(["jquery"],t):"object"===("undefined"==typeof module?"undefined":_typeof(module))&&module.exports?module.exports=function(i,s){return void 0===s&&(s="undefined"!=typeof window?require("jquery"):require("jquery")(i)),t(s),s}:t(jQuery)}(function(t){return t.fn.tilt=function(i){var s="ontouchstart"in document.documentElement,e=function(){this.ticking||(requestAnimationFrame(d.bind(this)),this.ticking=!0)},n=function(){var i=this;s?(window.addEventListener("devicemotion",l.bind(this),!1),this.phonePositions={x:0,y:0},this.ticking=!1,t(this).css({"will-change":"transform"}),a.call(this)):(t(this).on("mousemove",h),t(this).on("mouseenter",o),this.settings.reset&&t(this).on("mouseleave",c)),this.settings.glare&&t(window).on("resize",f.bind(i))},a=function(){var i=this;void 0!==this.timeout&&clearTimeout(this.timeout),t(this).css({transition:this.settings.speed+"ms "+this.settings.easing}),this.settings.glare&&this.glareElement.css({transition:"opacity "+this.settings.speed+"ms "+this.settings.easing}),this.timeout=setTimeout(function(){t(i).css({transition:""}),i.settings.glare&&i.glareElement.css({transition:""})},this.settings.speed)},o=function(i){this.ticking=!1,t(this).css({"will-change":"transform"}),a.call(this),t(this).trigger("tilt.mouseEnter")},r=function(i){return"undefined"==typeof i&&(i={pageX:t(this).offset().left+t(this).outerWidth()/2,pageY:t(this).offset().top+t(this).outerHeight()/2}),{x:i.pageX,y:i.pageY}},h=function(t){this.mousePositions=r(t),e.call(this)},l=function(t){var i=Math.round(10*t.accelerationIncludingGravity.x)/10,s=Math.round(10*t.accelerationIncludingGravity.y)/10,n=i/10;newY=s/10,this.phonePositions={x:n,y:newY},e.call(this)},c=function(){a.call(this),this.reset=!0,e.call(this),t(this).trigger("tilt.mouseLeave")},g=function(){var i,e,n,a,o,r,h=t(this).outerWidth(),l=t(this).outerHeight(),c=t(this).offset().left,g=t(this).offset().top;return s?(r=4*this.settings.maxTilt,i=1-(this.phonePositions.x+1)/2,e=(this.phonePositions.y+1)/2):(r=this.settings.maxTilt,i=(this.mousePositions.x-c)/h,e=(this.mousePositions.y-g)/l),n=(r/2-i*r).toFixed(2),a=(e*r-r/2).toFixed(2),o=Math.atan2(.5-i,e-.5)*(180/Math.PI),{tiltX:n,tiltY:a,percentageX:100*i,percentageY:100*e,angle:o}},d=function(){return this.transforms=g.call(this),this.reset?(this.reset=!1,t(this).css("transform","perspective("+this.settings.perspective+"px) rotateX(0deg) rotateY(0deg)"),void(this.settings.glare&&(this.glareElement.css("transform","rotate(180deg) translate(-50%, -50%)"),this.glareElement.css("opacity","0")))):(t(this).css("transform","perspective("+this.settings.perspective+"px) rotateX("+("x"===this.settings.disableAxis?0:this.transforms.tiltY)+"deg) rotateY("+("y"===this.settings.disableAxis?0:this.transforms.tiltX)+"deg) scale3d("+this.settings.scale+","+this.settings.scale+","+this.settings.scale+")"),this.settings.glare&&(this.glareElement.css("transform","rotate("+this.transforms.angle+"deg) translate(-50%, -50%)"),this.glareElement.css("opacity",""+this.transforms.percentageY*this.settings.maxGlare/100)),t(this).trigger("change",[this.transforms]),void(this.ticking=!1))},u=function(){var i=this.settings.glarePrerender;if(i||t(this).append('
'),this.glareElementWrapper=t(this).find(".js-tilt-glare"),this.glareElement=t(this).find(".js-tilt-glare-inner"),!i){var s={position:"absolute",top:"0",left:"0",width:"100%",height:"100%"};this.glareElementWrapper.css(s).css({overflow:"hidden","pointer-events":"none"}),this.glareElement.css({position:"absolute",top:"50%",left:"50%","background-image":"linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",width:""+2*t(this).outerWidth(),height:""+2*t(this).outerWidth(),transform:"rotate(180deg) translate(-50%, -50%)","transform-origin":"0% 0%",opacity:"0"})}},f=function(){this.glareElement.css({width:""+2*t(this).outerWidth(),height:""+2*t(this).outerWidth()})};return t.fn.tilt.destroy=function(){t(this).each(function(){t(this).find(".js-tilt-glare").remove(),t(this).css({"will-change":"",transform:""}),t(this).off("mousemove mouseenter mouseleave")})},t.fn.tilt.getValues=function(){var i=[];return t(this).each(function(){this.mousePositions=r.call(this),i.push(g.call(this))}),i},t.fn.tilt.reset=function(){t(this).each(function(){var i=this;this.mousePositions=r.call(this),this.settings=t(this).data("settings"),c.call(this),setTimeout(function(){i.reset=!1},this.settings.transition)})},this.each(function(){var s=this;this.settings=t.extend({maxTilt:t(this).is("[data-tilt-max]")?t(this).data("tilt-max"):20,perspective:t(this).is("[data-tilt-perspective]")?t(this).data("tilt-perspective"):300,easing:t(this).is("[data-tilt-easing]")?t(this).data("tilt-easing"):"cubic-bezier(.03,.98,.52,.99)",scale:t(this).is("[data-tilt-scale]")?t(this).data("tilt-scale"):"1",speed:t(this).is("[data-tilt-speed]")?t(this).data("tilt-speed"):"400",transition:!t(this).is("[data-tilt-transition]")||t(this).data("tilt-transition"),disableAxis:t(this).is("[data-tilt-disable-axis]")?t(this).data("tilt-disable-axis"):null,axis:t(this).is("[data-tilt-axis]")?t(this).data("tilt-axis"):null,reset:!t(this).is("[data-tilt-reset]")||t(this).data("tilt-reset"),glare:!!t(this).is("[data-tilt-glare]")&&t(this).data("tilt-glare"),maxGlare:t(this).is("[data-tilt-maxglare]")?t(this).data("tilt-maxglare"):1},i),null!==this.settings.axis&&(console.warn("Tilt.js: the axis setting has been renamed to disableAxis. See https://github.com/gijsroge/tilt.js/pull/26 for more information"),this.settings.disableAxis=this.settings.axis),this.init=function(){t(s).data("settings",s.settings),s.settings.glare&&u.call(s),n.call(s)},this.init()})},t("[data-tilt]").tilt(),!0}); \ No newline at end of file diff --git a/package.json b/package.json old mode 100644 new mode 100755 index 9c28aa9..9ab8025 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "postcss-reporter": "1.3.3", "postcss-scss": "0.1.8", "qunitjs": "^2.0.1", - "require-dir": "0.3.0" + "require-dir": "0.3.2" }, "dependencies": { "jquery": "^3.1.1" diff --git a/src/tilt.jquery.js b/src/tilt.jquery.js index ab7598d..28e086e 100644 --- a/src/tilt.jquery.js +++ b/src/tilt.jquery.js @@ -27,6 +27,8 @@ }(function ($) { $.fn.tilt = function (options) { + const has_touch = 'ontouchstart' in document.documentElement; + /** * RequestAnimationFrame */ @@ -41,9 +43,24 @@ */ const bindEvents = function() { const _this = this; - $(this).on('mousemove', mouseMove); - $(this).on('mouseenter', mouseEnter); - if (this.settings.reset) $(this).on('mouseleave', mouseLeave); + + if(has_touch) { + // For Mobile + // Add support for accelerometeron mobile + window.addEventListener('devicemotion', deviceMotionHandler.bind(this), false); + + this.phonePositions = {x: 0.0, y: 0.0}; + + this.ticking = false; + $(this).css({'will-change': 'transform'}); + setTransition.call(this); + } + else { + $(this).on('mousemove', mouseMove); + $(this).on('mouseenter', mouseEnter); + if (this.settings.reset) $(this).on('mouseleave', mouseLeave); + } + if (this.settings.glare) $(window).on('resize', updateGlareSize.bind(_this)); }; @@ -94,6 +111,28 @@ requestTick.call(this); }; + const deviceMotionHandler = function(event) { + var accX = Math.round(event.accelerationIncludingGravity.x * 10) / 10; + var accY = Math.round(event.accelerationIncludingGravity.y * 10) / 10; + + const oldX = this.phonePositions.x; + const oldY = this.phonePositions.y; + + //minimum thresholds for motion - ignore vibrations + const threshold = 0.1; + if (Math.abs(oldX - accX) < threshold) + accX = 0; + if (Math.abs(oldY - accY) < threshold) + accY = 0; + + //complementary filter (low-pass) - gradual changes + accX = 0.99 * accX + 0.01 * newX; + accY = 0.99 * accY + 0.01 * newY; + + this.phonePositions = {x: (accX / 10), y: (accY / 10)}; + requestTick.call(this); + }; + /** * When user mouse leaves tilt element */ @@ -116,13 +155,30 @@ const height = $(this).outerHeight(); const left = $(this).offset().left; const top = $(this).offset().top; - const percentageX = (this.mousePositions.x - left) / width; - const percentageY = (this.mousePositions.y - top) / height; - // x or y position inside instance / width of instance = percentage of position inside instance * the max tilt value - const tiltX = ((this.settings.maxTilt / 2) - ((percentageX) * this.settings.maxTilt)).toFixed(2); - const tiltY = (((percentageY) * this.settings.maxTilt) - (this.settings.maxTilt / 2)).toFixed(2); + + var percentageX, percentageY; + var tiltX, tiltY; + var angle; + + var maxTilt; + + if(has_touch) { + maxTilt = this.settings.maxTilt * 4.0; + percentageX = 1.0 - (this.phonePositions.x + 1) / (2.0); + percentageY = (this.phonePositions.y + 1) / (2.0); + } + else { + maxTilt = this.settings.maxTilt; + percentageX = (this.mousePositions.x - left) / width; + percentageY = (this.mousePositions.y - top) / height; + } + + //tilt + tiltX = ((maxTilt / 2) - ((percentageX) * maxTilt)).toFixed(2); + tiltY = (((percentageY) * maxTilt) - (maxTilt / 2)).toFixed(2); // angle - const angle = Math.atan2(this.mousePositions.x - (left+width/2),- (this.mousePositions.y - (top+height/2)) )*(180/Math.PI); + angle = Math.atan2(0.5 - percentageX, percentageY - 0.5) * (180/Math.PI); + // Return x & y tilt values return {tiltX, tiltY, 'percentageX': percentageX * 100, 'percentageY': percentageY * 100, angle}; }; @@ -302,4 +358,5 @@ $('[data-tilt]').tilt(); return true; -})); \ No newline at end of file +})); + diff --git a/yarn.lock b/yarn.lock index 333f853..a462b21 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3286,9 +3286,9 @@ request@^2.79.0: tunnel-agent "^0.6.0" uuid "^3.0.0" -require-dir@0.3.0: - version "0.3.0" - resolved "https://registry.yarnpkg.com/require-dir/-/require-dir-0.3.0.tgz#89f074a85638b07c20a4fb94c93b5db635a64781" +require-dir@0.3.2: + version "0.3.2" + resolved "https://registry.yarnpkg.com/require-dir/-/require-dir-0.3.2.tgz#c1d5c75e9fbffde9f2e6b33e383db4f594b5a6a9" require-directory@^2.1.1: version "2.1.1"