1( function( $ ) { 2 var pxl_widget_image_handler = function( $scope, $ ) { 3 /* Image Effect */ 4 if($('.pxl-image-tilt').length) { 5 $('.pxl-image-tilt').each(function () { 6 var $this = $(this); 7 VanillaTilt.init($this[0], { 8 max: 3, 9 speed: 1000, 10 glare: false, 11 "max-glare": 0.5, 12 perspective: 1400, 13 easing: "cubic-bezier(.03, .98, .52, .99)", 14 reset: true 15 }); 16 }); 17 } 18 19 /* Ink Transition Effect */ 20 const inkTriggers = [...document.querySelectorAll('.pxl-image-ink')]; 21 const pxl_controller = new ScrollMagic.Controller(); 22 inkTriggers.map(ink => { 23 const sceneInk = new ScrollMagic.Scene({ 24 triggerElement: ink, 25 triggerHook: 'onEnter', 26 }) 27 .setClassToggle(ink, 'is-active') 28 .reverse(false) 29 .addTo(pxl_controller); 30 }); 31 32 /* Scroll Load Effect */ 33 const imagesAni = document.querySelectorAll(".pxl-image-scroller img"); 34 const observer = new IntersectionObserver( 35 (entries) => { 36 entries.forEach((entry) => { 37 if (entry.isIntersecting) { 38 entry.target.style.opacity = 1; 39 entry.target.style.filter = "grayscale(0)"; 40 } else { 41 entry.target.style.opacity = 0; 42 entry.target.style.filter = "grayscale(1)"; 43 } 44 }); 45 }, 46 { 47 threshold: 0.15 48 } 49 ); 50 imagesAni.forEach((el, i) => { 51 observer.observe(el); 52 }); 53 54 }; 55 56 var pxl_widget_text_image = function( $scope, $ ) { 57 if($scope.find('.pxl-text-img-wrap').length <= 0) return; 58 var mouseX = 0, 59 mouseY = 0; 60 61 $scope.find('.pxl-text-img-wrap .pxl-item--inner').mousemove(function(e){ 62 var offset = $(this).offset(); 63 mouseX = (e.pageX - offset.left); 64 mouseY = (e.pageY - offset.top); 65 }); 66 67 $scope.find('.pxl-text-img-wrap ul>li').on("mouseenter", function() { 68 $(this).removeClass('deactive').addClass('active'); 69 var target = $(this).attr('data-target'); 70 $(this).closest('.pxl-item--inner').find(target).removeClass('deactive').addClass('active'); 71 }); 72 $scope.find('.pxl-text-img-wrap ul>li').on("mouseleave", function() { 73 $(this).addClass('deactive').removeClass('active'); 74 var target = $(this).attr('data-target'); 75 $(this).closest('.pxl-item--inner').find(target).addClass('deactive').removeClass('active'); 76 }); 77 const s = { 78 x: window.innerWidth / 2, 79 y: window.innerHeight / 2 80 }, 81 t = gsap.quickSetter($scope.find('.pxl-text-img-wrap .pxl-item--inner'), "css"), 82 e = gsap.quickSetter($scope.find('.pxl-text-img-wrap .pxl-item--inner'), "css"); 83 84 gsap.ticker.add((() => { 85 const o = .15, 86 i = 1 - Math.pow(.85, gsap.ticker.deltaRatio()); 87 s.x += (mouseX - s.x) * i, 88 s.y += (mouseY - s.y) * i, 89 t({ 90 "--pxl-mouse-x": `${s.x}px` 91 }), e({ 92 "--pxl-mouse-y": `${s.y}px` 93 }) 94 })) 95 }; 96 97 var pxl_widget_button_handler = function( $scope, $ ) { 98 /* Button Effect */ 99 var wobbleElements = document.querySelectorAll('.pxl-wobble'); 100 wobbleElements.forEach(function(el){ 101 el.addEventListener('mouseover', function(){ 102 if(!el.classList.contains('animating') && !el.classList.contains('mouseover')){ 103 el.classList.add('animating','mouseover'); 104 var letters = el.innerText.split(''); 105 setTimeout(function(){ el.classList.remove('animating'); }, (letters.length + 1) * 50); 106 var animationName = el.dataset.animation; 107 if(!animationName){ animationName = "pxl-jump"; } 108 el.innerText = '';
109 letters.forEach(function(letter){ 110 if(letter == " "){ 111 letter = " "; 112 } 113 el.innerHTML += '<span class="letter">'+letter+'</span>'; 114 }); 115 var letterElements = el.querySelectorAll('.letter'); 116 letterElements.forEach(function(letter, i){ 117 setTimeout(function(){ 118 letter.classList.add(animationName); 119 }, 50 * i); 120 }); 121 } 122 }); 123 el.addEventListener('mouseout', function(){ 124 el.classList.remove('mouseover'); 125 }); 126 }); 127 128 }; 129 130 var pxl_gsap_ani = function( $scope, $ ) { 131 gsap.registerPlugin(SplitText, ScrollTrigger); 132 133 // SplitText 134 var st = $scope.find(".pxl-split-text"); 135 // if(st.length == 0) return; 136 st.each(function(index, el) { 137 el.split = new SplitText(el, { 138 type: "lines,words,chars", 139 linesClass: "split-line" 140 }); 141 gsap.set(el, { perspective: 400 }); 142 143 if( $(el).hasClass('split-in-fade') ){ 144 gsap.set(el.split.chars, { 145 opacity: 0, 146 ease: "Back.easeOut", 147 }); 148 } 149 if( $(el).hasClass('split-in-right') ){ 150 gsap.set(el.split.chars, { 151 opacity: 0, 152 x: "50", 153 ease: "Back.easeOut", 154 }); 155 } 156 if( $(el).hasClass('split-in-left') ){ 157 gsap.set(el.split.chars, { 158 opacity: 0, 159 x: "-50", 160 ease: "circ.out", 161 }); 162 } 163 if( $(el).hasClass('split-in-up') ){ 164 gsap.set(el.split.chars, { 165 opacity: 0, 166 y: "80", 167 ease: "circ.out", 168 }); 169 } 170 if( $(el).hasClass('split-in-down') ){ 171 gsap.set(el.split.chars, { 172 opacity: 0, 173 y: "-80", 174 ease: "circ.out", 175 }); 176 } 177 if( $(el).hasClass('split-in-rotate') ){ 178 gsap.set(el.split.chars, { 179 opacity: 0, 180 rotateX: "50deg", 181 ease: "circ.out", 182 }); 183 } 184 if( $(el).hasClass('split-in-scale') ){ 185 gsap.set(el.split.chars, { 186 opacity: 0, 187 scale: "0.5", 188 ease: "circ.out", 189 }); 190 } 191 el.anim = gsap.to(el.split.chars, { 192 scrollTrigger: { 193 trigger: el, 194 toggleActions: "restart pause resume reverse", 195 start: "top 90%", 196 }, 197 x: "0", 198 y: "0", 199 rotateX: "0", 200 scale: 1, 201 opacity: 1, 202 duration: 0.8, 203 stagger: 0.02, 204 }); 205 }); 206 207 // ScrollTrigger 208 const scrollEx = () => { 209 document.body.style.overflow = 'auto'; 210 var prevSection = $scope.prev('section'); 211 gsap.utils.toArray($scope.find('.element-scroll')).forEach((section, index) => { 212 const w = section; 213 var x = w.scrollWidth * -1; 214 var xEnd = 0; 215 if($(section).closest('.pxl-section-scroll').hasClass('revesal')){ 216 x = '100%'; 217 xEnd = (w.scrollWidth + 50 - section.offsetWidth) * -1; 218 } 219 gsap.fromTo(w, { x }, { 220 x: xEnd, 221 scrollTrigger: { 222 trigger: prevSection, 223 start: 'top 10%', 224 end: 'bottom 50%', 225 scrub: 0.5 226 } 227 }); 228 }); 229 } 230 scrollEx(); 231 232 }; 233 234 var pxl_widget_image_box_handler = function( $scope, $ ) { 235 if (window.elementorFrontend.isEditMode()) { 236 class WebglHover { 237 constructor(set) { 238 this.canvas = set.canvas 239 this.webGLCurtain = new Curtains({ 240 container: this.canvas, 241 watchScroll: false, 242 pixelRatio: Math.min(1.5, window.devicePixelRatio) 243 }) 244 this.planeElement = set.planeElement 245 this.mouse = { 246 x: 0, 247 y: 0 248 } 249 this.params = { 250 vertexShader: document.getElementById("pxl-imb1-vs").textContent, 251 fragmentShader: document.getElementById("pxl-imb1-fs").textContent, 252 widthSegments: 40, 253 heightSegments: 40, 254 uniforms: { 255 time: { 256 name: "uTime", 257 type: "1f",
258 value: 0 259 }, 260 mousepos: { 261 name: "uMouse", 262 type: "2f", 263 value: [0, 0] 264 }, 265 resolution: { 266 name: "uReso", 267 type: "2f", 268 value: [innerWidth, innerHeight] 269 }, 270 progress: { 271 name: "uProgress", 272 type: "1f", 273 value: 0 274 } 275 } 276 } 277 this.initPlane() 278 } 279 280 initPlane() { 281 this.plane = new Plane(this.webGLCurtain, this.planeElement, this.params) 282 283 if (this.plane) { 284 this.plane.onReady(() => { 285 this.update() 286 this.initEvent() 287 }) 288 } 289 } 290 291 update() { 292 this.plane.onRender(() => { 293 this.plane.uniforms.time.value += 0.01 294 295 this.plane.uniforms.resolution.value = [innerWidth, innerHeight] 296 }) 297 } 298 299 initEvent() { 300 this.planeElement.addEventListener("mouseenter", () => { 301 gsap.to(this.plane.uniforms.progress, .8, { 302 value: 1 303 }) 304 }) 305 306 this.planeElement.addEventListener("mouseout", () => { 307 gsap.to(this.plane.uniforms.progress, .8, { 308 value: 0 309 }) 310 }) 311 } 312 } 313 314 $(window).on('scroll', function () { 315 if (navigator.userAgent.indexOf('Safari') == -1 || navigator.userAgent.indexOf('Chrome') > -1) { 316 $('.pxl-image-box1, .pxl-image-box3').each(function() { 317 const $this = $(this); 318 const item_image_height = $this.find('.image-front').height(); 319 $this.find('.canvas canvas').css('height', item_image_height + 'px'); 320 321 const initialized = $this.data('initialized'); 322 if (!initialized) { 323 $this.data('initialized', true); 324 const canvas = $this.find('.canvas')[0]; 325 const planeElement = $this.find('.item--image')[0]; 326 new WebglHover({ 327 canvas: canvas, 328 planeElement: planeElement 329 }); 330 } 331 }); 332 } 333 334 if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) { 335 $('.pxl-image-box1 .image-front, .pxl-image-box3 .image-front').css('opacity', '1'); 336 } 337 338 }); 339 340 } 341 }; 342 343 $( window ).on( 'elementor/frontend/init', function() { 344 elementorFrontend.hooks.addAction( 'frontend/element_ready/pxl_heading.default', pxl_gsap_ani ); 345 } ); 346} )( jQuery );
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.