1;(function ($) { 2 "use strict"; 3 var pxl_scroll_top; 4 var pxl_window_width; 5 var pxl_window_height; 6 var pxl_scroll_status = ''; 7 var pxl_last_scroll_top = 0; 8 // $(document).ready(function() { 9 // // console.log('DOM Ready'); 10 // // kimono_loader(); 11 // }); 12 $(window).on('load', function () { 13 pxl_scroll_top = $(window).scrollTop(); 14 pxl_window_width = $(window).width(); 15 pxl_window_height = $(window).height(); 16 kimono_loader(); 17 kimono_header_sticky(); 18 kimono_scroll_to_top(); 19 kimono_footer_fixed(); 20 kimono_quantity_icon(); 21 kimono_panel_anchor_toggle(); 22 kimono_document_click(); 23 kimono_product_single_variations_att(); 24 kimono_tab_carousel(); 25 kimono_check_scroll(); 26 kimono_grid_effects(); 27 kimono_webgl_effects(); 28 kimono_functions(); 29 Showcase(); 30 Showcase2(); 31 kimono_functions_slider(); 32 kimono_functions_rsz(); 33 setTimeout(function () { 34 kimono_post_grid(); 35 }, 500); 36 }); 37 38 $(window).on('resize', function () { 39 pxl_window_width = $(window).width(); 40 pxl_window_height = $(window).height(); 41 kimono_post_grid(); 42 kimono_grid_effects(); 43 kimono_functions_rsz(); 44 }); 45 46 $(window).on('scroll', function () { 47 pxl_scroll_top = $(window).scrollTop(); 48 pxl_window_width = $(window).width(); 49 pxl_window_height = $(window).height(); 50 if (pxl_scroll_top < pxl_last_scroll_top) { 51 pxl_scroll_status = 'up'; 52 } else { 53 pxl_scroll_status = 'down'; 54 } 55 pxl_last_scroll_top = pxl_scroll_top; 56 kimono_header_sticky(); 57 kimono_scroll_to_top(); 58 kimono_footer_fixed(); 59 kimono_check_scroll(); 60 scrolling(); 61 62 $('.page-section').each(function(i) { 63 if ($(this).position().top <= pxl_scroll_top + 50) { 64 $('.pxl-header-elementor-main .pxl-menu-primary > li > a.page-active').removeClass('page-active'); 65 $('.pxl-header-elementor-sticky .pxl-nav-menu .pxl-menu-primary > li > a.page-active').removeClass('page-active'); 66 $('.pxl-header-elementor-main .pxl-menu-primary > li > a').eq(i).addClass('page-active'); 67 $('.pxl-header-elementor-sticky .pxl-nav-menu .pxl-menu-primary > li > a').eq(i).addClass('page-active'); 68 } 69 }); 70 71 }); 72 73 $(document).ready(function () { 74 kimono_lightdark_switch(); 75 setTimeout(function () { 76 kimono_el_parallax(); 77 }, 700); 78 Showcase1(); 79 setTimeout(() => { 80 if (window.innerWidth > 767) { 81 var wobbleElements = document.querySelectorAll('.pxl-heading .breathing .pxl-title--highlight'); 82 83 wobbleElements.forEach(function(el, i) { 84 var letters = el.innerText.split(''); 85 86 setTimeout(function() { 87 el.classList.remove('animating'); 88 }, (letters.length + 1) * 50); 89 90 el.innerText = ''; 91 92 letters.forEach(function(letter, i) { 93 const numLetters = wobbleElements.length; 94 const mappedIndex = i - (numLetters / 2); 95 const delay = (mappedIndex * 0.15) + 's'; 96 if (letter == " ") { 97 letter = " "; 98 } 99 el.innerHTML += '<span class="letter" style="animation-delay: ' + delay + ';">' + letter + '</span>'; 100 }); 101 }); 102 } 103 }, 100); 104 105 var $element = $('.pxl-divider-border .pxl-divider-border-top'); 106 function togglePauseClass() { 107 $element.toggleClass('pause'); 108 } 109 setInterval(togglePauseClass, 1000); 110 111 /* Menu Responsive Dropdown */ 112 var $kimono_menu = $('.pxl-header-elementor-main'); 113 $kimono_menu.find('.pxl-menu-primary li').each(function () { 114 var $kimono_submenu = $(this).find('> ul.sub-menu'); 115 if ($kimono_submenu.length == 1) { 116 $(this).hover(function () { 117 if ($kimono_submenu.offset().left + $kimono_submenu.width() > $(window).width()) { 118 $kimono_submenu.addClass('pxl-sub-reverse'); 119 } else if ($kimono_submenu.offset().left < 0) { 120 $kimono_submenu.addClass('pxl-sub-reverse'); 121 } 122 }, function () { 123 $kimono_submenu.removeClass('pxl-sub-reverse'); 124 }); 125 } 126 }); 127 128 /* Active Menu Header */ 129 // $('.pxl-header-elementor-main .pxl-menu-primary .menu-item, .pxl-header-elementor-sticky .pxl-menu-primary .menu-item').each(function () { 130 // $(this).hover(function () { 131 // $(this).addClass('active').siblings('li').removeClass("active"); 132 // }); 133 // $(this).find('.sub-menu').hover(function () { 134 // $(this).parent().addClass("active"); 135 // }); 136 // $(this).parents('section').mouseleave(function() { 137 // setTimeout(function () { 138 // $('.pxl-menu-primary .menu-item').removeClass("active"); 139 // }, 500); 140 // }); 141 // }); 142 143 /* Start Menu Mobile */ 144 $('.pxl-header-menu li.menu-item-has-children, .pxl-menu-primary li.menu-item-has-children').append('<span class="pxl-menu-toggle"></span>'); 145 $('.pxl-menu-toggle').on('click', function () { 146 if( $(this).hasClass('active')){ 147 $(this).closest('ul').find('.pxl-menu-toggle.active').toggleClass('active'); 148 $(this).closest('ul').find('.sub-menu.active').toggleClass('active').slideToggle(); 149 $(this).closest('ul').find('a.active').toggleClass('active'); 150 }else{ 151 $(this).closest('ul').find('.pxl-menu-toggle.active').toggleClass('active'); 152 $(this).closest('ul').find('.sub-menu.active').toggleClass('active').slideToggle(); 153 $(this).closest('ul').find('a.active').toggleClass('active'); 154 $(this).toggleClass('active'); 155 $(this).parent().find('> .sub-menu').toggleClass('active'); 156 $(this).parent().find('> .sub-menu').slideToggle(); 157 $(this).parent().find('> a').toggleClass('active'); 158 } 159 }); 160 161 $('.menu-vertical .sub-menu > li > a').on('click', function () { 162 $(this).toggleClass('active'); 163 $(this).closest('li').find('> .pxl-menu-toggle').toggleClass('active'); 164 $(this).closest('li').find('> .sub-menu').toggleClass('active'); 165 $(this).closest('li').find('> .sub-menu').slideToggle(); 166 }); 167 $('.menu-vertical > li > a').on('click', function (e) { 168 if( $(this).hasClass('active')){ 169 $(this).closest('ul').find('.pxl-menu-toggle.active').toggleClass('active'); 170 $(this).closest('ul').find('.sub-menu.active').toggleClass('active').slideToggle(); 171 $(this).closest('ul').find('a.active').toggleClass('active'); 172 }else{ 173 $(this).closest('ul').find('.pxl-menu-toggle.active').toggleClass('active'); 174 $(this).closest('ul').find('.sub-menu.active').toggleClass('active').slideToggle(); 175 $(this).closest('ul').find('a.active').toggleClass('active'); 176 $(this).toggleClass('active'); 177 $(this).parents('li').find('> .pxl-menu-toggle').toggleClass('active'); 178 $(this).parents('li').find('> .sub-menu').toggleClass('active'); 179 $(this).parents('li').find('> .sub-menu').slideToggle(); 180 } 181 }); 182 $("#pxl-nav-mobile").on('click', function () { 183 $(this).toggleClass('active'); 184 $('.pxl-header-menu').toggleClass('active'); 185 }); 186 187 $(".pxl-menu-close, .pxl-header-menu-backdrop").on('click', function () { 188 $(this).parents('.pxl-header-main').find('.pxl-header-menu').removeClass('active'); 189 $('#pxl-nav-mobile').removeClass('active'); 190 }); 191 /* End Menu Mobile */ 192
193 if($('div').hasClass('px-header--transparent')) { 194 $('#pxl-wapper').css({ 195 "position": "relative", 196 }); 197 } 198 199 /* Scroll To Top */ 200 $('.pxl-scroll-top').click(function () { 201 $('html, body').animate({scrollTop: 0}); 202 return false; 203 }); 204 205 /* Animate Time Delay */ 206 $('.pxl-grid-masonry').each(function () { 207 var eltime = 100; 208 var elt_inner = $(this).children().length; 209 var _elt = elt_inner - 1; 210 $(this).find('> .pxl-grid-item > .wow').each(function (index, obj) { 211 $(this).css('animation-delay', eltime + 'ms'); 212 if (_elt === index) { 213 eltime = 100; 214 _elt = _elt + elt_inner; 215 } else { 216 eltime = eltime + 60; 217 } 218 }); 219 }); 220 221 $('.pxl-item--text').each(function () { 222 var pxl_time = 0; 223 var pxl_item_inner = $(this).children().length; 224 var _elt = pxl_item_inner - 1; 225 $(this).find('> .pxl-text--slide > .wow').each(function (index, obj) { 226 $(this).css('transition-delay', pxl_time + 'ms'); 227 if (_elt === index) { 228 pxl_time = 0; 229 _elt = _elt + pxl_item_inner; 230 } else { 231 pxl_time = pxl_time + 80; 232 } 233 }); 234 }); 235 236 /* Nice Select */ 237 $('.pxl-nice-select, .woocommerce .woocommerce-ordering .orderby, #wp-block-archives-1, #wp-block-categories-1, .woocommerce div.product form.cart .variations select, #pxl-sidebar-area select').each(function () { 238 $(this).niceSelect(); 239 }); 240 241 /* Comment Form */ 242 var inputElement = $('.comment-respond .form-submit input.submit'); 243 var buttonElement = $('<button>', { 244 name: inputElement.attr('name'), 245 id: inputElement.attr('id'), 246 class: inputElement.attr('class'), 247 type: inputElement.attr('type'), 248 text: inputElement.val() 249 }); 250 inputElement.replaceWith(buttonElement); 251 252 /* Related Post - Slick Slider */ 253 const postSlider = $(".pxl-related-post .pxl-related-post-inner, .pxl-related-portfolio .pxl-related-post-inner"); 254 if (postSlider.length > 0 && $.fn.slick) { 255 postSlider 256 .slick({ 257 dots: false, 258 infinite: true, 259 arrows: false, 260 slidesToShow: 3, 261 slidesToScroll: 1, 262 autoplay: false, 263 autoplaySpeed: 2000, 264 cssEase: 'linear', 265 responsive: [ 266 { 267 breakpoint: 992, 268 settings: { 269 slidesToShow: 2, 270 }, 271 }, 272 { 273 breakpoint: 768, 274 settings: { 275 slidesToShow: 1, 276 } 277 } 278 ] 279 }); 280 if ($('body').hasClass('rtl')) { 281 postSlider.slick('slickSetOption', 'rtl', true); 282 } 283 } 284 /* Custom Widget */ 285 $(".widget.widget_search input").attr('required', true); 286 287 /* Custom Woocommerce */ 288 $('.woocommerce .woocommerce-summary-wrap.row.style1').parents('.product').addClass('pxl-product-page-style1'); 289 $('.woocommerce .woocommerce-summary-wrap.row.style2').parents('.product').addClass('pxl-product-page-style2'); 290 291 $(".woocommerce .pxl-wapper #pxl-main .pxl-content-product .woosc-quick-table").remove(); 292 $(".woocommerce ul.products li.product > .woosc-btn, .woocommerce ul.products li.product > .woosq-btn, .woocommerce ul.products li.product > .woosw-btn").remove(); 293 $(".single-product #primary div.product .entry-summary > button").remove(); 294 295 $('.add_to_cart_button').attr('title', 'Add To Cart'); 296 $('.product_type_grouped').attr('title', 'View Product'); 297 $('.product_type_external').attr('title', 'Shop Now'); 298 $('.woosw-btn').attr('title', 'Add To Wishlist'); 299 $('.woosq-btn').attr('title', 'Quick View'); 300 $('.woosc-btn').attr('title', 'Compare'); 301 302 303 $(".woocommerce-shop .widget_layered_nav .wc-layered-nav-term").on('click', function(e) { 304 $(this).addClass('active').siblings('li').removeClass("active"); 305 }); 306 307 if ($('form').hasClass('woocommerce-form woocommerce-form-login login')) { 308 var labelUsername = $(this).find('label[for="username"]').text().trim().toUpperCase(); 309 $(this).find('label[for="username"]').text(''); 310 $(this).find('#username').attr('placeholder', labelUsername); 311 var labelPassword = $(this).find('label[for="password"]').text().trim().toUpperCase(); 312 $(this).find('label[for="password"]').text(''); 313 $(this).find('#password').attr('placeholder', labelPassword); 314 } 315 316 // Custom Add space in the end price currency 317 $('.woocommerce-Price-currencySymbol').each(function() { 318 var $el = $(this); 319 var string = $el.text(); 320 $el.text(''); 321 var result = string.trim() + " "; 322 $el.html(result); 323 }); 324 325 // Custom move section shop single 326 var productPage = $('.woocommerce .product.pxl-product-page-style2'); 327 328 var wooTabsWrapper = productPage.find('.woocommerce-tabs.wc-tabs-wrapper'); 329 var originalTabs = wooTabsWrapper.clone(); 330 wooTabsWrapper.remove(); 331 productPage.find('.woocommerce-summary-wrap .woocommerce-gallery + div').append(originalTabs); 332 333 var tabMappings = [ 334 { tabName: 'description_tab', panelClass: 'woocommerce-Tabs-panel--description' }, 335 { tabName: 'additional_information_tab', panelClass: 'woocommerce-Tabs-panel--additional_information' }, 336 { tabName: 'tab-product-feature_tab', panelClass: 'woocommerce-Tabs-panel--tab-product-feature' }, 337 { tabName: 'reviews_tab', panelClass: 'woocommerce-Tabs-panel--reviews' } 338 ]; 339 340 $.each(tabMappings, function(index, mapping) { 341 var tabElement = productPage.find('.wc-tabs .' + mapping.tabName); 342 var panelElement = originalTabs.find('.woocommerce-Tabs-panel.' + mapping.panelClass).clone(); 343 originalTabs.find('.woocommerce-Tabs-panel.' + mapping.panelClass).remove(); 344 tabElement.append(panelElement); 345 }); 346 347 /* Search Popup */ 348 var $search_wrap_init = $("#pxl-search-popup"); 349 var search_field = $('#pxl-search-popup .search-field'); 350 var $body = $('body'); 351 352 $(".pxl-search-popup-button").on('click', function(e) { 353 if (!$search_wrap_init.hasClass('active')) { 354 $search_wrap_init.addClass('active'); 355 setTimeout(function() { search_field.get(0).focus(); }, 500); 356 } else if (search_field.val() === '') { 357 $search_wrap_init.removeClass('active'); 358 search_field.get(0).focus(); 359 } 360 e.preventDefault(); 361 return false;
362 }); 363 364 $("#pxl-search-popup .pxl-item--overlay, #pxl-search-popup .pxl-item--close").on('click', function (e) { 365 $body.addClass('pxl-search-out-anim'); 366 setTimeout(function () { 367 $body.removeClass('pxl-search-out-anim'); 368 }, 600); 369 setTimeout(function () { 370 $search_wrap_init.removeClass('active'); 371 }, 600); 372 e.preventDefault(); 373 return false; 374 }); 375 376 377 /* Lightbox Popup */ 378 if ($.fn.magnificPopup) { 379 $('.btn-video, .pxl-video-popup').magnificPopup({ 380 type: 'iframe', 381 mainClass: 'mfp-fade', 382 removalDelay: 160, 383 preloader: false, 384 fixedContentPos: false 385 }); 386 } 387 388 /* Nav Logo */ 389 $(".pxl-nav-button").on('click', function () { 390 $(this).toggleClass('active'); 391 $(this).parent().find('.pxl-nav-wrap').toggle(400); 392 }); 393 394 /* Select Theme Style */ 395 $('.wpcf7-select').each(function() { 396 var $this = $(this), numberOfOptions = $(this).children('option').length; 397 398 $this.addClass('pxl-select-hidden'); 399 $this.wrap('<div class="pxl-select"></div>'); 400 $this.after('<div class="pxl-select-higthlight"></div>'); 401 402 var $styledSelect = $this.next('div.pxl-select-higthlight'); 403 $styledSelect.text($this.children('option').eq(0).text()); 404 405 var $list = $('<ul />', { 406 'class': 'pxl-select-options' 407 }).insertAfter($styledSelect); 408 409 for (var i = 0; i < numberOfOptions; i++) { 410 $('<li />', { 411 text: $this.children('option').eq(i).text(), 412 rel: $this.children('option').eq(i).val() 413 }).appendTo($list); 414 } 415 416 var $listItems = $list.children('li'); 417 418 $styledSelect.click(function(e) { 419 e.stopPropagation(); 420 $('div.pxl-select-higthlight.active').not(this).each(function(){ 421 $(this).removeClass('active').next('ul.pxl-select-options').addClass('pxl-select-lists-hide'); 422 }); 423 $(this).toggleClass('active'); 424 }); 425 426 $listItems.click(function(e) { 427 e.stopPropagation(); 428 $styledSelect.text($(this).text()).removeClass('active'); 429 $this.val($(this).attr('rel')); 430 }); 431 432 $(document).click(function() { 433 $styledSelect.removeClass('active'); 434 }); 435 436 }); 437 438 /* Custom Effects */ 439 $('a, input, button, .pxl-transtion').on('mouseover', function() { 440 $(this).addClass('pxl-hover-transition'); 441 }); 442 443 $('.pxl-switch-button').on('mouseover', function() { 444 $('a, input, button, .pxl-transtion').removeClass('pxl-hover-transition'); 445 $('.pxl-scroll-top').removeClass('pxl-hover-transition'); 446 }); 447 448 $('.pxl-parent-transition').each(function() { 449 $(this).find('.pxl-transtion').addClass('pxl-hover-transition'); 450 $(this).hover(function() { 451 $(this).find('.pxl-transtion').addClass('pxl-hover-transition'); 452 }); 453 $('.pxl-switch-button').on('mouseover', function() { 454 $(this).find('.pxl-transtion').removeClass('pxl-hover-transition'); 455 }); 456 }); 457 458 /* Pricing Hover */ 459 $('.pxl-pricing1').each(function () { 460 $(this).hover(function () { 461 $(this).parents('.elementor-element').find('.pxl-pricing1').removeClass('is-popular'); 462 $(this).addClass('is-popular'); 463 }); 464 }); 465 466 $('.btn-default').each(function () { 467 var mouseX = 0, 468 mouseY = 0, 469 z = $(this).find('svg path'); 470 $(this).mousemove(function(e) { 471 var offset = $(this).offset(); 472 var mouseX = e.pageX - offset.left; 473 var mouseY = e.pageY - offset.top; 474 var translateX = mouseX - $(this).width() / 2; 475 var translateY = mouseY - $(this).height() / 2; 476 var zTransform = 'scale(' + (1 + (mouseX + mouseY) / ($(this).width() + $(this).height())) + ')'; 477 z.css('transform', zTransform); 478 }); 479 $(this).mouseleave(function() { 480 z.css('transform', 'none'); 481 }); 482 }); 483 484 $('.pxl-neon-glow').each(function(index) { 485 var strongTags = $(this).find("strong"); 486 strongTags.each(function() { 487 var strongText = $(this).text(); 488 var spanHtml = ''; 489 for (var i = 0; i < strongText.length; i++) { 490 spanHtml += '<span class="highlight">' + strongText[i] + '</span>'; 491 } 492 $(this).html(spanHtml); 493 }); 494 495 var color = $(this).css('color'); 496 var keyframesName = 'pxl_neon_glows_' + index; 497 var shadowSize = '3px'; 498 var style = '@keyframes ' + keyframesName + ' { 0% { color: ' + color + '; text-shadow: 0 0 ' + shadowSize + ' ' + color + '; } 100% { color: ' + color + '; text-shadow: 0 0 ' + shadowSize + ' ' + color + ', 0 0 ' + shadowSize + ' ' + color + ', 0 0 ' + shadowSize + ' ' + color + '; } }'; 499 var dynamicStyle = $('<style>').text(style); 500 $('head').append(dynamicStyle); 501 $(this).find('.highlight').css('animation', keyframesName + ' 1.5s ease-in-out infinite alternate'); 502 }); 503 504 var wobbleElements = document.querySelectorAll('.pxl-wobble');
505 wobbleElements.forEach(function(el){ 506 el.addEventListener('mouseover', function(){ 507 if(!el.classList.contains('animating') && !el.classList.contains('mouseover')){ 508 el.classList.add('animating','mouseover'); 509 var letters = el.innerText.split(''); 510 setTimeout(function(){ el.classList.remove('animating'); }, (letters.length + 1) * 50); 511 var animationName = el.dataset.animation; 512 if(!animationName){ animationName = "pxl-jump"; } 513 el.innerText = ''; 514 letters.forEach(function(letter){ 515 if(letter == " "){ 516 letter = " "; 517 } 518 el.innerHTML += '<span class="letter">'+letter+'</span>'; 519 }); 520 var letterElements = el.querySelectorAll('.letter'); 521 letterElements.forEach(function(letter, i){ 522 setTimeout(function(){ 523 letter.classList.add(animationName); 524 }, 50 * i); 525 }); 526 } 527 }); 528 el.addEventListener('mouseout', function(){ 529 el.classList.remove('mouseover'); 530 }); 531 }); 532 533 $('.pxl-show-grid').append('<div class="pxl-grid-lines"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>'); 534 $('.pxl-show-grid-yes').append('<div class="pxl-grid-lines"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>'); 535 $('.pxl-grid-mobile-yes').each(function() { 536 $(this).find('.pxl-grid-lines').addClass('grid-mobile'); 537 }); 538 539 $('.widget-title, .wp-block-group__inner-container > h2, .single-post #comments .comments-title, .single-post .comment-respond .comment-reply-title, .cart_totals > h2, #customer_details .woocommerce-billing-fields >
539 h3, #order_review_heading, .woocommerce-additional-fields > h3').append('<span class="title-line"></span>'); 540 541 /* Custom Hide Scroll Bar */ 542 $('.pxl-hide-scroll-bar').each(function () { 543 $('body').addClass('pxl-hide-scroll-bar'); 544 }); 545 546 /* Custom Change Color Header */ 547 $('.pxl-header-icon-white-darkmode').each(function () { 548 $('header .pxl-iconwhite-indark').addClass('pxl-color-white'); 549 }); 550 551 if($('section').hasClass('pxl-header-mb-blur')) { 552 $('#pxl-header-mobile').css("backdrop-filter", "blur(10px)"); 553 } 554 555 if($('section').hasClass('pxl-header-mb-white')) { 556 $('#pxl-header-mobile .pxl-header-branding .logo-dark').css({ 557 opacity: 1, 558 visibility: 'visible' 559 }); 560 } 561 562 $('.pxl-menu-parallax').each(function() { 563 const $this = $(this); 564 const menu = $this.find('.menu-parallax'); 565 const menuItems = $this.find('div:nth-child(1) > ul > li'); 566 const numItems = menuItems.length; 567 const patternStep = 100 / numItems; 568 const imageStep = 10 / numItems; 569 570 menu.hover(function () { 571 $this.addClass('active'); 572 }, function () { 573 $this.removeClass('active'); 574 }); 575
576 function updateBackgroundPositions() { 577 menuItems.each(function(i) { 578 const patternPos = i * patternStep; 579 const imagePos = 50 - (numItems - 1 - i) * imageStep; 580 $(this).on("mouseover", function() { 581 $this.css("--pattern-position", `0% ${patternPos}%`); 582 $this.css("--image-position", `${imagePos}% bottom`); 583 }); 584 }); 585 } 586 587 updateBackgroundPositions(); 588 589 menuItems.on("mouseover", function() { 590 $this.attr("data-active-index", $(this).index()); 591 }); 592 }); 593 594 }); 595 596 /* --------------------------------------------------------------------------------------------- */ 597 598function kimono_panel_anchor_toggle() { 599 'use strict'; 600 $(document).on('click','.pxl-anchor.side-panel',function(e){ 601 e.preventDefault(); 602 e.stopPropagation(); 603 var target = $(this).attr('data-target'); 604 $(this).toggleClass('cliked'); 605 $(target).toggleClass('open'); 606 $('body').toggleClass('side-panel-open'); 607 $(target).next('.pxl-overlay-drop').toggleClass('panel-open'); 608 setTimeout(function(){ 609 $(document).find('.pxl-search-form input[name="s"]').focus(); 610 $(document).find('.search-form input[name="s"]').focus(); 611 },1000); 612 }); 613 $(document).on('click','.custom-link.anchor',function(e){ 614 e.preventDefault(); 615 e.stopPropagation(); 616 var target = $(this).attr('data-target'); 617 $(this).toggleClass('cliked'); 618 $(target).toggleClass('anchor-target-open'); 619 $('.pxl-anchor-bg').toggleClass('anchor-bg-open'); 620 }); 621 622 //* Menu Dropdown 623 $('.pxl-menu-primary li').each(function () { 624 var $submenu = $(this).find('> ul.sub-menu'); 625 if ($submenu.length == 1) { 626 var submenuOffset = $submenu.offset().left; 627 var submenuWidth = $submenu.width(); 628 var windowWidth = $(window).width(); 629 630 if (submenuOffset + submenuWidth > windowWidth || submenuOffset < 0) { 631 $submenu.addClass('back'); 632 } 633 } 634 }); 635} 636 637function kimono_document_click() { 638 $(document).on('click',function (e) { 639 var target = $(e.target); 640 var check = '.btn-nav-mobile'; 641 642 if (!(target.is(check)) && target.closest('.pxl-hidden-template').length <= 0 && $('body').hasClass('side-panel-open')) { 643 $('.btn-nav-mobile').removeClass('cliked'); 644 $('.pxl-hidden-template').removeClass('open'); 645 $('body').removeClass('side-panel-open'); 646 $('.pxl-overlay-drop').removeClass('panel-open'); 647 } 648 }); 649 $(document).on('click','.pxl-close',function(e){ 650 e.preventDefault(); 651 e.stopPropagation(); 652 $(this).closest('.pxl-hidden-template').toggleClass('open'); 653 $('.btn-nav-mobile').removeClass('cliked'); 654 $('body').toggleClass('side-panel-open'); 655 }); 656 $(document).on('click','.pxl-close-drop',function(e){ 657 e.preventDefault(); 658 e.stopPropagation(); 659 $('.pxl-overlay-drop').removeClass('panel-open'); 660 }); 661} 662 663 /* Get Mouse Move Direction */ 664function getDirection(ev, obj) { 665 var w = $(obj).width(), 666 h = $(obj).height(), 667 x = (ev.pageX - $(obj).offset().left - (w / 2)) * (w > h ? (h / w) : 1), 668 y = (ev.pageY - $(obj).offset().top - (h / 2)) * (h > w ? (w / h) : 1), 669 d = Math.round( Math.atan2(y, x) / 1.57079633 + 5 ) % 4; 670 return d; 671} 672function addClass( ev, obj, state ) { 673 var direction = getDirection( ev, obj ), 674 class_suffix = null; 675 $(obj).removeAttr('class'); 676 switch ( direction ) { 677 case 0 : class_suffix = '-top'; break; 678 case 1 : class_suffix = '-right'; break; 679 case 2 : class_suffix = '-bottom'; break; 680 case 3 : class_suffix = '-left'; break; 681 } 682 $(obj).addClass( state + class_suffix ); 683} 684$.fn.ctDeriction = function () { 685 this.each(function () { 686 $(this).on('mouseenter',function(ev){ 687 addClass( ev, this, 'in' ); 688 }); 689 $(this).on('mouseleave',function(ev){ 690 addClass( ev, this, 'out' ); 691 }); 692 }); 693} 694$('.pxl-grid-direction .item-direction').ctDeriction(); 695 696 /* Header Sticky */ 697function kimono_header_sticky() { 698 if ($('#pxl-header-elementor').hasClass('is-sticky')) { 699 if (pxl_scroll_top > 147) { 700 $('.pxl-header-elementor-sticky.pxl-sticky-stb').addClass('pxl-header-fixed'); 701 $('.sticky-col').css('top', '100px'); 702 } else { 703 $('.pxl-header-elementor-sticky.pxl-sticky-stb').removeClass('pxl-header-fixed'); 704 $('.sticky-col').css('top', ''); 705 } 706 707 if (pxl_scroll_status == 'up' && pxl_scroll_top > 147) { 708 $('.pxl-header-elementor-sticky.pxl-sticky-stt').addClass('pxl-header-fixed'); 709 $('.sticky-col').css('top', '100px'); 710 } else { 711 $('.pxl-header-elementor-sticky.pxl-sticky-stt').removeClass('pxl-header-fixed'); 712 $('.sticky-col').css('top', ''); 713 } 714 } else { 715 $('.sticky-col').css('top', ''); 716 } 717 $('.pxl-header-elementor-sticky').parents('body').addClass('pxl-header-sticky'); 718} 719 720 /* Scroll To Top */ 721function kimono_scroll_to_top() { 722 $('.pxl-scroll-top').addClass('pxl-hover-transition'); 723 if (pxl_scroll_top < pxl_window_height) { 724 $('.pxl-scroll-top').addClass('pxl-off').removeClass('pxl-on'); 725 } 726 if (pxl_scroll_top > pxl_window_height) { 727 $('.pxl-scroll-top').addClass('pxl-on').removeClass('pxl-off'); 728 } 729} 730 731 /* Footer Fixed */ 732function kimono_footer_fixed() { 733 setTimeout(function(){ 734 var h_footer = $('.pxl-footer-fixed #pxl-footer-elementor').outerHeight() - 1; 735 $('.pxl-footer-fixed #pxl-main').css('margin-bottom', h_footer + 'px'); 736 }, 600); 737} 738 739 /* ==================== 740 WooComerce Quantity 741 ====================== */ 742function kimono_quantity_icon() { 743 $('#pxl-main .quantity').append('<span class="quantity-icon"><i class="quantity-down">-</i><i class="quantity-up">+</i></span>'); 744 $('.quantity-up').on('click', function () { 745 $(this).parents('.quantity').find('input[type="number"]').get(0).stepUp(); 746 $(this).parents('.woocommerce-cart-form').find('.actions .button').removeAttr('disabled'); 747 }); 748 $('.quantity-down').on('click', function () { 749 $(this).parents('.quantity').find('input[type="number"]').get(0).stepDown(); 750 $(this).parents('.woocommerce-cart-form').find('.actions .button').removeAttr('disabled'); 751 }); 752 $('.woocommerce-cart-form .actions .button').removeAttr('disabled'); 753} 754 755function kimono_product_single_variations_att() { 756 $(document).on('mousedown', '.pro-variation-select', function (e) { 757 e.preventDefault(); 758 var $this_var = $(this).closest('.variations'), 759 this_closest = $(this).closest('.pxl-variation-att-terms'), 760 target_hidden = $this_var.find('#'+this_closest.attr('data-id')); 761 var $this = $(this); 762 if (!$this.hasClass('custom-vari-enabled')) 763 return; 764 var target = $this.attr('data-value'); 765 if (!target) 766 return; 767 target_hidden.val(target).change(); 768 this_closest.find('li.pxl-vari-item').removeClass('active'); 769 $this.parent('li').addClass('active'); 770 }); 771} 772 773 /* Custom Tab Carousel */
774function kimono_tab_carousel() { 775 setTimeout(() => { 776 $('.pxl-tab-carousel .pxl-item--content:not(:first-child)').css({ 777 "display": "none", 778 }); 779 }, 1000); 780} 781 782 /* Custom Check Scroll */ 783function kimono_check_scroll() { 784 var $gridItems = $('.pxl-check-scroll .pxl-grid-item, .pxl-image-single1, .pxl-item--title, .pxl-item-check-scroll'); 785 var viewportBottom = pxl_scroll_top + $(window).height(); 786 787 $gridItems.each(function() { 788 var $gridItem = $(this); 789 var elementTop = $gridItem.offset().top; 790 var elementBottom = elementTop + $gridItem.outerHeight(); 791 792 if (elementTop < viewportBottom && elementBottom > pxl_scroll_top) { 793 $gridItem.addClass('visible'); 794 } else { 795 $gridItem.removeClass('visible'); 796 } 797 $('.filter-item').click(function() { 798 $gridItem.removeClass('visible'); 799 $gridItem.addClass('visible'); 800 }); 801 }); 802} 803 804 /* Custom Post Grid */ 805function kimono_post_grid() { 806 $('.pxl-post-layout-post-1').each(function () { 807 var $this = $(this); 808 var itemGrid = $this.find('.pxl-grid-item'); 809 $this.hover(function () { 810 var itemGrid = $this.find('.pxl-grid-item'); 811 }); 812 itemGrid.find('.item--count.show').removeClass("deactive"); 813 itemGrid.find('.pxl-item--inner, .item--overlay').css({ 814 'min-height': '0px', 815 }); 816 var pMaxHeight = 0; 817 itemGrid.each(function() { 818 var pHeight = $(this).find('.pxl-item--inner').height(); 819 if(pHeight > pMaxHeight) { 820 pMaxHeight = pHeight; 821 } 822 }); 823 itemGrid.find('.pxl-item--inner, .item--overlay').css({ 824 'min-height': pMaxHeight, 825 }); 826 setTimeout(function() { 827 itemGrid.find('.item--count.show').addClass("deactive"); 828 }, 1000); 829 }); 830} 831 832function kimono_draw_svg() { 833 var $gridItems = $('.slide-draw-svg svg'); 834 var viewportBottom = pxl_scroll_top + $(window).height(); 835 836 $gridItems.each(function() { 837 var $gridItem = $(this); 838 var elementTop = $gridItem.offset().top; 839 var elementBottom = elementTop + $gridItem.outerHeight(); 840 841 var $svgPaths = $gridItem.find('path'); 842 $svgPaths.each(function() { 843 var thisPath = $(this); 844 var pathLength = this.getTotalLength(); 845 thisPath.attr('stroke-dasharray', pathLength); 846 thisPath.css("stroke-dashoffset", pathLength); 847 848 $(window).on('scroll', function () { 849 if (elementTop < viewportBottom && elementBottom > pxl_scroll_top) { 850 $gridItem.addClass('visible'); 851 var $percentageComplete = ((pxl_scroll_top - elementTop) / ($gridItem.outerHeight() - $(window).height())) * 100; 852 var $offsetUnit = ($percentageComplete <= 100) ? 0 : pathLength; 853 thisPath.css("stroke-dashoffset", $offsetUnit); 854 } else { 855 $gridItem.removeClass('visible'); 856 } 857 }); 858 }); 859 860 }); 861} 862 863function kimono_el_parallax() { 864 $('.el-parallax-wrap').on({ 865 mouseenter: function() { 866 const $this = $(this); 867 $this.addClass('hovered'); 868 $this.find('.el-parallax-item').css({ 869 transition: 'none' 870 }); 871 }, 872 mouseleave: function() { 873 const $this = $(this); 874 $this.removeClass('hovered'); 875 $this.find('.el-parallax-item').css({ 876 transition: 'transform 0.5s ease', 877 transform: 'translate3d(0px, 0px, 0px)' 878 }); 879 }, 880 mousemove: function(e) { 881 const $this = $(this); 882 const bounds = this.getBoundingClientRect(); 883 const centerX = bounds.left + bounds.width / 2; 884 const centerY = bounds.top + bounds.height / 2; 885 const deltaX = (centerX - e.clientX) * 0.07104; 886 const deltaY = (centerY - e.clientY) * 0.10656; 887 888 requestAnimationFrame(() => { 889 $this.find('.el-parallax-item').css({ 890 transform: `translate3d(${deltaX}px, ${deltaY}px, 0px)` 891 }); 892 }); 893 } 894 }); 895} 896 897 898 899function kimono_grid_effects() { 900 $('.pixel_stretch').each(function () { 901 var gridItems = $(this).find(".pxl-grid-item"); 902 gridItems.each(function () { 903 var itemFeatured = $(this).find(".item--featured"); 904 var imgWidth = $(this).find(".item--featured img").width(); 905 itemFeatured.css('--pg-img-width', imgWidth + 'px'); 906 }); 907 }); 908} 909 910 /* Custom Switch Light/Dark Mode */ 911function kimono_lightdark_switch() { 912 let getMode = localStorage.getItem("mode"); 913 const toggleButton = $(".pxl-switch-button"); 914 915 var currentPath = window.location.pathname; 916 var isLandingPage = currentPath.endsWith("/landing/"); 917 918 if (isLandingPage) { 919 toggleButton.css("opacity", "0"); 920 getMode = "dark"; 921 } else {
922 const urlParams = new URLSearchParams(window.location.search); 923 const colorParam = urlParams.get('color'); 924 if (colorParam === 'v-dark' || colorParam === 'v-light') { 925 getMode = (colorParam === 'v-light') ? 'light' : 'dark'; 926 } 927 } 928 929 if (getMode && getMode === "light") { 930 $("body").removeClass("dark-mode"); 931 } 932 if (getMode && getMode === "dark") { 933 $("body").addClass("dark-mode"); 934 } 935 936 toggleButton.on("click", function() { 937 $("body").toggleClass("dark-mode"); 938 if (!$("body").hasClass("dark-mode")) { 939 return localStorage.setItem("mode", "light"); 940 } 941 localStorage.setItem("mode", "dark"); 942 }); 943} 944 945 /* Custom Loader */ 946function kimono_loader() { 947 if ($('#pxl-loadding').is('.style-text, .style-home-assistant')) { 948 $('#pxl-loadding').addClass('hide'); 949 } else { 950 $(".pxl-loader").fadeOut("slow"); 951 } 952} 953 954 /* Custom WebGL Effects */ 955function kimono_webgl_effects() { 956 var WebGL_vs = `#ifdef GL_ES 957 precision mediump float; 958 #endif 959 960 attribute vec3 aVertexPosition; 961 attribute vec2 aTextureCoord; 962 963 uniform mat4 uMVMatrix; 964 uniform mat4 uPMatrix; 965 966 uniform mat4 texture0Matrix; 967 uniform mat4 texture1Matrix; 968 uniform mat4 mapMatrix; 969 970 varying vec3 vVertexPosition; 971 varying vec2 vTextureCoord0; 972 varying vec2 vTextureCoord1; 973 varying vec2 vTextureCoordMap; 974 975 void main() { 976 vec3 vertexPosition = aVertexPosition; 977 978 gl_Position = uPMatrix * uMVMatrix * vec4(vertexPosition, 1.0
978); 979 980 vTextureCoord0 = (texture0Matrix * vec4(aTextureCoord, 0., 1.)).xy; 981 vTextureCoord1 = (texture1Matrix * vec4(aTextureCoord, 0., 1.)).xy; 982 vTextureCoordMap = (mapMatrix * vec4(aTextureCoord, 0., 1.)).xy; 983 vVertexPosition = vertexPosition; 984 }`; 985 986 var WebGL_fs = `#ifdef GL_ES 987 precision mediump float; 988 #endif 989 990 #define PI2 6.28318530718 991 #define PI 3.14159265359 992 #define S(a,b,n) smoothstep(a,b,n) 993 994 uniform float uTime; 995 uniform float uProgress; 996 uniform vec2 uReso; 997 uniform vec2 uMouse; 998 999 varying vec3 vVertexPosition; 1000 varying vec2 vTextureCoord0; 1001 varying vec2 vTextureCoord1; 1002 varying vec2 vTextureCoordMap; 1003 1004 uniform sampler2D texture0; 1005 uniform sampler2D texture1; 1006 uniform sampler2D map; 1007 1008 float exponentialEasing (float x, float a){ 1009 1010 float epsilon = 0.00001; 1011 float min_param_a = 0.0 + epsilon; 1012 float max_param_a = 1.0 - epsilon; 1013 a = max(min_param_a, min(max_param_a, a)); 1014 1015 if (a < 0.5){ 1016 a = 2.0 * a; 1017 float y = pow(x, a); 1018 return y; 1019 } else { 1020 a = 2.0 * (a-0.5); 1021 float y = pow(x, 1.0 / (1.-a)); 1022 return y; 1023 } 1024 } 1025 1026 vec4 blur13(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) { 1027 vec4 color = vec4(0.0); 1028 vec2 off1 = vec2(1.411764705882353) * direction; 1029 vec2 off2 = vec2(3.2941176470588234) * direction; 1030 vec2 off3 = vec2(5.176470588235294) * direction; 1031 color += texture2D(image, uv) * 0.1964825501511404; 1032 color += texture2D(image, uv + (off1 / resolution)) * 0.2969069646728344; 1033 color += texture2D(image, uv - (off1 / resolution)) * 0.2969069646728344; 1034 color += texture2D(image, uv + (off2 / resolution)) * 0.09447039785044732; 1035 color += texture2D(image, uv - (off2 / resolution)) * 0.09447039785044732; 1036 color += texture2D(image, uv + (off3 / resolution)) * 0.010381362401148057; 1037 color += texture2D(image, uv - (off3 / resolution)) * 0.010381362401148057; 1038 return color; 1039 } 1040 1041 void main(){ 1042 vec2 uv0 = vTextureCoord0; 1043 vec2 uv1 = vTextureCoord1; 1044 1045 float progress0 = uProgress; 1046 float progress1 = 1. - uProgress; 1047 1048 vec4 map = blur13(map, vTextureCoordMap, uReso, vec2(2.)) + 0.5; 1049 1050 uv0.x += progress0 * map.r; 1051 uv1.x -= progress1 * map.r; 1052 1053 vec4 color = texture2D( texture0, uv0 ); 1054 vec4 color1 = texture2D( texture1, uv1 ); 1055 1056 gl_FragColor = mix(color, color1, progress0 ); 1057 }`; 1058 class WebglHover { 1059 constructor(set) { 1060 this.canvas = set.canvas; 1061 this.webGLCurtain = new Curtains({ 1062 container: this.canvas, 1063 watchScroll: false, 1064 pixelRatio: Math.min(1.5, window.devicePixelRatio) 1065 }) 1066 this.planeElement = set.planeElement; 1067 this.mouse = { 1068 x: 0, 1069 y: 0 1070 }; 1071 this.params = { 1072 vertexShader: WebGL_vs, 1073 fragmentShader: WebGL_fs, 1074 widthSegments: 40, 1075 heightSegments: 40, 1076 uniforms: { 1077 time: { 1078 name: "uTime", 1079 type: "1f", 1080 value: 0 1081 }, 1082 mousepos: { 1083 name: "uMouse", 1084 type: "2f", 1085 value: [0, 0] 1086 }, 1087 resolution: { 1088 name: "uReso", 1089 type: "2f", 1090 value: [innerWidth, innerHeight] 1091 }, 1092 progress: { 1093 name: "uProgress", 1094 type: "1f", 1095 value: 0 1096 } 1097 } 1098 }; 1099 this.initPlane(); 1100 } 1101 1102 initPlane() { 1103 this.plane = this.webGLCurtain.addPlane(this.planeElement, this.params); 1104 // this.plane = new Plane(this.webGLCurtain, this.planeElement, this.params) 1105 1106 if (this.plane) { 1107 this.plane.onReady(() => { 1108 this.update(); 1109 this.initEvent(); 1110 }); 1111 } 1112 } 1113 1114 update() { 1115 this.plane.onRender(() => { 1116 this.plane.uniforms.time.value += 0.01; 1117 this.plane.uniforms.resolution.value = [innerWidth, innerHeight]; 1118 }); 1119 } 1120 1121 initEvent() { 1122 this.planeElement.addEventListener("mouseenter", e => { 1123 gsap.to(this.plane.uniforms.progress, .8, { 1124 value: 1 1125 }); 1126 }); 1127 1128 this.planeElement.addEventListener("mouseout", e => { 1129 gsap.to(this.plane.uniforms.progress, .8, { 1130 value: 0 1131 }); 1132 }); 1133 } 1134 } 1135 1136 if (navigator.userAgent.indexOf('Safari') == -1 || navigator.userAgent.indexOf('Chrome') > -1) { 1137 $('.pxl-image-box1.normal').each(function() { 1138 const $this = $(this), 1139 canvas = $this.find('.canvas')[0], 1140 planeElement = $this.find('.item--image')[0], 1141 initialized = $this.data('initialized'); 1142 1143 if (typeof Curtains !== 'undefined' && !initialized && canvas && planeElement) { 1144 new WebglHover({ 1145 canvas: canvas, 1146 planeElement: planeElement 1147 }); 1148 $this.data('initialized', true); 1149 } 1150 }); 1151 } 1152 1153 // Effect Expo 1154 var WebExpo_vs = `#ifdef GL_ES 1155 precision mediump float; 1156 #endif 1157 1158 attribute vec3 aVertexPosition; 1159 attribute vec2 aTextureCoord; 1160 1161 uniform mat4 uMVMatrix; 1162 uniform mat4 uPMatrix; 1163 1164 varying vec2 vTextureCoord; 1165 1166 void main() { 1167 gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0
1167); 1168 1169 vTextureCoord = aTextureCoord; 1170 }`; 1171 1172 var WebExpo_fs = ` 1173 #ifdef GL_ES 1174 precision mediump float; 1175 #endif 1176 1177 varying vec3 vVertexPosition; 1178 varying vec2 vTextureCoord; 1179 1180 uniform float uTime; 1181 1182 uniform sampler2D planeTexture; 1183 1184 void main() { 1185 vec2 textureCoord = vTextureCoord; 1186 1187 const float PI = 3.141592; 1188 1189 textureCoord.x += ( 1190 sin(textureCoord.x * 2.5 + ((uTime * (PI / 3.0)) * 0.031)) 1191 + sin(textureCoord.y * 2.5 + ((uTime * (PI / 2.489)) * 0.017)) 1192 ) * 0.0075; 1193 1194 textureCoord.y += ( 1195 sin(textureCoord.y * 2.5 + ((uTime * (PI / 2.023)) * 0.023)) 1196 + sin(textureCoord.x * 2.5 + ((uTime * (PI / 3.1254)) * 0.037)) 1197 ) * 0.0125; 1198 1199 gl_FragColor = texture2D(planeTexture, textureCoord); 1200 } 1201 `; 1202 1203 class WebGLExpo { 1204 constructor(set) { 1205 this.canvas = set.canvas; 1206 this.webGLCurtain = new Curtains({ 1207 container: this.canvas, 1208 watchScroll: false, 1209 pixelRatio: Math.min(1.5, window.devicePixelRatio) 1210 }) 1211 this.planeElement = set.planeElement; 1212 this.mouse = { 1213 x: 0, 1214 y: 0 1215 }; 1216 this.params = { 1217 vertexShader: WebExpo_vs, 1218 fragmentShader: WebExpo_fs, 1219 widthSegments: 40, 1220 heightSegments: 40, 1221 uniforms: { 1222 time: { 1223 name: "uTime", 1224 type: "1f", 1225 value: 0 1226 }, 1227 mousepos: { 1228 name: "uMouse", 1229 type: "2f", 1230 value: [0, 0] 1231 }, 1232 resolution: { 1233 name: "uReso", 1234 type: "2f", 1235 value: [innerWidth, innerHeight] 1236 }, 1237 progress: { 1238 name: "uProgress", 1239 type: "1f", 1240 value: 0 1241 } 1242 } 1243 }; 1244 this.initPlane(); 1245 } 1246 1247 initPlane() { 1248 this.plane = this.webGLCurtain.addPlane(this.planeElement, this.params); 1249 // this.plane = new Plane(this.webGLCurtain, this.planeElement, this.params) 1250 1251 if (this.plane) { 1252 this.plane.onReady(() => { 1253 this.update(); 1254 this.initEvent(); 1255 }); 1256 } 1257 } 1258 1259 update() { 1260 this.plane.onRender(() => { 1261 this.plane.uniforms.resolution.value = [innerWidth, innerHeight]; 1262 }); 1263 } 1264 1265 initEvent() { 1266 let isHovered = false; 1267 1268 this.planeElement.addEventListener("mouseenter", e => { 1269 isHovered = true; 1270 }); 1271 1272 this.planeElement.addEventListener("mouseout", e => { 1273 isHovered = false; 1274 }); 1275 1276 this.plane.onRender(() => { 1277 if (isHovered) { 1278 this.plane.uniforms.time.value++; 1279 } 1280 }); 1281 1282 } 1283 } 1284 1285 if (navigator.userAgent.indexOf('Safari') == -1 || navigator.userAgent.indexOf('Chrome') > -1) { 1286 $('.pxl-image-box1.expo').each(function() { 1287 const $this = $(this), 1288 canvas = $this.find('.canvas')[0], 1289 planeElement = $this.find('.item--image')[0], 1290 initialized = $this.data('initialized'); 1291 1292 if (!initialized && canvas && planeElement) { 1293 new WebGLExpo({ 1294 canvas: canvas, 1295 planeElement: planeElement 1296 }); 1297 $this.data('initialized', true); 1298 } 1299 }); 1300 } 1301 1302 // Effect Wave 1303 const WebWave_vs = ` 1304 precision mediump float; 1305 1306 attribute vec3 aVertexPosition; 1307 attribute vec2 aTextureCoord; 1308 1309 uniform mat4 uMVMatrix; 1310 uniform mat4 uPMatrix; 1311 1312 varying vec3 vVertexPosition; 1313 varying vec2 vTextureCoord; 1314 1315 uniform float uTime; 1316 1317 void main() { 1318 vec3 vertexPosition = aVertexPosition; 1319 1320 float waveCoords = ((uTime / 45.0) * 3.5) - 1.75; 1321 1322 float distanceToWave = distance(vec2(vertexPosition.x, 0.0), vec2(waveCoords, 0.0
1322)); 1323 1324 vertexPosition.z -= (cos(clamp(distanceToWave, 0.0, 0.75) * 3.141592) - cos(0.75 * 3.141592) + (2.0 * sin(3.141592 * uTime / 90.0))) * 0.025; 1325 1326 gl_Position = uPMatrix * uMVMatrix * vec4(vertexPosition, 1.0); 1327 1328 vTextureCoord = aTextureCoord; 1329 vVertexPosition = vertexPosition; 1330 } 1331 `; 1332 1333 const WebWave_fs = `precision mediump float; 1334 1335 uniform float uTime; 1336 1337 varying vec3 vVertexPosition; 1338 varying vec2 vTextureCoord; 1339 1340 uniform sampler2D uExample; 1341 1342 1343 void main() { 1344 1345 vec2 textureCoords = vec2(vTextureCoord.x, vTextureCoord.y); 1346 vec4 finalColor = texture2D(uExample, textureCoords); 1347 1348 gl_FragColor = finalColor; 1349 }`; 1350 1351 class ImgCurtain { 1352 constructor(set) { 1353 this.canvas = set.canvas; 1354 this.webGLCurtain = new Curtains({ 1355 container: this.canvas, 1356 watchScroll: false, 1357 pixelRatio: Math.min(1.5, window.devicePixelRatio) 1358 }) 1359 this.planeElement = set.planeElement; 1360 this.mouse = { 1361 x: 0, 1362 y: 0 1363 }; 1364 this.params = { 1365 vertexShader: WebWave_vs, 1366 fragmentShader: WebWave_fs, 1367 widthSegments: 40, 1368 heightSegments: 40, 1369 uniforms: { 1370 time: { 1371 name: "uTime", 1372 type: "1f", 1373 value: 0 1374 }, 1375 resolution: { 1376 name: "uReso", 1377 type: "2f", 1378 value: [innerWidth, innerHeight] 1379 } 1380 } 1381 }; 1382 this.initPlane(); 1383 } 1384 1385 initPlane() { 1386 this.plane = this.webGLCurtain.addPlane(this.planeElement, this.params); 1387 1388 if (this.plane) { 1389 this.plane.onReady(() => { 1390 this.update(); 1391 this.initEvent(); 1392 }); 1393 } 1394 } 1395 1396 update() { 1397 this.plane.onRender(() => { 1398 this.plane.uniforms.time.value += 0.01; 1399 this.plane.uniforms.resolution.value = [innerWidth, innerHeight]; 1400 }); 1401 } 1402 1403 initEvent() { 1404 let isHovered = false; 1405 1406 this.planeElement.addEventListener("mouseenter", e => { 1407 isHovered = true; 1408 }); 1409 1410 this.planeElement.addEventListener("mouseout", e => { 1411 isHovered = false; 1412 }); 1413 1414 this.plane.onRender(() => { 1415 if (isHovered) { 1416 this.plane.uniforms.time.value += (45 - this.plane.uniforms.time.value) * 0.0375; 1417 } else { 1418 this.plane.uniforms.time.value += (0 - this.plane.uniforms.time.value) * 0.0375; 1419 } 1420 }); 1421 } 1422 } 1423 1424 if (navigator.userAgent.indexOf('Safari') == -1 || navigator.userAgent.indexOf('Chrome') > -1) { 1425 $('.pxl-image-box1.wave').each(function() { 1426 const $this = $(this), 1427 canvas = $this.find('.canvas')[0], 1428 planeElement = $this.find('.item--image')[0], 1429 initialized = $this.data('initialized'); 1430 1431 if (!initialized && canvas && planeElement) { 1432 new ImgCurtain({ 1433 canvas: canvas, 1434 planeElement: planeElement 1435 }); 1436 $this.data('initialized', true); 1437 } 1438 }); 1439 } 1440 1441 1442 if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) { 1443 $('.pxl-image-box1 .image-front').css('opacity', '1'); 1444 } 1445 1446} 1447 1448function Showcase() { 1449 if( $('#showcase-slider-holder').length > 0 ){ 1450 var controller = new ScrollMagic.Controller(); 1451 var $this = $(this); 1452 var grid_carousel = $('#showcase-slider-holder'); 1453 var interleaveOffset = 0.3;
1454 var settings = grid_carousel.find(".pxl-swiper-container").data().settings; 1455 var showcaseSwiper = new Swiper('#showcase-slider .pxl-swiper-container', { 1456 direction: settings['slide_direction'], 1457 effect: settings['slide_mode'], 1458 wrapperClass: 'pxl-swiper-wrapper', 1459 slideClass: 'pxl-swiper-slide', 1460 slidesPerView: settings['slides_to_show'], 1461 slidesPerGroup: settings['slides_to_scroll'], 1462 slidesPerColumn: settings['slide_percolumn'], 1463 grabCursor: false, 1464 resistance : true, 1465 resistanceRatio:0.5, 1466 allowTouchMove:true, 1467 speed:settings['speed'], 1468 // centeredSlides: true, 1469 autoplay: false, 1470 mousewheel: true, 1471 parallax:true, 1472 navigation: { 1473 nextEl: '.pxl-swiper-arrow-next', 1474 prevEl: '.pxl-swiper-arrow-prev', 1475 }, 1476 pagination: { 1477 type: settings['pagination_type'], 1478 el: grid_carousel.find('.pxl-swiper-dots')[0], 1479 clickable: true, 1480 modifierClass: 'pxl-swiper-pagination-', 1481 bulletClass: 'pxl-swiper-pagination-bullet', 1482 renderCustom: function (swiper, element, current, total) { 1483 return current + ' of ' + total; 1484 } 1485 }, 1486 on: { 1487 progress: function(swiper) { 1488 var swiper = this; 1489 for (var i = 0; i < swiper.slides.length; i++) { 1490 var slideProgress = swiper.slides[i].progress; 1491 var innerOffset = swiper.height * interleaveOffset; 1492 var innerTranslate = slideProgress * innerOffset; 1493 swiper.slides[i].querySelector(".img-mask").style.transform = "translate3d(0," + innerTranslate + "px, 0)"; 1494 } 1495 1496 }, 1497 touchStart: function(swiper) { 1498 var swiper = this; 1499 for (var i = 0; i < swiper.slides.length; i++) { 1500 swiper.slides[i].style.transition = ""; 1501 } 1502 }, 1503 setTransition: function(speed) { 1504 var swiper = this; 1505 speed = settings['speed']; 1506 for (var i = 0; i < swiper.slides.length; i++) { 1507 swiper.slides[i].style.transition = speed + "ms"; 1508 swiper.slides[i].querySelector(".img-mask").style.transition = speed + "ms"; 1509 } 1510 }, 1511 slideChangeTransitionStart: function (swiper) { 1512 1513 $('#showcase-slider .pxl-swiper-slide').find('.slide-title').each(function() { 1514 $(this).removeClass('active-title'); 1515 }); 1516 1517 LinesWidth(); 1518 1519 }, 1520 slideChangeTransitionEnd: function (swiper) { 1521 1522 $('#showcase-slider .swiper-slide-active').find('.slide-title').each(function() { 1523 $(this).addClass('active-title'); 1524 }); 1525 1526 $('#showcase-slider .swiper-slide-duplicate-active').find('.slide-title').each(function() { 1527 $(this).addClass('active-title'); 1528 }); 1529 }, 1530 }, 1531 }); 1532 var listsSwiper = new Swiper('#showcase-slider-lists .pxl-swiper-container', { 1533 speed: 700, 1534 spaceBetween: 0, 1535 slidesPerView: 'auto', 1536 direction: 'vertical', 1537 effect: "slide", 1538 wrapperClass: 'pxl-swiper-wrapper', 1539 slideClass: 'pxl-swiper-slide', 1540 longSwipes:true, 1541 longSwipesRatio:0.5, 1542 touchRatio:3, 1543 longSwipesMs: 0, 1544 centeredSlides: true, 1545 mousewheel: true, 1546 parallax:true, 1547 }); 1548 1549 1550 function LinesWidth() { 1551 1552 var carouselWidth = $('#showcase-slider-holder').width(); 1553 var captionWidth = $('.swiper-slide-active .slide-title').width(); 1554 var lineWidth = carouselWidth / 2 - 120 1555 1556 $(".caption-border.left").css({ 1557 'width': lineWidth - captionWidth/2 + 'px', 1558 'opacity': 1, 1559 }); 1560 $(".caption-border.right").css({ 1561 'width': lineWidth - captionWidth/2 + 'px', 1562 'opacity': 1, 1563 }); 1564 1565 } 1566 1567 LinesWidth(); 1568 1569 showcaseSwiper.controller.control = listsSwiper; 1570 } 1571} 1572 1573function Showcase2() { 1574 if( $('#showcase-slider-holder2').length > 0 ){ 1575 var controller = new ScrollMagic.Controller(); 1576 var $this = $(this); 1577 var grid_carousel = $('#showcase-slider-holder2'); 1578 var interleaveOffset = 0.3;
1579 var settings = grid_carousel.find(".pxl-swiper-container").data().settings; 1580 var showcaseSwiper = new Swiper('#showcase-slider .pxl-swiper-container', { 1581 direction: settings['slide_direction'], 1582 effect: settings['slide_mode'], 1583 wrapperClass: 'pxl-swiper-wrapper', 1584 slideClass: 'pxl-swiper-slide', 1585 slidesPerView: settings['slides_to_show'], 1586 slidesPerGroup: settings['slides_to_scroll'], 1587 slidesPerColumn: settings['slide_percolumn'], 1588 grabCursor: false, 1589 resistance : true, 1590 resistanceRatio:0.5, 1591 allowTouchMove:true, 1592 speed:settings['speed'], 1593 autoplay: settings['autoplay'], 1594 parallax:true, 1595 navigation: { 1596 nextEl: '.pxl-swiper-arrow-next', 1597 prevEl: '.pxl-swiper-arrow-prev', 1598 }, 1599 pagination: { 1600 type: settings['pagination_type'], 1601 el: grid_carousel.find('.pxl-swiper-dots')[0], 1602 clickable: true, 1603 modifierClass: 'pxl-swiper-pagination-', 1604 bulletClass: 'pxl-swiper-pagination-bullet', 1605 renderCustom: function (swiper, element, current, total) { 1606 return current + ' of ' + total; 1607 } 1608 }, 1609 on: { 1610 progress: function(swiper) { 1611 var swiper = this; 1612 for (var i = 0; i < swiper.slides.length; i++) { 1613 var slideProgress = swiper.slides[i].progress; 1614 var innerOffset = swiper.width * interleaveOffset; 1615 var innerTranslate = slideProgress * innerOffset; 1616 swiper.slides[i].querySelector(".img-mask-slide").style.transform = "translate3d(" + innerTranslate + "px,0, 0)"; 1617 } 1618 1619 }, 1620 touchStart: function(swiper) { 1621 var swiper = this; 1622 for (var i = 0; i < swiper.slides.length; i++) { 1623 swiper.slides[i].style.transition = ""; 1624 } 1625 }, 1626 setTransition: function(speed) { 1627 var swiper = this; 1628 speed = settings['speed']; 1629 for (var i = 0; i < swiper.slides.length; i++) { 1630 swiper.slides[i].style.transition = speed + "ms"; 1631 swiper.slides[i].querySelector(".img-mask-slide").style.transition = speed + "ms"; 1632 } 1633 }, 1634 slideChangeTransitionStart: function (swiper) { 1635 1636 $('#showcase-slider .pxl-swiper-slide').find('.slide-title').each(function() { 1637 $(this).removeClass('active-title'); 1638 }); 1639 1640 }, 1641 slideChangeTransitionEnd: function (swiper) { 1642 1643 $('#showcase-slider .swiper-slide-active').find('.slide-title').each(function() { 1644 $(this).addClass('active-title'); 1645 }); 1646 1647 $('#showcase-slider .swiper-slide-duplicate-active').find('.slide-title').each(function() { 1648 $(this).addClass('active-title'); 1649 }); 1650 }, 1651 }, 1652 }); 1653 var listsSwiper = new Swiper('#showcase-slider-lists .pxl-swiper-container', { 1654 speed: 1000, 1655 spaceBetween: 136, 1656 slidesPerView: 2, 1657 slidesPerColumn: 1, 1658 direction: 'horizontal', 1659 effect: "slide", 1660 wrapperClass: 'pxl-swiper-wrapper', 1661 slideClass: 'pxl-swiper-slide', 1662 autoplay: settings['autoplay'], 1663 touchRatio:3, 1664 parallax:true, 1665 breakpoints: { 1666 0 : { 1667 spaceBetween: 20, 1668 slidesPerView: 1, 1669 }, 1670 576 : { 1671 spaceBetween: 20, 1672 slidesPerView: 1, 1673 }, 1674 768 : { 1675 spaceBetween: 40, 1676 }, 1677 992 : { 1678 spaceBetween: 40, 1679 }, 1680 1280 : { 1681 spaceBetween: 80, 1682 }, 1683 } 1684 }); 1685 1686 showcaseSwiper.controller.control = listsSwiper; 1687 listsSwiper.controller.control = showcaseSwiper; 1688 } 1689} 1690 1691function Showcase1() { 1692 if( $('#showcase-slider-holder1').length > 0 ){ 1693 var controller = new ScrollMagic.Controller(); 1694 var $this = $(this); 1695 var grid_carousel = $('#showcase-slider-holder1'); 1696 var interleaveOffset = 0.3;
1697 var settings = grid_carousel.find(".pxl-swiper-container").data().settings; 1698 var showcaseSwiper1 = new Swiper('#showcase-slider .pxl-swiper-container', { 1699 direction: settings['slide_direction'], 1700 effect: settings['slide_mode'], 1701 wrapperClass: 'pxl-swiper-wrapper', 1702 slideClass: 'pxl-swiper-slide', 1703 slidesPerView: settings['slides_to_show'], 1704 slidesPerGroup: settings['slides_to_scroll'], 1705 slidesPerColumn: settings['slide_percolumn'], 1706 grabCursor: false, 1707 resistance : true, 1708 resistanceRatio:0.5, 1709 speed: settings['speed'], 1710 loop : true, 1711 spaceBetween: document.querySelector('.pxl-portfolio-carousel3 #showcase-slider .pxl-swiper-container') ? 0 : 27, 1712 allowTouchMove:true, 1713 speed:settings['speed'], 1714 autoplay: settings['autoplay'], 1715 mousewheel: true, 1716 parallax:true, 1717 navigation: { 1718 nextEl: '.pxl-swiper-arrow-next', 1719 prevEl: '.pxl-swiper-arrow-prev', 1720 }, 1721 pagination: { 1722 type: settings['pagination_type'], 1723 el: grid_carousel.find('.pxl-swiper-dots')[0], 1724 clickable: true, 1725 modifierClass: 'pxl-swiper-pagination-', 1726 bulletClass: 'pxl-swiper-pagination-bullet', 1727 renderCustom: function (swiper, element, current, total) { 1728 return current + ' of ' + total; 1729 } 1730 }, 1731 on: { 1732 touchStart: function(swiper) { 1733 var swiper = this; 1734 for (var i = 0; i < swiper.slides.length; i++) { 1735 swiper.slides[i].style.transition = ""; 1736 } 1737 }, 1738 setTransition: function(speed) { 1739 var swiper = this; 1740 speed = settings['speed']; 1741 for (var i = 0; i < swiper.slides.length; i++) { 1742 swiper.slides[i].style.transition = speed + "ms"; 1743 } 1744 }, 1745 }, 1746 }); 1747 var captionsSwiper1 = new Swiper('#showcase-slider-captions .pxl-swiper-container', { 1748 speed: 1000, 1749 spaceBetween: document.querySelector('.pxl-portfolio-carousel3 #showcase-slider .pxl-swiper-container') ? 0 : 27, 1750 slidesPerView: 3, 1751 direction: 'vertical', 1752 longSwipes:true, 1753 effect: "slide", 1754 wrapperClass: 'pxl-swiper-wrapper', 1755 slideClass: 'pxl-swiper-slide', 1756 longSwipesRatio:0.5, 1757 touchRatio:3, 1758 loop : true, 1759 longSwipesMs: 0, 1760 mousewheel: true, 1761 parallax:true, 1762 }); 1763 var listsSwiper1 = new Swiper('#showcase-slider-lists .pxl-swiper-container', { 1764 speed: 1000, 1765 spaceBetween: document.querySelector('.pxl-portfolio-carousel3 #showcase-slider .pxl-swiper-container') ? 0 : 27, 1766 slidesPerView: 3, 1767 direction: 'vertical', 1768 effect: "slide", 1769 wrapperClass: 'pxl-swiper-wrapper', 1770 slideClass: 'pxl-swiper-slide', 1771 longSwipes:true, 1772 longSwipesRatio:0.5, 1773 touchRatio:3, 1774 loop : true, 1775 longSwipesMs: 0, 1776 mousewheel: true, 1777 parallax:true, 1778 }); 1779 1780 showcaseSwiper1.controller.control = captionsSwiper1; 1781 captionsSwiper1.controller.control = listsSwiper1; 1782 } 1783} 1784 1785 1786function kimono_functions_slider() { 1787 // 1. Safety Check: If GSAP isn't loaded, stop immediately 1788 if (typeof gsap === 'undefined') { return; } 1789 1790 // 2. Define the main slider elements 1791 var $sliders = $("#showcase-slider-holder, #showcase-slider-holder2"); 1792 1793 // 3. CRITICAL CHECK: If no sliders exist on this page, STOP the function here. 1794 // This prevents the "GSAP target not found" error on pages like About Us. 1795 if ($sliders.length === 0) { 1796 return; 1797 } 1798 1799 // 4. If we are here, the slider exists. Define other elements.
1800 var $arrowsPrev = $(".pxl-swiper-arrow-prev"); 1801 var $arrowsNext = $(".pxl-swiper-arrow-next"); 1802 var $pagination = $(".swiper-pagination-bullet"); 1803 var $arrowsWrap = $(".arrows-wrap"); 1804 var $carouselWrap = $(".carousel-allprojects-wrapper"); 1805 var $titles = $("#showcase-slider-holder .pxl-swiper-slide .slide-title span, #showcase-slider-holder2 .pxl-swiper-slide .slide-title span"); 1806 var $smallTitles = $(".slide-small-title span"); 1807 1808 // 5. Run Animations (Only on found elements) 1809 1810 // Animate Slider Container 1811 gsap.set($sliders, {opacity:0, scale:1}); 1812 gsap.to($sliders, {duration: 0.7, opacity:1, delay:0.6, ease:Power2.easeOut}); 1813 1814 setTimeout(function(){ 1815 $sliders.addClass("loaded"); 1816 }, 1500); 1817 1818 // Group elements to hide initially 1819 var $hiddenElements = $.merge($.merge($.merge($arrowsPrev, $arrowsNext), $pagination), $arrowsWrap); 1820 if ($hiddenElements.length > 0) { 1821 gsap.set($hiddenElements, {opacity:0}); 1822 } 1823 1824 // Animate Previous Arrow 1825 if ($arrowsPrev.length > 0) { 1826 gsap.to($arrowsPrev, {duration: 0.7, force3D:true, y: 0, opacity:1, rotation:0, delay:1.2, ease:Power2.easeOut}); 1827 } 1828 1829 // Animate Pagination & Wrappers 1830 var $miscWraps = $.merge($.merge($pagination, $arrowsWrap), $carouselWrap); 1831 if ($miscWraps.length > 0) { 1832 gsap.to($miscWraps, {duration: 0.7, force3D:true, y:0, opacity:1, rotation:0, delay:1.1, ease:Power2.easeOut}); 1833 } 1834 1835 // Animate Next Arrow 1836 if ($arrowsNext.length > 0) { 1837 gsap.to($arrowsNext, {duration: 0.7, force3D:true, y: 0, opacity:1, rotation:0, delay:1.2, ease:Power2.easeOut}); 1838 } 1839 1840 // Animate Main Titles 1841 if ($titles.length > 0) { 1842 gsap.to($titles, {duration: 1, force3D:true, y: 0, opacity:1, delay:0.8, ease:Power2.easeOut}); 1843 } 1844 1845 // Animate Small Titles 1846 if ($smallTitles.length > 0) { 1847 var tlSmallTitles = gsap.timeline(); 1848 $smallTitles.each(function(index, element) { 1849 tlSmallTitles.to(element, {duration: 0.5, force3D:true, y:0, opacity:1, delay:1, ease:Power2.easeOut}, index * 0.05); 1850 }); 1851 } 1852} 1853 1854 1855// function kimono_functions_slider() { 1856// gsap.set($("#showcase-slider-holder,#showcase-slider-holder2"), {opacity:0, scale:1}); 1857// gsap.to($("#showcase-slider-holder,#showcase-slider-holder2"), {duration: 0.7, opacity:1, delay:0.6, ease:Power2.easeOut}); 1858// gsap.set($(".pxl-swiper-arrow-prev, .pxl-swiper-arrow-next, .swiper-pagination-bullet, .arrows-wrap"), {opacity:0}); 1859// gsap.to($(".pxl-swiper-arrow-prev"), {duration: 0.7, force3D:true, y: 0, opacity:1, rotation:0, delay:1.2, ease:Power2.easeOut}); 1860// gsap.to($(".swiper-pagination-bullet, .arrows-wrap, .carousel-allprojects-wrapper"), {duration: 0.7, force3D:true, y:0, opacity:1, rotation:0, delay:1.1, ease:Power2.easeOut}); 1861// gsap.to($(".pxl-swiper-arrow-next"), {duration: 0.7, force3D:true, y: 0, opacity:1, rotation:0, delay:1.2, ease:Power2.easeOut}); 1862// gsap.to($("#showcase-slider-holder .pxl-swiper-slide .slide-title span,#showcase-slider-holder2 .pxl-swiper-slide .slide-title span"), {duration: 1, force3D:true, y: 0, opacity:1, delay:0.8, ease:Power2.easeOut}); 1863// setTimeout( function(){ 1864// $('#showcase-slider-holder,#showcase-slider-holder2').addClass("loaded"); 1865// } , 1500 ); 1866// var tlSmallTitles = gsap.timeline(); 1867// $(".slide-small-title span").each(function(index, element) { 1868// tlSmallTitles.to(element, {duration: 0.5, force3D:true, y:0, opacity:1, delay:1, ease:Power2.easeOut}, index * 0.05) 1869// }); 1870// } 1871 1872function kimono_functions() { 1873 // Detect mobile device 1874 var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Nokia|Opera Mini/i.test(navigator.userAgent) ? true : false; 1875 1876 // Add class "is-mobile" to </body> 1877 if(isMobile) { 1878 $("body").addClass("is-mobile"); 1879 } else { 1880 $("body").removeClass("is-mobile"); 1881 } 1882 1883 /* Svg Length */ 1884 var getSvgLength = $('.pxl-draw-svg svg path'); 1885 getSvgLength.each(function() { 1886 var pathLength = this.getTotalLength(); 1887 $(this).attr('stroke-dasharray', pathLength); 1888 return pathLength; 1889 }); 1890 1891 $('.pxl-draw-svg svg path').each(function() { 1892 var stroke = $(this).attr('stroke-dasharray'); 1893 $(this).css({ 1894 "stroke-dasharray": stroke, 1895 "stroke-dashoffset": stroke 1896 }); 1897 1898 var randomId = 'path_' + Math.floor(Math.random() * 1000000); 1899 $(this).attr('id', randomId); 1900 1901 var elementId = $(this).attr('id'); 1902 var animationName = 'drawAnimation_' + elementId; 1903 var keyframes = '@keyframes ' + animationName + ' { ' + 1904 'from { stroke-dashoffset: ' + stroke + '; } ' + 1905 'to { stroke-dashoffset: 0; } ' + 1906 '}'; 1907 1908 var styleElement = $('<style>').text(keyframes); 1909 $('head').append(styleElement); 1910 $(this).css({ 1911 'animation-name': animationName, 1912 'animation-duration': '2s', 1913 'animation-timing-function': 'ease', 1914 'animation-fill-mode': 'forwards', 1915 'animation-iteration-count': 'infinite' 1916 }); 1917 }); 1918 1919 /* Custom Effect Scroll */ 1920 $('.pxl-section-overlay-scroll').each(function () { 1921 $(this).find('.elementor-background-overlay').addClass('element-scroll'); 1922 }); 1923 1924 $('.pxl-section-scroll').each(function () { 1925 gsap.registerPlugin(ScrollTrigger); 1926 const scrollEx = () => { 1927 document.body.style.overflow = 'auto'; 1928 var prevSection = $(this).prev('section'); 1929 gsap.utils.toArray($(this).find('.element-scroll')).forEac
1929h((section, index) => { 1930 const w = section; 1931 var x = w.scrollWidth * -1; 1932 var xEnd = 0; 1933 if($(section).closest('.pxl-section-scroll').hasClass('revesal')){ 1934 x = '100%'; 1935 xEnd = (w.scrollWidth + 50 - section.offsetWidth) * -1; 1936 } 1937 gsap.fromTo(w, { x }, { 1938 x: xEnd, 1939 scrollTrigger: { 1940 trigger: prevSection, 1941 start: 'top 10%', 1942 end: 'bottom 50%', 1943 scrub: 0.5 1944 } 1945 }); 1946 }); 1947 } 1948 scrollEx(); 1949 }); 1950 1951} 1952 1953function scrolling() { 1954 var distanceY = window.pageYOffset || document.documentElement.scrollTop, 1955 shrinkOn = 0, 1956 header = jQuery("header"); 1957 var header_fix = header.find('.header-mobile-fixed'); 1958 if (distanceY > shrinkOn) { 1959 header_fix.addClass("smaller"); 1960 } else { 1961 if (header_fix.hasClass('smaller')) { 1962 header_fix.removeClass('smaller'); 1963 } 1964 } 1965} 1966 1967function kimono_functions_rsz() { 1968 /* Custom Post */ 1969 var dhi = 0; 1970 $(".pxl-item-single-post .pxl-post--navigation .nav--title").each(function() { 1971 var default_height = $(this).height(); 1972 if(default_height > dhi){ 1973 dhi = default_height; 1974 } 1975 }); 1976 $('.pxl-item-single-post .pxl-post--navigation .nav--line').css("height", dhi); 1977 1978 /* Custom width nice select shop archive */ 1979 $('.woocommerce .nice-select').each(function() { 1980 var default_width = $('.woocommerce .products:not(.pxl-products-list) .woocommerce-product-inner').width(); 1981 $(this).css("min-width", default_width); 1982 if ($('ul').hasClass('pxl-products-list')) { 1983 $(this).css({ 1984 "min-width": "270px" 1985 }); 1986 } 1987 }); 1988 1989 /* Custom scroll flex control shop single */ 1990 $('.woocommerce .woocommerce-summary-wrap.row .flex-control-nav').each(function () { 1991 var count_nav_item = $(this).find('li').length; 1992 if (count_nav_item >= 4) { 1993 $(this).addClass('pxl-custom-scroll'); 1994 var flex_height = $(this).parent().height(); 1995 $(this).css("max-height", flex_height); 1996 } 1997 }); 1998 1999 /* Blog List Scroll */ 2000 $(".blog-list-scroll").each(function() { 2001 var get_height = $(this).find(".pxl-grid-item").height(); 2002 var list_height = (get_height * 2) + 40; 2003 $(this).find(".pxl-blog-inner").css('max-height', list_height); 2004 2005 $(".blog-list-scroll .pxl-blog-inner").overlayScrollbars({ 2006 className: "os-theme-thick-dark", 2007 overflowBehavior : { 2008 x : "hidden", 2009 y : "scroll" 2010 }, 2011 }); 2012 2013 $(this).find(".pxl-blog-inner").hover(function () { 2014 $(this).find(".os-scrollbar-handle").addClass('pxl-scrollbar-transition'); 2015 }); 2016 $(this).find(".pxl-blog-inner").mouseleave(function() { 2017 setTimeout(() => { 2018 $(this).find(".os-scrollbar-handle").removeClass('pxl-scrollbar-transition'); 2019 }, 300); 2020 }); 2021 }); 2022 2023 /* Custom Grid Filter Moving Border */ 2024 $('.pxl-grid-filter1').each(function () { 2025 var marker = $(this).find('.filter-marker'), 2026 item = $(this).find('.filter-item'), 2027 current = $(this).find('.filter-item.active'), 2028 offsetTop = current.position().top; 2029 marker.css({ 2030 top: offsetTop + current.outerHeight(), 2031 left: current.position().left, 2032 width: current.outerWidth(), 2033 display: "block" 2034 }); 2035 2036 item.mouseover(function () { 2037 var self = $(this), 2038 offsetacTop = self.position().top, 2039 offsetLeft = self.position().left, 2040 width = self.outerWidth() || current.outerWidth(), 2041 top = offsetacTop == 0 ? 0 : offsetacTop || offsetTop, 2042 left = offsetLeft == 0 ? 0 : offsetLeft || current.position().left; 2043 marker.stop().animate({ 2044 top: top + current.outerHeight(), 2045 left: left, 2046 width: width, 2047 }, 300); 2048 }); 2049 2050 item.on('click', function () { 2051 current = $(this); 2052 }); 2053 2054 item.mouseleave(function () { 2055 var offsetlvTop = current.position().top; 2056 marker.stop().animate({ 2057 top: offsetlvTop + current.outerHeight(), 2058 left: current.position().left, 2059 width: current.outerWidth() 2060 }, 300); 2061 }); 2062 }); 2063 2064 /* Custom Slider Carousel */ 2065 // Slider 03, 04 2066 $('.pxl-slider-carousel3, .pxl-slider-carousel4').each(function () { 2067 var $this = $(this);
2068 var slides = $this.find('.pxl-swiper-slide'); 2069 2070 function calculateHeight() { 2071 slides.css('min-height', ''); 2072 var maxHeight = 0; 2073 slides.each(function () { 2074 var slideHeight = $(this).outerHeight(); 2075 if (slideHeight > maxHeight) { 2076 maxHeight = slideHeight; 2077 } 2078 }); 2079 slides.css('min-height', maxHeight + 'px'); 2080 } 2081 calculateHeight(); 2082 }); 2083 2084 // Slider 05 2085 $('.pxl-slider-carousel5').each(function() { 2086 $(this).find('.pxl-swiper-container').css('min-height', ''); 2087 $(this).hover(function() { 2088 var elements = $(this).find('.pxl-swiper-container'); 2089 elements.each(function() { 2090 var elementHeight = $(this).height(); 2091 $(this).css('min-height', elementHeight + 'px'); 2092 }); 2093 }); 2094 }); 2095 2096 // Slider 06, 04 2097 $('.pxl-slider-carousel6, .pxl-slider-carousel4.style2').each(function() { 2098 var slider = $(this); 2099 var tiltElement = slider.find(".pxl-item--content"); 2100 if (tiltElement.length > 0) { 2101 tiltElement.each(function() { 2102 var $this = $(this); 2103 if(pxl_window_width > 767) { 2104 VanillaTilt.init($this[0], { 2105 max: 3, 2106 speed: 1000, 2107 scale: 1.01, 2108 glare: false, 2109 "max-glare": 0.5, 2110 perspective: 1400, 2111 easing: "cubic-bezier(.03, .98, .52, .99)", 2112 reset: true 2113 }); 2114 } 2115 }); 2116 } 2117 }); 2118 2119} 2120 2121$( document ).ajaxComplete(function() { 2122 kimono_quantity_icon(); 2123 kimono_post_grid(); 2124 kimono_functions(); 2125 setTimeout(function () { 2126 kimono_grid_effects(); 2127 }, 500); 2128}); 2129})(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.