1'use strict'; 2 3(function ($) { 4 $.fn.tilt = function (options) { 5 6 /** 7 * RequestAnimationFrame 8 */ 9 var requestTick = function requestTick() { 10 if (this.ticking) return; 11 requestAnimationFrame(updateTransforms.bind(this)); 12 this.ticking = true; 13 }; 14 15 /** 16 * Bind mouse movement evens on instance 17 */ 18 var bindEvents = function bindEvents() { 19 var _this = this; 20 $(this).on('mousemove', mouseMove); 21 $(this).on('mouseenter', mouseEnter); 22 if (this.settings.reset) $(this).on('mouseleave', mouseLeave); 23 if (this.settings.glare) $(window).on('resize', updateGlareSize.bind(_this)); 24 }; 25 26 /** 27 * Set transition only on mouse leave and mouse enter so it doesn't influence mouse move transforms 28 */ 29 var setTransition = function setTransition() { 30 var _this2 = this; 31 32 if (this.timeout !== undefined) clearTimeout(this.timeout); 33 $(this).css({ 'transition': this.settings.speed + 'ms ' + this.settings.easing }); 34 if (this.settings.glare) this.glareElement.css({ 'transition': 'opacity ' + this.settings.speed + 'ms ' + this.settings.easing }); 35 this.timeout = setTimeout(function () { 36 $(_this2).css({ 'transition': '' }); 37 if (_this2.settings.glare) _this2.glareElement.css({ 'transition': '' }); 38 }, this.settings.speed); 39 }; 40 41 /** 42 * When user mouse enters tilt element 43 */ 44 var mouseEnter = function mouseEnter(event) { 45 this.ticking = false; 46 $(this).css({ 'will-change': 'transform' }); 47 setTransition.call(this); 48 49 // Trigger change event 50 $(this).trigger("tilt.mouseEnter"); 51 }; 52 53 /** 54 * Return the x,y position of the mouse on the tilt element 55 * @returns {{x: *, y: *}} 56 */ 57 var getMousePositions = function getMousePositions(event) { 58 if (typeof event === "undefined") { 59 event = { 60 pageX: $(this).offset().left + $(this).outerWidth() / 2, 61 pageY: $(this).offset().top + $(this).outerHeight() / 2 62 }; 63 } 64 return { x: event.pageX, y: event.pageY }; 65 }; 66 67 /** 68 * When user mouse moves over the tilt element 69 */ 70 var mouseMove = function mouseMove(event) { 71 this.mousePositions = getMousePositions(event); 72 requestTick.call(this); 73 }; 74 75 /** 76 * When user mouse leaves tilt element 77 */ 78 var mouseLeave = function mouseLeave() { 79 setTransition.call(this); 80 this.reset = true; 81 requestTick.call(this); 82 83 // Trigger change event 84 $(this).trigger("tilt.mouseLeave"); 85 }; 86 87 /** 88 * Get tilt values 89 * 90 * @returns {{x: tilt value, y: tilt value}} 91 */ 92 var getValues = function getValues() { 93 var width = $(this).outerWidth(); 94 var height = $(this).outerHeight(); 95 var left = $(this).offset().left; 96 var top = $(this).offset().top; 97 var percentageX = (this.mousePositions.x - left) / width; 98 var percentageY = (this.mousePositions.y - top) / height; 99 // x or y position inside instance / width of instance = percentage of position inside instance * the max tilt value 100 var tiltX = (this.settings.maxTilt / 2 - percentageX * this.settings.maxTilt).toFixed(2); 101 var tiltY = (percentageY * this.settings.maxTilt - this.settings.maxTilt / 2).toFixed(2); 102 // angle 103 var angle = Math.atan2(this.mousePositions.x - (left + width / 2), -(this.mousePositions.y - (top + height / 2))) * (180 / Math.PI); 104 // Return x & y tilt values 105 return { tiltX: tiltX, tiltY: tiltY, 'percentageX': percentageX * 100, 'percentageY': percentageY * 100, angle: angle }; 106 }; 107 108 /** 109 * Update tilt transforms on mousemove 110 */ 111 var updateTransforms = function updateTransforms() { 112 this.transforms = getValues.call(this); 113 114 if (this.reset) { 115 this.reset = false;
116 $(this).css('transform', 'perspective(' + this.settings.perspective + 'px) rotateX(0deg) rotateY(0deg)'); 117 118 // Rotate glare if enabled 119 if (this.settings.glare) { 120 this.glareElement.css('transform', 'rotate(180deg) translate(-50%, -50%)'); 121 this.glareElement.css('opacity', '0'); 122 } 123 124 return; 125 } else { 126 $(this).css('transform', 'perspective(' + this.settings.perspective + 'px) rotateX(' + (this.settings.axis === 'x' ? 0 : this.transforms.tiltY) + 'deg) rotateY(' + (this.settings.axis === 'y' ? 0 : this.transforms.tiltX) + 'deg) scale3d(' + this.settings.scale + ',' + this.settings.scale + ',' + this.settings.scale + ')'); 127 128 // Rotate glare if enabled 129 if (this.settings.glare) { 130 this.glareElement.css('transform', 'rotate(' + this.transforms.angle + 'deg) translate(-50%, -50%)'); 131 this.glareElement.css('opacity', '' + this.transforms.percentageY * this.settings.maxGlare / 100); 132 } 133 } 134 135 // Trigger change event 136 $(this).trigger("change", [this.transforms]); 137 138 this.ticking = false; 139 }; 140 141 /** 142 * Prepare elements 143 */ 144 var prepareGlare = function prepareGlare() { 145 var glarePrerender = this.settings.glarePrerender; 146 147 // If option pre-render is enabled we assume all html/css is present for an optimal glare effect. 148 if (!glarePrerender) 149 // Create glare element 150 $(this).append('<div class="js-tilt-glare"><div class="js-tilt-glare-inner"></div></div>'); 151 152 // Store glare selector if glare is enabled 153 this.glareElementWrapper = $(this).find(".js-tilt-glare"); 154 this.glareElement = $(this).find(".js-tilt-glare-inner"); 155 156 // Remember? We assume all css is already set, so just return 157 if (glarePrerender) return; 158 159 // Abstracted re-usable glare styles 160 var stretch = { 161 'position': 'absolute', 162 'top': '0', 163 'left': '0', 164 'width': '100%', 165 'height': '100%' 166 }; 167 168 // Style glare wrapper 169 this.glareElementWrapper.css(stretch).css({ 170 'overflow': 'hidden' 171 }); 172 173 // Style glare element 174 this.glareElement.css({ 175 'position': 'absolute', 176 'top': '50%', 177 'left': '50%', 178 'pointer-events': 'none', 179 'background-image': 'linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)', 180 'width': '' + $(this).outerWidth() * 2, 181 'height': '' + $(this).outerWidth() * 2, 182 'transform': 'rotate(180deg) translate(-50%, -50%)', 183 'transform-origin': '0% 0%', 184 'opacity': '0' 185 }); 186 }; 187 188 /** 189 * Update glare on resize 190 */ 191 var updateGlareSize = function updateGlareSize() { 192 this.glareElement.css({ 193 'width': '' + $(this).outerWidth() * 2, 194 'height': '' + $(this).outerWidth() * 2 195 }); 196 }; 197 198 /** 199 * Public methods 200 */ 201 $.fn.tilt.destroy = function () { 202 $(this).each(function () { 203 $(this).find('.js-tilt-glare').remove(); 204 $(this).css({ 'will-change': '', 'transform': '' }); 205 $(this).off('mousemove mouseenter mouseleave'); 206 }); 207 }; 208 209 $.fn.tilt.getValues = function () { 210 var results = []; 211 $(this).each(function () { 212 this.mousePositions = getMousePositions.call(this); 213 results.push(getValues.call(this)); 214 }); 215 return results; 216 }; 217 218 $.fn.tilt.reset = function () { 219 $(this).each(function () { 220 var _this3 = this; 221 222 this.mousePositions = getMousePositions.call(this); 223 this.settings = $(this).data('settings'); 224 mouseLeave.call(this); 225 setTimeout(function () { 226 _this3.reset = false;
227 }, this.settings.transition); 228 }); 229 }; 230 231 /** 232 * Loop every instance 233 */ 234 return this.each(function () { 235 var _this4 = this; 236 237 /** 238 * Default settings merged with user settings 239 * Can be set trough data attributes or as parameter. 240 * @type {*} 241 */ 242 this.settings = $.extend({ 243 maxTilt: $(this).is('[data-tilt-max]') ? $(this).data('tilt-max') : 20, 244 perspective: $(this).is('[data-tilt-perspective]') ? $(this).data('tilt-perspective') : 300, 245 easing: $(this).is('[data-tilt-easing]') ? $(this).data('tilt-easing') : 'cubic-bezier(.03,.98,.52,.99)', 246 scale: $(this).is('[data-tilt-scale]') ? $(this).data('tilt-scale') : '1', 247 speed: $(this).is('[data-tilt-speed]') ? $(this).data('tilt-speed') : '400', 248 transition: $(this).is('[data-tilt-transition]') ? $(this).data('tilt-transition') : true, 249 axis: $(this).is('[data-tilt-axis]') ? $(this).data('tilt-axis') : null, 250 reset: $(this).is('[data-tilt-reset]') ? $(this).data('tilt-reset') : true, 251 glare: $(this).is('[data-tilt-glare]') ? $(this).data('tilt-glare') : false, 252 maxGlare: $(this).is('[data-tilt-maxglare]') ? $(this).data('tilt-maxglare') : 1 253 }, options); 254 255 this.init = function () { 256 // Store settings 257 $(_this4).data('settings', _this4.settings); 258 259 // Prepare element 260 if (_this4.settings.glare) prepareGlare.call(_this4); 261 262 // Bind events 263 bindEvents.call(_this4); 264 }; 265 266 // Init 267 this.init(); 268 }); 269 }; 270 271 /** 272 * Auto load 273 */ 274 $('[data-tilt]').tilt(); 275})(jQuery); 276//# sourceMappingURL=tilt.jquery.js.map
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.