1( function( $ ) { 2 // Background Mousemove Effect 3 function hoverFlowmapDeformation() { 4 let els = $('.hover-flowmap-deformation'); 5 if(!els.length) return 6 const flowmapDeformation1 = (el) => { 7 const elWidth = $(el).attr('width') ?? $(el).outerWidth(); 8 const elHeight = $(el).attr('height') ?? $(el).outerHeight(); 9 const imgSize = [elWidth, elHeight]; 10 const vertex = ` 11 attribute vec2 uv; 12 attribute vec2 position; 13 varying vec2 vUv; 14 void main() { 15 vUv = uv; 16 gl_Position = vec4(position, 0, 1); 17 } 18 `; 19 const fragment = ` 20 precision highp float; 21 precision highp int; 22 uniform sampler2D tWater; 23 uniform sampler2D tFlow; 24 uniform float uTime; 25 varying vec2 vUv; 26 uniform vec4 res; 27 28 void main() { 29 // R and G values are velocity in the x and y direction 30 // B value is the velocity length 31 vec3 flow = texture2D(tFlow, vUv).rgb; 32 vec2 uv = .5 * gl_FragCoord.xy / res.xy ; 33 vec2 myUV = (uv - vec2(0.5))*res.zw + vec2(0.5); 34 myUV -= flow.xy * (0.15 * 0.7); 35 vec2 myUV2 = (uv - vec2(0.5))*res.zw + vec2(0.5); 36 myUV2 -= flow.xy * (0.125 * 0.7); 37 vec2 myUV3 = (uv - vec2(0.5))*res.zw + vec2(0.5); 38 myUV3 -= flow.xy * (0.10 * 0.7); 39 vec3 tex = texture2D(tWater, myUV).rgb; 40 vec3 tex2 = texture2D(tWater, myUV2).rgb; 41 vec3 tex3 = texture2D(tWater, myUV3).rgb; 42 gl_FragColor = vec4(tex.r, tex2.g, tex3.b, 1.0); 43 } 44 `; 45 const renderer = new ogl.Renderer({ dpr: 2 }); 46 const gl = renderer.gl; 47 let imgUrl = null; 48 if($(el).is('img')) { 49 $(el).after(gl.canvas); 50 imgUrl = $(el).attr('src'); 51 } else { 52 $(el).append(gl.canvas); 53 imgUrl = $(el).attr('data-image-url') || null; 54 } 55 56 let aspect = 1; 57 const mouse = new ogl.Vec2(-1); 58 const velocity = new ogl.Vec2(); 59 function resize() { 60 const elRect = $(el).get(0).getBoundingClientRect(); 61 const elWidth = elRect.width; 62 const elHeight = elRect.height; 63 let a1, a2; 64 var imageAspect = imgSize[1] / imgSize[0]; 65 if (elHeight / elWidth < imageAspect) { 66 a1 = 1; 67 a2 = elHeight / elWidth / imageAspect; 68 } else { 69 a1 = (elWidth / elHeight) * imageAspect; 70 a2 = 1; 71 } 72 mesh.program.uniforms.res.value = new ogl.Vec4( 73 elWidth, 74 elHeight, 75 a1, 76 a2 77 ); 78 renderer.setSize(elWidth, elHeight); 79 aspect = elWidth / elHeight; 80 } 81 const flowmap = new ogl.Flowmap(gl); 82 const geometry = new ogl.Geometry(gl, { 83 position: { 84 size: 2, 85 data: new Float32Array([-1, -1, 3, -1, -1, 3]) 86 }, 87 uv: { size: 2, data: new Float32Array([0, 0, 2, 0, 0, 2]) } 88 }); 89 const texture = new ogl.Texture(gl, { 90 minFilter: gl.LINEAR, 91 magFilter: gl.LINEAR 92 }); 93 const img = new Image(); 94 img.onload = () => (texture.image = img); 95 img.crossOrigin = "Anonymous"; 96 img.src = imgUrl; 97 98 let a1, a2; 99 var imageAspect = imgSize[1] / imgSize[0]; 100 if (elHeight / elWidth < imageAspect) { 101 a1 = 1; 102 a2 = elHeight / elWidth / imageAspect; 103 } else { 104 a1 = (elWidth / elHeight) * imageAspect; 105 a2 = 1; 106 } 107 108 const program = new ogl.Program(gl, { 109 vertex, 110 fragment, 111 uniforms: { 112 uTime: { value: 0 }, 113 tWater: { value: texture }, 114 res: { 115 value: new ogl.Vec4(elWidth, elHeight, a1, a2) 116 }, 117 img: { value: new ogl.Vec2(elWidth, elHeight) },
118 tFlow: flowmap.uniform 119 } 120 }); 121 const mesh = new ogl.Mesh(gl, { geometry, program }); 122 123 window.addEventListener("resize", resize, false); 124 resize(); 125 const isTouchCapable = "ontouchstart" in window; 126 if (isTouchCapable) { 127 $(el).on("touchstart", updateMouse); 128 $(el).on("touchmove", updateMouse); 129 } else { 130 $(el).on("mousemove", updateMouse); 131 } 132 133 let lastTime; 134 const lastMouse = new ogl.Vec2(); 135 136 function updateMouse(e) { 137 e.preventDefault(); 138 let mouseX, mouseY; 139 140 if (e.changedTouches && e.changedTouches.length) { 141 e.x = e.changedTouches[0].pageX; 142 e.y = e.changedTouches[0].pageY; 143 } 144 145 if (e.x === undefined) { 146 e.x = e.pageX; 147 e.y = e.pageY; 148 } 149 150 const rect = $(el).get(0).getBoundingClientRect(); 151 152 mouseX = e.pageX - (rect.left + window.scrollX); 153 mouseY = e.pageY - (rect.top + window.scrollY); 154 155 mouse.set(mouseX / rect.width, 1.0 - (mouseY / rect.height)); 156 157 if (!lastTime) { 158 lastTime = performance.now(); 159 lastMouse.set(e.x, e.y); 160 } 161 const deltaX = e.x - lastMouse.x; 162 const deltaY = e.y - lastMouse.y; 163 lastMouse.set(e.x, e.y); 164 let time = performance.now(); 165 let delta = Math.max(10.4, time - lastTime); 166 lastTime = time; 167 velocity.x = deltaX / delta; 168 velocity.y = deltaY / delta; 169 velocity.needsUpdate = true; 170 } 171 172 173 requestAnimationFrame(update); 174 function update(t) { 175 requestAnimationFrame(update); 176 if (!velocity.needsUpdate) { 177 mouse.set(-1); 178 velocity.set(0); 179 } 180 velocity.needsUpdate = false; 181 flowmap.aspect = aspect; 182 flowmap.mouse.copy(mouse); 183 flowmap.velocity.lerp(velocity, velocity.len ? 0.15 : 0.1); 184 flowmap.update(); 185 program.uniforms.uTime.value = t * 0.01; 186 renderer.render({ scene: mesh }); 187 } 188 } 189 190 const flowmapDeformation2 = (el) => { 191 const elWidth = $(el).attr('width') ?? $(el).outerWidth(); 192 const elHeight = $(el).attr('height') ?? $(el).outerHeight(); 193 const imgSize = [elWidth, elHeight]; 194 const vertex = ` 195 attribute vec2 uv; 196 attribute vec2 position; 197 varying vec2 vUv; 198 void main() { 199 vUv = uv; 200 gl_Position = vec4(position, 0, 1); 201 } 202 `; 203 const fragment = ` 204 precision highp float; 205 precision highp int; 206 uniform sampler2D tWater; 207 uniform sampler2D tFlow; 208 uniform float uTime; 209 varying vec2 vUv; 210 uniform vec4 res; 211 212 void main() { 213 // R and G values are velocity in the x and y direction 214 // B value is the velocity length 215 vec3 flow = texture2D(tFlow, vUv).rgb; 216 vec2 uv = .5 * gl_FragCoord.xy / res.xy ; 217 vec2 myUV = (uv - vec2(0.5))*res.zw + vec2(0.5); 218 myUV -= flow.xy * (0.15 * 0.7); 219 vec2 myUV2 = (uv - vec2(0.5))*res.zw + vec2(0.5); 220 myUV2 -= flow.xy * (0.125 * 0.7); 221 vec2 myUV3 = (uv - vec2(0.5))*res.zw + vec2(0.5); 222 myUV3 -= flow.xy * (0.10 * 0.7); 223 vec3 tex = texture2D(tWater, myUV).rgb; 224 vec3 tex2 = texture2D(tWater, myUV2).rgb; 225 vec3 tex3 = texture2D(tWater, myUV3).rgb; 226 gl_FragColor = vec4(tex.r, tex2.g, tex3.b, 1.0); 227 } 228 `; 229 230 const renderer = new ogl.Renderer({ dpr: 2 }); 231 const gl = renderer.gl; 232 let imgUrl = null; 233 if($(el).is('img')) { 234 $(el).after(gl.canvas); 235 imgUrl = $(el).attr('src'); 236 } else { 237 $(el).append(gl.canvas); 238 imgUrl = $(el).attr('data-image-url') || null; 239 } 240 241 242 // Variable inputs to control flowmap 243 let aspect = 1; 244 const mouse = new ogl.Vec2(-1); 245 const velocity = new ogl.Vec2(); 246 function resize() { 247 const elRect = $(el).get(0).getBoundingClientRect(); 248 const elWidth = elRect.width; 249 const elHeight = elRect.height; 250 let a1, a2; 251 var imageAspect = imgSize[1] / imgSize[0]; 252 if (elHeight / elWidth < imageAspect) { 253 a1 = 1; 254 a2 = elHeight / elWidth / imageAspect; 255 } else { 256 a1 = (elWidth / elHeight) * imageAspect; 257 a2 = 1; 258 } 259 mesh.program.uniforms.res.value = new ogl.Vec4( 260 elWidth, 261 elHeight, 262 a1, 263 a2 264 ); 265 renderer.setSize(elWidth, elHeight); 266 aspect = elWidth / elHeight; 267 } 268 const flowmap = new ogl.Flowmap(gl, { 269 falloff: 1.0, // size of the stamp, percentage of the size 270 alpha: 0.3, // opacity of the stamp 271 dissipation: 0.94 // affects the speed that the stamp fades. Closer to 1 is slower 272 }); 273 // Triangle that includes -1 to 1 range for 'position', and 0 to 1 range for 'uv'. 274 const geometry = new ogl.Geometry(gl, { 275 position: { 276 size: 2, 277 data: new Float32Array([-1, -1, 3, -1, -1, 3]) 278 }, 279 uv: { size: 2, data: new Float32Array([0, 0, 2, 0, 0, 2]) } 280 }); 281 const texture = new ogl.Texture(gl, { 282 minFilter: gl.LINEAR, 283 magFilter: gl.LINEAR 284 }); 285 const img = new Image(); 286 img.onload = () => (texture.image = img); 287 img.crossOrigin = "Anonymous"; 288 img.src = imgUrl; 289 290 let a1, a2; 291 var imageAspect = imgSize[1] / imgSize[0]; 292 if (elHeight / elWidth < imageAspect) { 293 a1 = 1; 294 a2 = elHeight / elWidth / imageAspect; 295 } else { 296 a1 = (elWidth / elHeight) * imageAspect; 297 a2 = 1; 298 } 299 300 const program = new ogl.Program(gl, { 301 vertex, 302 fragment, 303 uniforms: { 304 uTime: { value: 0 }, 305 tWater: { value: texture }, 306 res: { 307 value: new ogl.Vec4(elWidth, elHeight, a1, a2) 308 }, 309 img: { value: new ogl.Vec2(elWidth, elHeight) }, 310 // Note that the uniform is applied without using an object and value property 311 // This is because the class alternates this texture between two render targets 312 // and updates the value property after each render.
313 tFlow: flowmap.uniform 314 } 315 }); 316 const mesh = new ogl.Mesh(gl, { geometry, program }); 317 318 window.addEventListener("resize", resize, false); 319 resize(); 320 321 // Create handlers to get mouse position and velocity 322 const isTouchCapable = "ontouchstart" in window; 323 324 if (isTouchCapable) { 325 $(el).on("touchstart", updateMouse); 326 $(el).on("touchmove", updateMouse); 327 } else { 328 $(el).on("mousemove", updateMouse); 329 } 330 let lastTime; 331 const lastMouse = new ogl.Vec2(); 332 function updateMouse(e) { 333 e.preventDefault(); 334 let mouseX, mouseY; 335 336 if (e.changedTouches && e.changedTouches.length) { 337 e.x = e.changedTouches[0].pageX; 338 e.y = e.changedTouches[0].pageY; 339 } 340 341 if (e.x === undefined) { 342 e.x = e.pageX; 343 e.y = e.pageY; 344 } 345 346 const rect = $(el).get(0).getBoundingClientRect(); 347 348 mouseX = e.pageX - (rect.left + window.scrollX); 349 mouseY = e.pageY - (rect.top + window.scrollY); 350 mouse.set(mouseX / rect.width, 1.0 - (mouseY / rect.height)); 351 352 if (!lastTime) { 353 lastTime = performance.now(); 354 lastMouse.set(e.x, e.y); 355 } 356 const deltaX = e.x - lastMouse.x; 357 const deltaY = e.y - lastMouse.y; 358 lastMouse.set(e.x, e.y); 359 let time = performance.now(); 360 // Avoid dividing by 0 361 let delta = Math.max(10.4, time - lastTime); 362 lastTime = time; 363 velocity.x = deltaX / delta; 364 velocity.y = deltaY / delta; 365 // Flag update to prevent hanging velocity values when not moving 366 velocity.needsUpdate = true; 367 } 368 requestAnimationFrame(update); 369 function update(t) { 370 requestAnimationFrame(update); 371 // Reset velocity when mouse not moving 372 if (!velocity.needsUpdate) { 373 mouse.set(-1); 374 velocity.set(0); 375 } 376 velocity.needsUpdate = false; 377 // Update flowmap inputs 378 flowmap.aspect = aspect; 379 flowmap.mouse.copy(mouse); 380 // Ease velocity input, slower when fading out 381 flowmap.velocity.lerp(velocity, velocity.len ? 0.15 : 0.1); 382 flowmap.update(); 383 program.uniforms.uTime.value = t * 0.01; 384 renderer.render({ scene: mesh }); 385 } 386 } 387 388 els.each(function(i, el) { 389 if($(el).hasClass('flowmap-deformation1')) { 390 flowmapDeformation1(el) 391 }else { 392 flowmapDeformation2(el) 393 } 394 }) 395 } 396 397 function hoverTransformDirection( $scope ) { 398 let els = $scope.find('.hover-rotate3d-direction, .hover-translate3d-direction'); 399 if(!els.length) return; 400 const directions = { 0: 'top', 1: 'right', 2: 'bottom', 3: 'left' }; 401 const getDirectionKey = (ev, $node) => { 402 const offset = $node.offset(); 403 const width = $node.outerWidth(); 404 const height = $node.outerHeight(); 405 const l = ev.pageX - offset.left; 406 const t = ev.pageY - offset.top; 407 const x = (l - (width / 2) * (width > height ? (height / width) : 1)); 408 const y = (t - (height / 2) * (height > width ? (width / height) : 1)); 409 return Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4; 410 }; 411 412 const getHorizontalKey = (ev, $node) => { 413 const offset = $node.offset(); 414 const width = $node.outerWidth(); 415 const l = ev.pageX - offset.left; 416 const x = l - width / 2; 417 return x < 0 ? 3 : 1; 418 }; 419 420 const getVerticalKey = (ev, $node) => { 421 const offset = $node.offset(); 422 const height = $node.outerHeight(); 423 const t = ev.pageY - offset.top; 424 const y = t - height / 2; 425 return y < 0 ? 0 : 2; 426 }; 427 428 class Item { 429 constructor($element) { 430 this.$element = $element; 431 this.activeClass = ''; 432 this.$element.on('mouseenter', (ev) => this.update(ev, 'in')); 433 this.$element.on('mouseleave', (ev) => this.update(ev, 'out')); 434 } 435 update(ev, prefix) { 436 let itemHover = this.$element.find('.direction-item').first(); 437 if(!itemHover.length) { 438 itemHover = $('<span class="direction-item"></span>');
439 this.$element.prepend(itemHover); 440 } 441 const effectType = this.$element.hasClass('hover-rotate3d-direction') ? 'rotate3d' : 442 this.$element.hasClass('hover-translate3d-direction') ? 'translate3d' : ''; 443 if (!effectType) return; 444 let direction = this.$element.data().direction; 445 let directionClass = `${effectType}-${prefix}-${directions[getDirectionKey(ev, this.$element)]}`; 446 if(direction === 'horizontal') { 447 directionClass = `${effectType}-${prefix}-${directions[getHorizontalKey(ev, this.$element)]}` 448 } 449 if(direction === 'vertical') { 450 directionClass = `${effectType}-${prefix}-${directions[getVerticalKey(ev, this.$element)]}` 451 } 452 453 if (this.activeClass) { 454 this.$element.removeClass(this.activeClass); 455 } 456 this.activeClass = directionClass; 457 this.$element.addClass(this.activeClass); 458 } 459 } 460 $(els).each(function () { 461 new Item($(this)); 462 }); 463 } 464 465 function onHoverCircularRipple($scope) { 466 let els = $scope.find('.hover-circular-ripple'); 467 if (!els.length) return; 468 469 const update = (e, isMouseenter) => { 470 let item = $(e.currentTarget).find('.circular-ripple-item').first(); 471 if (isMouseenter && !item.length) { 472 item = $('<span class="circular-ripple-item"></span>'); 473 $(e.currentTarget).prepend(item); 474 } 475 476 const { left, top, width, height } = e.currentTarget.getBoundingClientRect(); 477 const mouseX = e.clientX - left; 478 const mouseY = e.clientY - top; 479 const distToCorners = [ 480 Math.hypot(mouseX, mouseY), 481 Math.hypot(mouseX - width, mouseY), 482 Math.hypot(mouseX, mouseY - height), 483 Math.hypot(mouseX - width, mouseY - height) 484 ]; 485 const maxRadius = Math.max(...distToCorners); 486 gsap.to(item, { 487 x: mouseX, 488 y: mouseY, 489 ease: "power2.out", 490 duration: 0.5, 491 scale: isMouseenter ? (maxRadius / 10) + 0.55 : 0, 492 }); 493 }; 494 495 els.each(function (i, el) { 496 $(el).on('mouseenter', (e) => update(e, true)); 497 $(el).on('mouseleave', (e) => update(e, false)); 498 }); 499 } 500 501 function hoverImageDistortion( $scope ) { 502 let els = $scope.find('.hover-image-distortion img'); 503 if(!els.length) return; 504 !(function (e, t) { 505 'object' == typeof exports && 'undefined' != typeof module 506 ? (module.exports = t(require('three'), require('gsap/TweenMax'))) 507 : 'function' == typeof define && define.amd 508 ? define(['three', 'gsap/TweenMax'], t) 509 : (e.hoverEffect = t(e.THREE, e.TweenMax)); 510 })(this, function (e, t) { 511 return ( 512 (t = t && t.hasOwnProperty('default') ? t.default : t), 513 function (n) { 514 function i() { 515 for (var e = arguments, t = 0; t < arguments.length; t++) if (void 0 !== e[t]) return e[t]; 516 } 517 var r = n.parent, 518 o = n.displacementImage, 519 a = n.image1, 520 s = n.image2, 521 f = i(n.imagesRatio, 1), 522 d = i(n.intensity1, n.intensity, 1), 523 l = i(n.intensity2, n.intensity, 1), 524 u = i(n.angle, Math.PI / 4), 525 v = i(n.angle1, u), 526 m = i(n.angle2, 3 * -u), 527 c = i(n.speedIn, n.speed, 1.6), 528 p = i(n.speedOut, n.speed, 1.2), 529 g = i(n.hover, !0), 530 h = i(n.easing, Expo.easeOut), 531 y = i(n.video, !1); 532 if (r) 533 if (a && s && o) { 534 var x = new e.Scene(),
535 F = new e.OrthographicCamera( 536 r.offsetWidth / -2, 537 r.offsetWidth / 2, 538 r.offsetHeight / 2, 539 r.offsetHeight / -2, 540 1, 541 1e3 542 ); 543 F.position.z = 1; 544 var w = new e.WebGLRenderer({ antialias: !1, alpha: !0 }); 545 w.setPixelRatio(2), 546 w.setClearColor(16777215, 0), 547 w.setSize(r.offsetWidth, r.offsetHeight), 548 r.appendChild(w.domElement); 549 var L = function () { 550 w.render(x, F); 551 }, 552 H = new e.TextureLoader(); 553 H.crossOrigin = ''; 554 var E, 555 W, 556 V = H.load(o, L); 557 if (((V.magFilter = V.minFilter = e.LinearFilter), y)) { 558 var M = function () { 559 requestAnimationFrame(M), w.render(x, F); 560 }; 561 M(), ((y = document.createElement('video')).autoplay = !0), (y.loop = !0), (y.src = a), y.load(); 562 var P = document.createElement('video'); 563 (P.autoplay = !0), (P.loop = !0), (P.src = s), P.load(); 564 var R = new e.VideoTexture(y), 565 T = new e.VideoTexture(P); 566 (R.magFilter = T.magFilter = e.LinearFilter), 567 (R.minFilter = T.minFilter = e.LinearFilter), 568 P.addEventListener( 569 'loadeddata', 570 function () { 571 P.play(), 572 ((T = new e.VideoTexture(P)).magFilter = e.LinearFilter), 573 (T.minFilter = e.LinearFilter), 574 (C.uniforms.texture2.value = T); 575 }, 576 !1 577 ), 578 y.addEventListener( 579 'loadeddata', 580 function () { 581 y.play(), 582 ((R = new e.VideoTexture(y)).magFilter = e.LinearFilter), 583 (R.minFilter = e.LinearFilter), 584 (C.uniforms.texture1.value = R); 585 }, 586 !1 587 ); 588 } else 589 (R = H.load(a, L)), 590 (T = H.load(s, L)), 591 (R.magFilter = T.magFilter = e.LinearFilter), 592 (R.minFilter = T.minFilter = e.LinearFilter); 593 var U = f; 594 r.offsetHeight / r.offsetWidth < U 595 ? ((E = 1), (W = r.offsetHeight / r.offsetWidth / U)) 596 : ((E = (r.offsetWidth / r.offsetHeight) * U), (W = 1)); 597 var C = new e.ShaderMaterial({ 598 uniforms: { 599 intensity1: { type: 'f', value: d }, 600 intensity2: { type: 'f', value: l }, 601 dispFactor: { type: 'f', value: 0 }, 602 angle1: { type: 'f', value: v }, 603 angle2: { type: 'f', value: m }, 604 texture1: { type: 't', value: R }, 605 texture2: { type: 't', value: T }, 606 disp: { type: 't', value: V }, 607 res: { type: 'vec4', value: new e.Vector4(r.offsetWidth, r.offsetHeight, E, W) }, 608 dpr: { type: 'f', value: window.devicePixelRatio }, 609 }, 610 vertexShader: 611 '\nvarying vec2 vUv;\nvoid main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}\n', 612 fragmentShader: 613 '\nvarying vec2 vUv;\n\nuniform float dispFactor;\nuniform float dpr;\nuniform sampler2D disp;\n\nuniform sampler2D texture1;\nuniform sampler2D texture2;\nuniform float angle1;\nuniform float angle2;\nuniform float intensity1;\nuniform float intensity2;\nuniform vec4 res;\nuniform vec2 parent;\n\nmat2 getRotM(float angle) {\n float s = sin(angle);\n float c = cos(angle);\n return mat2(c, -s, s, c);\n}\n\nvoid main() {\n vec4 disp = texture2D(disp, vUv);\n vec2 dispVec = vec2(disp.r, disp.g);\n\n vec2 uv = 0.5 * gl_FragCoord.xy / (res.xy) ;\n vec2 myUV = (uv - vec2(0.5))*res.zw + vec2(0.5);\n\n\n vec2 distortedPosition1 = myUV + getRotM(angle1) * dispVec * intensity1 * dispFactor;\n vec2 distortedPosition2 = myUV + getRotM(angle2) * dispVec * intensity2 * (1.0 - dispFactor);\n vec4 _texture1 = texture2D(texture1, distortedPosition1);\n vec4 _texture2 = texture2D(texture2, distortedPosition2);\n gl_FragColor = mix(_texture1, _texture2, dispFactor);\n}\n', 614 transparent: !0, 615 opacity: 1, 616 }), 617 b = new e.PlaneBufferGeometry(r.offsetWidth, r.offsetHeight, 1), 618 D = new e.Mesh(b, C); 619 x.add(D), 620 g && 621 (r.addEventListener('mouseenter', _), 622 r.addEventListener('touchstart', _), 623 r.addEventListener('mouseleave', z), 624 r.addEventListener('touchend', z)), 625 window.addEventListener('resize', function (t) { 626 r.offsetHeight / r.offsetWidth < U 627 ? ((E = 1), (W = r.offsetHeight / r.offsetWidth / U)) 628 : ((E = (r.offsetWidth / r.offsetHeight) * U), (W = 1)), 629 (D.material.uniforms.res.value = new e.Vector4(r.offsetWidth, r.offsetHeight, E, W)), 630 w.setSize(r.offsetWidth, r.offsetHeight), 631 L(); 632 }), 633 (this.next = _), 634 (this.previous = z); 635 } else console.warn('One or more images are missing'); 636 else console.warn('Parent missing'); 637 function _() { 638 t.to(C.uniforms.dispFactor, c, { value: 1, ease: h, onUpdate: L, onComplete: L }); 639 } 640 function z() { 641 t.to(C.uniforms.dispFactor, p, { value: 0, ease: h, onUpdate: L, onComplete: L }); 642 } 643 } 644 ); 645 }); 646 647 // app.js 648 els.each(function(i, el) { 649 const src1 = $(el).attr('src'); 650 // const src2 = $(el).attr('src');? 651 new hoverEffect({ 652 parent: $(el)[0], 653 intensity: 0.2, 654 image1: src1, 655 image2: src1, 656 displacementImage: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="28" height="49" viewBox="0 0 28 49"%3E%3Cg fill-rule="evenodd"%3E%3Cg id="hexagons" fill="%239C92AC" fill-opacity="0.4" fill-rule="nonzero"%3E%3Cpath d="M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E', 657 }); 658 }) 659 } 660 661 function onHoverButtonParallax($scope) { 662 const btns = $scope.find('.hover-button-parallax'); 663 if (!btns.length) return; 664 665 $(btns).on({ 666 mousemove(e) { 667 const rect = this.getBoundingClientRect(); 668 const x = e.clientX - rect.left; 669 const y = e.clientY - rect.top; 670 const moveX = (x - rect.width / 2) * 0.25; 671 const moveY = (y - rect.height / 2) * 0.25; 672 gsap.to(this, { 673 x: moveX, 674 y: moveY, 675 duration: 0.25, 676 ease: "power2.out", 677 }); 678 const btnText = $(this).find('.pxl-button-text'); 679 const btnIcon = $(this).find('.pxl-button-icon'); 680 if (btnText.length) { 681 gsap.to(btnText, { 682 x: moveX / 2, 683 y: moveY / 2, 684 duration: 0.25, 685 ease: "power2.out", 686 }); 687 } 688 if (btnIcon.length) { 689 gsap.to(btnIcon, { 690 x: moveX / 2, 691 y: moveY / 2, 692 duration: 0.25, 693 ease: "power2.out", 694 }); 695 } 696 }, 697 mouseleave(e) { 698 gsap.to(this, { 699 x: 0, 700 y: 0, 701 duration: 0.25, 702 ease: "power1.out", 703 }); 704 const btnText = $(this).find('.pxl-button-text'); 705 const btnIcon = $(this).find('.pxl-button-icon'); 706 if (btnText.length) { 707 gsap.to(btnText, { 708 x: 0, 709 y: 0, 710 duration: 0.25, 711 ease: "back.out", 712 }); 713 } 714 if (btnIcon.length) { 715 gsap.to(btnIcon, { 716 x: 0, 717 y: 0, 718 duration: 0.25, 719 ease: "back.out", 720 }); 721 } 722 }, 723 }); 724 } 725 726 function onHoverDistortionTransition( $scope ) { 727 let els = $scope.find('.hover-distortion-transition'); 728 if(!els.length) return; 729 els.each(function() { 730 const img = $(this).find('img').first(); 731 let src = $(img).attr('src'); 732 let width = parseInt($(img).attr('width')) ?? 1; 733 let height = parseInt($(img).attr('height')) ?? 1; 734 735 let hoverEfffect = new hoverEffect({ 736 parent: $(this)[0], 737 intensity: 0.3, 738 image1: src, 739 image2: src, 740 displacementImage: 'http://ainus.local/wp-content/uploads/2025/03/displacement-1.webp', 741 imagesRatio: height/width, 742 }); 743 }) 744 } 745 746 function onHoverBoxFollowCursor($scope) { 747 let els = $scope.find('.hover-parent'); 748 if (!els.length) return; 749 750 751 $(els).each(function () { 752 let boxContent = $(this).find('.follow-cursor'); 753 if(!boxContent.length) return; 754 let initialPos = boxContent.position(); 755 boxContent.data('original-left', initialPos.left); 756 boxContent.data('original-top', initialPos.top); 757 }); 758 759 $(els).on('mousemove', function (e) { 760 let offset = $(this).offset(); 761 let thisWidth = $(this).width(); 762 let thisHeight = $(this).height(); 763 764 let boxContent = $(this).find('.follow-cursor'); 765 if(!boxContent.length) return; 766 767 let boxWidth = boxContent.outerWidth(); 768 let boxHeight = boxContent.outerHeight(); 769 770 let mouseX = e.pageX - offset.left; 771 let mouseY = e.pageY - offset.top; 772 773 let newX = Math.min(Math.max(mouseX, boxWidth / 2), thisWidth - boxWidth / 2); 774 let newY = Math.min(Math.max(mouseY, boxHeight / 2), thisHeight - boxHeight / 2); 775 776 gsap.to(boxContent[0], { 777 left: newX, 778 top: newY, 779 duration: 0.25, 780 ease: 'none', 781 }); 782 783 }) 784 785 786 $(els).on('mouseout', function () { 787 let boxContent = $(this).find('.follow-cursor'); 788 789 if (!boxContent.length) return; 790 791 let originalLeft = boxContent.data('original-left'); 792 let originalTop = boxContent.data('original-top'); 793
794 let gsapParams = { 795 duration: 0.25, 796 ease: 'none', 797 }; 798 799 if($(this).closest('.pxl-post-layout1').length) { 800 gsapParams = { 801 left: '50%', 802 top: '50%', 803 duration: 0.25, 804 ease: 'none', 805 }; 806 } 807 808 gsap.to(boxContent[0], gsapParams); 809 }) 810 811 } 812 813 function onHoverPreviewImage($scope) { 814 let el 815 const lineEq = (y2, y1, x2, x1, currentVal) => { 816 var m = (y2 - y1) / (x2 - x1), b = y1 - m * x1; 817 return m * currentVal + b; 818 }; 819 const lerp = (a,b,n) => (1 - n) * a + n * b; 820 821 const distance = (x1,x2,y1,y2) => { 822 var a = x1 - x2; 823 var b = y1 - y2; 824 return Math.hypot(a,b); 825 }; 826 827 const getMousePosition = (e, box) => { 828 const rect = box.getBoundingClientRect(); 829 const posX = e.clientX - rect.left; 830 const posY = e.clientY - rect.top; 831 return { 832 x: posX, 833 y: posY 834 } 835 } 836 } 837 838 function onScrollRandomizedDropIn($scope) { 839 let els = $scope.find('.scroll-randomized-drop-in'); 840 els.each(function() { 841 let elParent = $(this).closest('.e-parent'); 842 let items = $(this).find('.scroll-item'); 843 if (items.length === 0) return; 844 845 items.each(function (i, item) { 846 gsap.set(item, { 847 y: i % 2 === 0 ? 300 : 600, 848 opacity: 0 849 }); 850 851 gsap.to(item, { 852 scrollTrigger: { 853 trigger: elParent[0], 854 start: 'top bottom', 855 end: 'center center', 856 scrub: true, 857 }, 858 y: 0, 859 opacity: 1, 860 duration: 1.5, 861 delay: i % 2 === 0 ? 1 : 0, 862 ease: 'power3.out' 863 }); 864 }); 865 }); 866 } 867 868 function onHoverImagePreview($scope) { 869 let els = $scope.find('.hover-image-preview'); 870 if (!els.length) return; 871 872 els.each(function(i, el) { 873 let $el = $(el); 874 let imagesGroup = $el.find('.image-preview-group'); 875 let imagesPreview = $el.find('.image-preview-item'); 876 let itemsHover = $el.find('.hover-item'); 877 878 let currentIndex = -1; 879 880 $el.on('mousemove', function (e) { 881 const offset = $el.offset(); 882 const elWidth = $el.outerWidth(); 883 const elHeight = $el.outerHeight(); 884 885 const groupWidth = imagesGroup.outerWidth(); 886 const groupHeight = imagesGroup.outerHeight(); 887 888 let mouseX = e.pageX - offset.left; 889 let mouseY = e.pageY - offset.top - groupHeight / 2; 890 891 let finalLeft; 892 893 if (mouseX + groupWidth > elWidth) { 894 finalLeft = elWidth - groupWidth; 895 } else { 896 finalLeft = mouseX; 897 } 898 899 let finalTop = Math.min(Math.max(0, mouseY), elHeight - groupHeight); 900 901 gsap.to(imagesGroup[0], { 902 top: finalTop, 903 left: finalLeft, 904 duration: 0.25, 905 ease: 'power3.out' 906 }); 907 }); 908 909 910 911 itemsHover.on('mouseenter', function () { 912 const index = itemsHover.index(this); 913 if (index === currentIndex) return; 914 915 const prevIndex = currentIndex; 916 currentIndex = index; 917 918 const newImage = $(imagesPreview[index]); 919 const oldImage = $(imagesPreview[prevIndex]); 920 921 imagesPreview.css('z-index', 0); 922 newImage.css('z-index', 2).addClass('active'); 923 924 newImage.one('transitionend', function () { 925 if (prevIndex >= 0 && prevIndex !== index) { 926 oldImage.removeClass('active'); 927 oldImage.css('z-index', 0); 928 } 929 }); 930 }); 931 }); 932 } 933 934 935 936 937 938 $( window ).on( 'elementor/frontend/init', function() { 939 hoverFlowmapDeformation() 940 // elementorFrontend.hooks.addAction( `frontend/element_ready/pxl_portfolio.default`, function( $scope ) { 941 // hoverImageDistortion($scope); 942 // }); 943 944 elementorFrontend.hooks.addAction( `frontend/element_ready/pxl_play_video.default`, function( $scope ) { 945 onHoverBoxFollowCursor($scope); 946 onHoverButtonParallax($scope) 947 }); 948 949 elementorFrontend.hooks.addAction( `frontend/element_ready/pxl_post.default`, function( $scope ) { 950 onHoverDistortionTransition( $scope ); 951 onHoverBoxFollowCursor( $scope ); 952 hoverTransformDirection($scope); 953 const onHoverGridItemLayout2 = ($scope) => { 954 let layout = $scope.find('.pxl-post-layout2'); 955 if(!layout.length) return; 956 const items = $(layout).find('.hover-image-preview'); 957 const images = $(layout).find('.image-preview'); 958 $(items).on('mousemove', function (e) { 959 const imageGroup = $(layout).find('.image-preview-group'); 960 if(!imageGroup.length) return; 961 const index = $(items).index(this); 962 const itemWidth = $(imageGroup).outerWidth(); 963 const layoutWidth = $(layout).outerWidth(); 964 965 const offset = $(layout).offset(); 966 let mouseX = e.pageX - offset.left; 967 let mouseY = e.pageY - offset.top; 968 969 $(images).removeClass('active'); 970 $(images[index]).addClass('active'); 971 gsap.to($(imageGroup)[0], { 972 top: mouseY, 973 left: mouseX, 974 duration: .25, 975 ease: 'none' 976 }) 977 }) 978 $(items).on('mouseleave', function (e) { 979 $(images).removeClass('active'); 980 }) 981 } 982 onHoverGridItemLayout2($scope); 983 }); 984 elementorFrontend.hooks.addAction( `frontend/element_ready/pxl_service.default`, function( $scope ) { 985 hoverTransformDirection($scope); 986 }); 987 elementorFrontend.hooks.addAction( `frontend/element_ready/pxl_portfolio.default`, function( $scope ) { 988 onHoverPreviewImage($scope); 989 onHoverDistortionTransition( $scope ); 990 onHoverBoxFollowCursor( $scope ) 991 onHoverImagePreview($scope) 992 }); 993 elementorFrontend.hooks.addAction( `frontend/element_ready/pxl_social_box.default`, function( $scope ) { 994 onHoverCircularRipple($scope); 995 }); 996 elementorFrontend.hooks.addAction( `frontend/element_ready/pxl_team.default`, function( $scope ) { 997 onHoverDistortionTransition($scope); 998 onScrollRandomizedDropIn($scope) 999 }); 1000 elementorFrontend.hooks.addAction( `frontend/element_ready/pxl_test.default`, function( $scope ) { 1001 onHoverDistortionTransition($scope); 1002 }); 1003 elementorFrontend.hooks.addAction( `frontend/element_ready/pxl_image.default`, function( $scope ) { 1004 onHoverDistortionTransition($scope); 1005 }); 1006 elementorFrontend.hooks.addAction( `frontend/element_ready/pxl_button.default`, function( $scope ) { 1007 onHoverButtonParallax($scope); 1008 onHoverCircularRipple($scope); 1009 }); 1010 1011 });
1012} )( jQuery ); 1013
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.