1/* ============== 2 ========= js documentation ========================== 3 4 * template name: Charifund 5 * version: 1.0 6 * description: Nonprofit NGO Fundraising HTML5 Template 7 * author: wowtheme7 8 * author-url: https://themeforest.net/user/wowtheme7 9 10 ================================================== 11 12 01. preloader 13 ------------------------------------------------- 14 02. background image 15 ------------------------------------------------- 16 03. custom cursor 17 ------------------------------------------------- 18 04. scroll to top with progress 19 ------------------------------------------------- 20 05. add active class to the current link 21 ------------------------------------------------- 22 06. open search box 23 ------------------------------------------------- 24 07. mobile menu 25 ------------------------------------------------- 26 08. fixed header on scroll 27 ------------------------------------------------- 28 09. nice select 29 ------------------------------------------------- 30 10. open sidebar info 31 ------------------------------------------------- 32 11. off canvas cart 33 ------------------------------------------------- 34 12. banner one slider 35 ------------------------------------------------- 36 13. banner two slider 37 ------------------------------------------------- 38 14. banner three slider 39 ------------------------------------------------- 40 15. partner slider 41 ------------------------------------------------- 42 16. difference slider 43 ------------------------------------------------- 44 17. video popup 45 ------------------------------------------------- 46 18. cause slider 47 ------------------------------------------------- 48 19. donate amount 49 ------------------------------------------------- 50 20. testimonial slider 51 ------------------------------------------------- 52 21. cause two slider content 53 ------------------------------------------------- 54 22. difference tab 55 ------------------------------------------------- 56 23. odometer counter 57 ------------------------------------------------- 58 24. testimonial two slider 59 ------------------------------------------------- 60 25. testimonial three slider 61 ------------------------------------------------- 62 26. coming soon 63 ------------------------------------------------- 64 27. countdown 65 ------------------------------------------------- 66 28. product details slider 67 ------------------------------------------------- 68 29. product details tab 69 ------------------------------------------------- 70 30. social link active on hover 71 ------------------------------------------------- 72 31. footer copyright year 73 ------------------------------------------------- 74 32. aos initialization 75 ------------------------------------------------- 76 33. vanilla tilt animation 77 ------------------------------------------------- 78 34. register gsap 79 ------------------------------------------------- 80 35. gsap null config 81 ------------------------------------------------- 82 36. target section with gsap 83 ------------------------------------------------- 84 37. parallax image with gsap 85 ------------------------------------------------- 86 38. title animation 87 ------------------------------------------------- 88 39. banner three image animation 89 ------------------------------------------------- 90 40. progress bar 91 ------------------------------------------------- 92 41. circular progress bar 93 ------------------------------------------------- 94 42. banner animation 95 96 ================================================== 97============== */ 98 99(function ($) { 100 "use strict"; 101 102 jQuery(function () { 103 let device_width = window.innerWidth; 104 let initialScroll = $(window).scrollTop(); 105 106 /** 107 * ====================================== 108 * 01. preloader 109 * ====================================== 110 */ 111 112 if ($(".preloader").length) { 113 $(".preloader").delay(500).fadeOut(); 114 } 115 116 /** 117 * ====================================== 118 * 02. background image 119 * ====================================== 120 */ 121 $("[data-background]").each(function () { 122 var backgroundImages = $(this).attr("data-background").split(","); 123 var cssValue = backgroundImages 124 .map(function (image) { 125 return 'url("' + image.trim() + '")'; 126 }) 127 .join(","); 128 129 $(this).css("background-image", cssValue); 130 }); 131 132 /** 133 * ====================================== 134 * 03. custom cursor 135 * ====================================== 136 */ 137 if ($(".mouseCursor").length > 0) {
138 function itCursor() { 139 var myCursor = jQuery(".mouseCursor"); 140 if (myCursor.length) { 141 if ($("body")) { 142 const e = document.querySelector(".cursor-inner"), 143 t = document.querySelector(".cursor-outer"); 144 let n, 145 i = 0, 146 o = !1; 147 (window.onmousemove = function (s) { 148 o || 149 (t.style.transform = 150 "translate(" + s.clientX + "px, " + s.clientY + "px)"), 151 (e.style.transform = 152 "translate(" + s.clientX + "px, " + s.clientY + "px)"), 153 (n = s.clientY), 154 (i = s.clientX); 155 }), 156 $("body").on( "mouseenter", "button, a, .cursor-pointer", function () { 157 e.classList.add("cursor-hover"), 158 t.classList.add("cursor-hover"); 159 } 160 ), 161 $("body").on( "mouseleave", "button, a, .cursor-pointer", 162 function () { 163 ($(this).is("a", "button") && 164 $(this).closest(".cursor-pointer").length) || 165 (e.classList.remove("cursor-hover"), 166 t.classList.remove("cursor-hover")); 167 } 168 ), 169 (e.style.visibility = "visible"), 170 (t.style.visibility = "visible"); 171 } 172 } 173 } 174 itCursor(); 175 } 176 177 /** 178 * ====================================== 179 * 04. scroll to top with progress 180 * ====================================== 181 */ 182 if ($(".progress-wrap").length > 0) { 183 var progressPath = document.querySelector(".progress-wrap path"); 184 var pathLength = progressPath.getTotalLength(); 185 progressPath.style.transition = progressPath.style.WebkitTransition = 186 "none"; 187 progressPath.style.strokeDasharray = pathLength + " " + pathLength; 188 progressPath.style.strokeDashoffset = pathLength; 189 progressPath.getBoundingClientRect(); 190 progressPath.style.transition = progressPath.style.WebkitTransition = 191 "stroke-dashoffset 10ms linear"; 192 var updateProgress = function () { 193 var scroll = $(window).scrollTop(); 194 var height = $(document).height() - $(window).height(); 195 var progress = pathLength - (scroll * pathLength) / height; 196 progressPath.style.strokeDashoffset = progress; 197 }; 198 updateProgress(); 199 $(window).scroll(updateProgress); 200 var offset = 50; 201 var duration = 1500; 202 $(window).on("scroll", function () { 203 if ($(this).scrollTop() > offset) { 204 $(".progress-wrap").addClass("active-progress"); 205 } else { 206 $(".progress-wrap").removeClass("active-progress"); 207 } 208 }); 209 $(".progress-wrap").on("click", function (event) { 210 event.preventDefault(); 211 $("html, body") 212 .stop() 213 .css("scroll-behavior", "auto") 214 .animate( 215 { 216 scrollTop: 0, 217 }, 218 { 219 duration: 1500, 220 easing: "swing", 221 complete: function () { 222 $("html, body").css("scroll-behavior", "smooth"); 223 }, 224 } 225 ); 226 return false; 227 }); 228 229 if (initialScroll >= 50) { 230 $(".progress-wrap").addClass("active-progress"); 231 } 232 } 233 234 /** 235 * ====================================== 236 * 05. add active class to the current link 237 * ====================================== 238 */ 239 function dynamicCurrentMenuClass(selector) { 240 let FileName = window.location.href.split("/").reverse()[0]; 241 242 selector.find("li").removeClass("active"); 243 selector 244 .find(".navbar__dropdown-label") 245 .removeClass("navbar__item-active"); 246 247 selector.find("li").each(function () { 248 let anchor = $(this).find("a"); 249 if ($(anchor).attr("href") === FileName) { 250 $(this).addClass("active"); 251 } 252 }); 253 254 const activeDropdownItem = selector.find(".navbar__sub-menu .active"); 255 if (activeDropdownItem.length) { 256 activeDropdownItem.parents("li").addClass("active"); 257 } 258 259 selector.find("li").each(function () { 260 if ($(this).find(".active").length) { 261 $(this).addClass("active"); 262 } 263 }); 264 265 if (FileName === "") { 266 selector.find('li:has(a[href="index.html"])').addClass("active"); 267 } 268 } 269 if ($("header").length) { 270 dynamicCurrentMenuClass($("header")); 271 } 272 273 /** 274 * ====================================== 275 * 06. open search box 276 * ====================================== 277 */ 278 if ($(".search-popup").length > 0) { 279 $(".open-search").on("click", function () { 280 $("body").addClass("search-active"); 281 }); 282 283 $(".close-search").on("click", function () { 284 $("body").removeClass("search-active"); 285 }); 286 } 287 288 /** 289 * ====================================== 290 * 07. mobile menu 291 * ====================================== 292 */ 293 if ($(".mobile-menu").length > 0) { 294 var mobileMenuContent = $(".navbar__menu").html(); 295 $(".mobile-menu__list").append(mobileMenuContent); 296 297 $(".mobile-menu .navbar__dropdown-label").on("click", function () { 298 $(this).parent().siblings().find(".navbar__sub-menu").slideUp(500); 299 $(this) 300 .parent() 301 .siblings() 302 .find(".navbar__dropdown-label") 303 .removeClass("navbar__item-active"); 304 $(this).siblings(".navbar__sub-menu").slideToggle(500); 305 $(this).toggleClass("navbar__item-active"); 306 }); 307 } 308 309 $(".open-offcanvas-nav").on("click", function () { 310 $(this).addClass("open-offcanvas-nav-active"); 311 $(".mobile-menu__backdrop").addClass("mobile-menu__backdrop-active"); 312 $(".nav-fade").each(function (i) { 313 $(this).css("animation-delay", 0.10 * 1 * i + "s"); 314 }); 315 316 $(".mobile-menu").addClass("show-menu"); 317 $(".mobile-menu__wrapper").removeClass("nav-fade-active"); 318 }); 319 320 $(".close-mobile-menu, .mobile-menu__backdrop").on("click", function () { 321 $(".open-offcanvas-nav").removeClass("open-offcanvas-nav-active"); 322 $(".mobile-menu").removeClass("show-menu"); 323 $(".mobile-menu__backdrop").removeClass("mobile-menu__backdrop-active"); 324 $(".mobile-menu__wrapper").addClass("nav-fade-active"); 325 $(".mobile-menu .navbar__dropdown-label").removeClass( 326 "navbar__item-active" 327 ); 328 $(".mobile-menu .navbar__sub-menu").slideUp(0); 329 }); 330 331 $(".navbar__item.navbar__item--has-children > a").on("click", function (e) { 332 e.preventDefault(); 333 }); 334 335 $(window).on("resize", function () { 336 // sidebar info 337 $(".off-canvas").removeClass("off-canvas-active"); 338 $(".off-canvas-backdrop").removeClass("off-canvas-backdrop-active"); 339 340 // mobile menu 341 $(".mobile-menu").removeClass("show-menu"); 342 $(".mobile-menu__backdrop").removeClass("mobile-menu__backdrop-active"); 343 $(".mobile-menu__wrapper").addClass("nav-fade-active"); 344 $(".mobile-menu .navbar__dropdown-label").removeClass( 345 "navbar__item-active" 346 ); 347 $(".mobile-menu .navbar__sub-menu").slideUp(0); 348 $(".open-offcanvas-nav").removeClass("open-offcanvas-nav-active"); 349 }); 350 351 /** 352 * ====================================== 353 * 08. fixed header on scroll 354 * ====================================== 355 */ 356 $(window).on("scroll", function () { 357 var scroll = $(window).scrollTop(); 358 if (scroll < 160) { 359 $(".header").removeClass("sticky-header"); 360 } else { 361 $(".header").addClass("sticky-header"); 362 } 363 }); 364 365 if (initialScroll >= 100) { 366 $(".header").addClass("sticky-header"); 367 } 368 369 /** 370 * ====================================== 371 * 09. nice select 372 * ====================================== 373 */ 374 $("select").niceSelect(); 375 376 /** 377 * ====================================== 378 * 10. open sidebar info 379 * ====================================== 380 */ 381 $(".open-sidenav").on("click", function () { 382 $(".off-canvas-backdrop").toggleClass("off-canvas-backdrop-active"); 383 $(".off-canvas").toggleClass("off-canvas-active"); 384 }); 385 386 $(".off-canvas-backdrop, .off-canvas-close").on("click", function () { 387 $(".off-canvas").removeClass("off-canvas-active"); 388 $(".off-canvas-backdrop").removeClass("off-canvas-backdrop-active"); 389 }); 390 391 /** 392 * ====================================== 393 * 12. banner one slider 394 * ====================================== 395 */ 396 var bannerOne = new Swiper(".banner-two__slider", { 397 loop: true, 398 speed: 2000,
399 slidesPerView: 1, 400 slidesPerGroup: 1, 401 spaceBetween: 0, 402 effect: "fade", 403 fadeEffect: { 404 crossFade: true, 405 }, 406 autoplay: { 407 delay: 6000, 408 disableOnInteraction: false, 409 pauseOnMouseEnter: true, 410 }, 411 navigation: { 412 nextEl: ".next-banner", 413 prevEl: ".prev-banner", 414 }, 415 }); 416 417 /** 418 * ====================================== 419 * 13. banner two slider 420 * ====================================== 421 */ 422 var bannerTwo = new Swiper(".banner__slider", { 423 loop: true, 424 speed: 2000, 425 slidesPerView: 1, 426 slidesPerGroup: 1, 427 spaceBetween: 24, 428 effect: "fade", 429 fadeEffect: { 430 crossFade: true, 431 }, 432 autoplay: { 433 delay: 6000, 434 disableOnInteraction: false, 435 pauseOnMouseEnter: true, 436 }, 437 }); 438 439 /** 440 * ====================================== 441 * 14. banner three slider 442 * ====================================== 443 */ 444 var bannerThree = new Swiper(".banner-three__slider", { 445 loop: true, 446 speed: 2000, 447 slidesPerView: 1, 448 slidesPerGroup: 1, 449 spaceBetween: 24, 450 effect: "fade", 451 fadeEffect: { 452 crossFade: true, 453 }, 454 autoplay: { 455 delay: 6000, 456 disableOnInteraction: false, 457 pauseOnMouseEnter: true, 458 }, 459 }); 460 461 /** 462 * ====================================== 463 * 15. partner slider 464 * ====================================== 465 */ 466 var partners = new Swiper(".partner__slider", { 467 loop: true, 468 speed: 1000, 469 slidesPerView: 1, 470 slidesPerGroup: 1, 471 spaceBetween: 24, 472 freeMode: true, 473 centeredSlides: true, 474 autoplay: { 475 delay: 2000, 476 disableOnInteraction: false, 477 pauseOnMouseEnter: true, 478 }, 479 breakpoints: { 480 420: { 481 slidesPerView: 2, 482 }, 483 576: { 484 slidesPerView: 3, 485 }, 486 992: { 487 slidesPerView: 5, 488 }, 489 }, 490 }); 491 492 /** 493 * ====================================== 494 * 16. difference slider 495 * ====================================== 496 */ 497 var differenceSlider = new Swiper(".difference__slider", { 498 loop: true, 499 speed: 1000, 500 slidesPerView: 1, 501 slidesPerGroup: 1, 502 spaceBetween: 24, 503 autoplay: { 504 delay: 3000, 505 disableOnInteraction: false, 506 pauseOnMouseEnter: true, 507 }, 508 navigation: { 509 nextEl: ".next-difference", 510 prevEl: ".prev-difference", 511 }, 512 breakpoints: { 513 768: { 514 slidesPerView: 2, 515 }, 516 1200: { 517 slidesPerView: 3, 518 }, 519 }, 520 }); 521 522 /** 523 * ====================================== 524 * 17. video popup 525 * ====================================== 526 */ 527 if (document.querySelector(".open-video-popup") !== null) { 528 $(".open-video-popup").magnificPopup({ 529 disableOn: 768, 530 type: "iframe", 531 mainClass: "mfp-fade", 532 removalDelay: 160, 533 preloader: false, 534 fixedContentPos: false, 535 }); 536 } 537 538 /** 539 * ====================================== 540 * 19. donate amount 541 * ====================================== 542 */ 543 if ($("#donationAmount").length > 0) { 544 const activeAmount = $(".donation-amount.active").text(); 545 $("#donationAmount").val(activeAmount); 546 547 $(".donation-amount").on("click", function () { 548 $(".donation-amount").removeClass("active"); 549 $(this).addClass("active"); 550 551 if ($(this).hasClass("custom-amount")) { 552 $("#donationAmount").val("").focus(); // Clear and focus input for custom amount 553 } else { 554 const amount = $(this).text(); 555 $("#donationAmount").val(amount); 556 } 557 }); 558 } 559 560 /** 561 * ====================================== 562 * 20. testimonial slider 563 * ====================================== 564 */ 565 var testimonial = new Swiper(".testimonial__slider", { 566 loop: true, 567 speed: 1000, 568 slidesPerView: 1, 569 slidesPerGroup: 1, 570 spaceBetween: 24, 571 572 autoplay: { 573 delay: 2000,
574 disableOnInteraction: false, 575 pauseOnMouseEnter: true, 576 }, 577 navigation: { 578 nextEl: ".next-testimonial", 579 prevEl: ".prev-testimonial", 580 }, 581 582 breakpoints: { 583 768: { 584 slidesPerView: 2, 585 }, 586 1200: { 587 slidesPerView: 3, 588 }, 589 }, 590 }); 591 592 /** 593 * ====================================== 594 * 21. cause two slider content 595 * ====================================== 596 */ 597 var causeTwoSliderThumb = new Swiper(".cause-two__content-slider", { 598 loop: true, 599 speed: 1000, 600 slidesPerView: 1, 601 slidesPerGroup: 1, 602 spaceBetween: 24, 603 centeredSlides: true, 604 watchSlidesProgress: true, 605 effect: "fade", 606 607 fadeEffect: { 608 crossFade: true, 609 }, 610 autoplay: { 611 delay: 3000, 612 disableOnInteraction: false, 613 pauseOnMouseEnter: true, 614 }, 615 navigation: { 616 nextEl: ".next-cause-two", 617 prevEl: ".prev-cause-two", 618 }, 619 }); 620 621 var causeTwoSlider = new Swiper(".cause-two__slider", { 622 loop: true, 623 speed: 1000, 624 slidesPerView: 1, 625 slidesPerGroup: 1, 626 spaceBetween: 24, 627 effect: "coverflow", 628 grabCursor: true, 629 centeredSlides: true, 630 loopAddBlankSlides: true, 631 loopAdditionalSlides: 1, 632 slideToClickedSlide: true, 633 roundLengths: true, 634 coverflowEffect: { 635 rotate: 40, 636 stretch: 0, 637 depth: 100, 638 modifier: 1, 639 slideShadows: false, 640 }, 641 autoplay: { 642 delay: 3000, 643 disableOnInteraction: false, 644 pauseOnMouseEnter: true, 645 }, 646 thumbs: { 647 swiper: causeTwoSliderThumb, 648 }, 649 navigation: { 650 nextEl: ".next-cause-two", 651 prevEl: ".prev-cause-two", 652 }, 653 breakpoints: { 654 768: { 655 slidesPerView: 2, 656 }, 657 1400: { 658 slidesPerView: 3, 659 }, 660 }, 661 }); 662 663 /** 664 * ====================================== 665 * 22. difference tab 666 * ====================================== 667 */ 668 669 $(".difference-two__content-single").hide(); 670 $(".difference-two__content-single:first").show(); 671 672 $(".difference-two__tab-btn").on("click", function () { 673 $(".difference-two__tab-btn").removeClass("active"); 674 $(this).addClass("active"); 675 $(".difference-two__content-single").hide(); 676 var target = $(this).data("target"); 677 $(target).fadeIn(500); 678 return false; 679 }); 680 681 /** 682 * ====================================== 683 * 23. odometer counter 684 * ====================================== 685 */ 686 $(".odometer").each(function () { 687 $(this).isInViewport(function (status) { 688 if (status === "entered") { 689 for ( 690 var i = 0; 691 i < document.querySelectorAll(".odometer").length; 692 i++ 693 ) { 694 var el = document.querySelectorAll(".odometer")[i]; 695 el.innerHTML = el.getAttribute("data-odometer-final"); 696 } 697 } 698 }); 699 }); 700 701 /** 702 * ====================================== 703 * 24. testimonial two slider 704 * ====================================== 705 */ 706 var testimonialTwo = new Swiper(".testimonial-two__slider", { 707 loop: true, 708 speed: 2000, 709 slidesPerView: 1, 710 slidesPerGroup: 1, 711 spaceBetween: 0, 712 effect: "fade", 713 fadeEffect: { 714 crossFade: true, 715 }, 716 autoplay: { 717 delay: 6000, 718 disableOnInteraction: false, 719 pauseOnMouseEnter: true, 720 }, 721 navigation: { 722 nextEl: ".next-testimonial-two", 723 prevEl: ".prev-testimonial-two", 724 }, 725 }); 726 727 /** 728 * ====================================== 729 * 25. testimonial three slider 730 * ====================================== 731 */ 732 var testimonialThree = new Swiper(".testimonial-three__slider", { 733 loop: true, 734 speed: 1000, 735 slidesPerView: 1, 736 slidesPerGroup: 1, 737 spaceBetween: 24, 738 739 autoplay: { 740 delay: 2000, 741 disableOnInteraction: false, 742 pauseOnMouseEnter: true, 743 }, 744 navigation: { 745 nextEl: ".next-testimonial-three", 746 prevEl: ".prev-testimonial-three", 747 }, 748 749 breakpoints: { 750 1400: { 751 slidesPerView: 2, 752 }, 753 }, 754 }); 755 756 /** 757 * ====================================== 758 * 26. coming soon 759 * ====================================== 760 */ 761 if ($(".clock").length > 0) { 762 const hourMarkersContainer = document.querySelector('.hour-markers'); 763 for (let i = 0; i < 12; i++) { 764 const marker = document.createElement('div'); 765 marker.classList.add('hour-marker'); 766 const rotation = i * 30; 767 marker.style.transform = `rotate(${rotation}deg) translateY(-216.25px)`; 768 769 const hourText = document.createElement('span'); 770 hourText.textContent = i === 0 ? '12' : i; 771 hourText.style.transform = `rotate(-${rotation}deg)`; 772 marker.appendChild(hourText); 773 774 hourMarkersContainer.appendChild(marker); 775 } 776 777 const hourHand = document.querySelector(".hour-hand"); 778 const minuteHand = document.querySelector(".minute-hand"); 779 const secondHand = document.querySelector(".second-hand"); 780 781 function setClock() { 782 const now = new Date(); 783 const seconds = now.getSeconds() + now.getMilliseconds() / 1000; 784 const minutes = now.getMinutes() + seconds / 60; 785 const hours = now.getHours() % 12 + minutes / 60; 786 787 const secondsDeg = (seconds / 60) * 360; 788 const minutesDeg = (minutes / 60) * 360; 789 const hoursDeg = (hours / 12) * 360; 790 791 hourHand.style.transform = `rotate(${hoursDeg}deg)`; 792 minuteHand.style.transform = `rotate(${minutesDeg}deg)`; 793 secondHand.style.transform = `rotate(${secondsDeg}deg)`; 794 } 795 796 setInterval(setClock, 50); 797 setClock(); 798 799 const countdownElement = document.querySelector('.time-countdown'); 800 const dayElement = countdownElement.querySelector('.day'); 801 const hourElement = countdownElement.querySelector('.hour'); 802 const minuteElement = countdownElement.querySelector('.minute'); 803 const secondElement = countdownElement.querySelector('.second'); 804 805 const endDate = new Date(); 806 endDate.setDate(endDate.getDate() + 100); 807 808 function updateCountdown() { 809 const now = new Date(); 810 const timeRemaining = endDate - now; 811 812 if (timeRemaining <= 0) { 813 endDate.setDate(endDate.getDate() + 100); 814 } 815 816 const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24)); 817 const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); 818 const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60)); 819 const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000); 820 821 dayElement.textContent = days; 822 hourElement.textContent = hours < 10 ? `0${hours}` : hours; 823 minuteElement.textContent = minutes < 10 ? `0${minutes}` : minutes; 824 secondElement.textContent = seconds < 10 ? `0${seconds}` : seconds; 825 } 826 827 setInterval(updateCountdown, 1000); 828 updateCountdown(); 829 830 } 831 832 833 /** 834 * ====================================== 835 * 28. product details slider 836 * ====================================== 837 */ 838 var productGallery = new Swiper(".product-details-slider-gallery", { 839 loop: true, 840 speed: 1000, 841 slidesPerView: 2, 842 slidesPerGroup: 1, 843 spaceBetween: 24, 844 watchSlidesProgress: true, 845 autoplay: { 846 delay: 3000, 847 disableOnInteraction: false, 848 pauseOnMouseEnter: true, 849 }, 850 breakpoints: { 851 576: { 852 slidesPerView: 3, 853 }, 854 768: { 855 slidesPerView: 4, 856 }, 857 1400: { 858 slidesPerView: 4, 859 }, 860 }, 861 }); 862 863 var productSlider = new Swiper(".product-details-slider", { 864 loop: true, 865 speed: 1000, 866 slidesPerView: 1, 867 slidesPerGroup: 1, 868 spaceBetween: 24, 869 centeredSlides: true, 870 slideToClickedSlide: true, 871 roundLengths: true, 872 autoplay: { 873 delay: 3000, 874 disableOnInteraction: false, 875 pauseOnMouseEnter: true, 876 }, 877 thumbs: { 878 swiper: productGallery, 879 }, 880 }); 881 882 /** 883 * ====================================== 884 * 29. product details tab 885 * ====================================== 886 */ 887 888 $(".product-tab-content-single").hide(); 889 $(".product-tab-content-single:first").show(); 890 891 $(".product-tab__btn").on("click", function () { 892 $(".product-tab__btn").removeClass("active"); 893 $(this).addClass("active"); 894 $(".product-tab-content-single").hide(); 895 var target = $(this).data("target"); 896 $(target).fadeIn(500); 897 return false;
898 }); 899 900 document.querySelectorAll(".range__slider").forEach(function (el) { 901 el.oninput = function () { 902 var valPercent = 903 (el.valueAsNumber - parseInt(el.min)) / 904 (parseInt(el.max) - parseInt(el.min)); 905 var style = 906 "background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop(" + 907 valPercent + 908 ", #ffc107), color-stop(" + 909 valPercent + 910 ", #505D6A30));"; 911 el.style = style; 912 }; 913 el.oninput(); 914 }); 915 916 /** 917 * ====================================== 918 * 30. social link active on hover 919 * ====================================== 920 */ 921 $(".comment-single").each(function () { 922 $(this) 923 .find(".reply-button button") 924 .on("click", function () { 925 var $currentComment = $(this).closest(".comment-single"); 926 $(".comment-single .reply-comment") 927 .not($currentComment.find(".reply-comment")) 928 .slideUp(); 929 $currentComment.find(".reply-comment").slideToggle(); 930 $(".comment-single .reply-button button") 931 .not(this) 932 .removeClass("active"); 933 $(this).toggleClass("active"); 934 }); 935 }); 936 937 938 939 940 941 942 943 944 /** 945 * ====================================== 946 * 31. footer copyright year 947 * ====================================== 948 */ 949 if ($("#copyrightYear").length > 0) { 950 $("#copyrightYear").text(new Date().getFullYear()); 951 } 952 953 /** 954 * ====================================== 955 * 32. aos initialization 956 * ====================================== 957 */ 958 // AOS.init(); 959 960 /** 961 * ====================================== 962 * 33. vanilla tilt animations 963 * ====================================== 964 */ 965 966 let Vantilt = document.querySelectorAll(".van-tilt"); 967 968 if (Vantilt) { 969 VanillaTilt.init(document.querySelectorAll(".van-tilt"), { 970 max: 5, 971 speed: 3000, 972 }); 973 } 974 975 /** 976 * ====================================== 977 * 34. register gsap 978 * ====================================== 979 */ 980 gsap.registerPlugin(ScrollTrigger, ScrollToPlugin); 981 982 /** 983 * ====================================== 984 * 35. gsap null config 985 * ====================================== 986 */ 987 gsap.config({ 988 nullTargetWarn: false, 989 }); 990 991 /** 992 * ====================================== 993 * 36. target section with gsap 994 * ====================================== 995 */ 996 $('a[href^="#"]:not([href="#"])').on("click", function (event) { 997 event.preventDefault(); 998 999 var target = $(this).attr("href"); 1000 1001 gsap.to(window, { 1002 scrollTo: { 1003 y: target, 1004 offsetY: 100, 1005 }, 1006 duration: 1, 1007 ease: "power3.inOut", 1008 }); 1009 }); 1010 1011 /** 1012 * ====================================== 1013 * 37. parallax image with gsap 1014 * ====================================== 1015 */ 1016 var imageParallax = document.querySelectorAll(".parallax-image"); 1017 if (imageParallax.length > 0) { 1018 $(".parallax-image").each(function () { 1019 $(this).wrap( 1020 '<div class="parallax-image-wrap"><div class="parallax-image-inner"></div></div>' 1021 ); 1022 $(".parallax-image-wrap").css({ 1023 overflow: "hidden", 1024 }); 1025 1026 var $animImageParallax = $(this); 1027 var $aipWrap = $animImageParallax.parents(".parallax-image-wrap"); 1028 var $aipInner = $aipWrap.find(".parallax-image-inner"); 1029 1030 let tl_ImageParallax = gsap.timeline({ 1031 scrollTrigger: { 1032 trigger: $aipWrap, 1033 start: "top bottom", 1034 end: "bottom top", 1035 scrub: true, 1036 onEnter: () => animImgParallaxRefresh(), 1037 }, 1038 }); 1039 tl_ImageParallax.to($animImageParallax, { 1040 yPercent: 80, 1041 ease: "none", 1042 }); 1043 1044 function animImgParallaxRefresh() { 1045 tl_ImageParallax.scrollTrigger.refresh(); 1046 } 1047 1048 let tl_aipZoomIn = gsap.timeline({ 1049 scrollTrigger: { 1050 trigger: $aipWrap, 1051 start: "top 99%", 1052 }, 1053 }); 1054 tl_aipZoomIn.from($aipInner, { 1055 duration: 1.5, 1056 autoAlpha: 0, 1057 scale: 1.3, 1058 ease: Power2.easeOut, 1059 clearProps: "all", 1060 }); 1061 }); 1062 } 1063 1064 /** 1065 * ====================================== 1066 * 38. title animation 1067 * ====================================== 1068 */ 1069 1070 if ($(".title-animation").length > 0) { 1071 let char_come = gsap.utils.toArray(".title-animation"); 1072 char_come.forEach((char_come) => {
1073 let split_char = new SplitText(char_come, { 1074 type: "chars, words", 1075 lineThreshold: 0.5, 1076 }); 1077 const tl2 = gsap.timeline({ 1078 scrollTrigger: { 1079 trigger: char_come, 1080 start: "top 90%", 1081 end: "bottom 60%", 1082 scrub: false, 1083 markers: false, 1084 toggleActions: "play none none none", 1085 }, 1086 }); 1087 tl2.from(split_char.chars, { 1088 duration: 0.8, 1089 x: 40, 1090 autoAlpha: 0, 1091 stagger: 0.05, 1092 ease: "back.out", 1093 }); 1094 }); 1095 } 1096 1097 /** 1098 * ====================================== 1099 * 39. banner three image animation 1100 * ====================================== 1101 */ 1102 if ($(".move-image").length > 0) { 1103 let mouse = { x: 0, y: 0, moved: false }; 1104 1105 $(document).mousemove(function (e) { 1106 mouse.moved = true; 1107 mouse.x = e.clientX; 1108 mouse.y = e.clientY; 1109 }); 1110 1111 gsap.ticker.add(() => { 1112 if (mouse.moved) { 1113 parallaxImages(".move-image", -30); 1114 mouse.moved = false; 1115 } 1116 }); 1117 1118 function parallaxImages(selector, movement) { 1119 $(selector).each(function () { 1120 const rect = this.getBoundingClientRect(); 1121 const offsetX = 1122 ((mouse.x - (rect.left + rect.width / 2)) / rect.width) * movement; 1123 const offsetY = 1124 ((mouse.y - (rect.top + rect.height / 2)) / rect.height) * movement; 1125 1126 gsap.to(this, { 1127 x: offsetX, 1128 y: offsetY, 1129 duration: 0.5, 1130 }); 1131 }); 1132 } 1133 } 1134 /** 1135 * ====================================== 1136 * 40. progress bar 1137 * ====================================== 1138 */ 1139 1140 if ($(".progress-bar-single").length > 0) { 1141 $("[data-percent]").each(function () { 1142 $(this) 1143 .find(".progress-bar-percent") 1144 .css("width", $(this).attr("data-percent")); 1145 $(this).find(".percent-value").text($(this).attr("data-percent")); 1146 }); 1147 1148 const ax_progress_bar = document.querySelectorAll(".progress-bar-single"); 1149 ax_progress_bar.forEach((element) => { 1150 const w = element.querySelector(".progress-bar-percent"); 1151 const p = element.querySelector(".percent-value"); 1152 1153 const target = p.textContent; 1154 1155 const ax_bartl = gsap.timeline({ 1156 defaults: { 1157 duration: 2, 1158 }, 1159 scrollTrigger: { 1160 trigger: element, 1161 }, 1162 }); 1163 1164 ax_bartl.fromTo( 1165 w, 1166 { 1167 width: 0, 1168 }, 1169 { 1170 width: target, 1171 } 1172 ); 1173 ax_bartl.from( 1174 p, 1175 { 1176 textContent: 0 + "%", 1177 snap: { 1178 textContent: 5, 1179 }, 1180 }, 1181 "<" 1182 ); 1183 }); 1184 } 1185 1186 /** 1187 * ====================================== 1188 * 41. circular progress bar 1189 * ====================================== 1190 */ 1191 if ($(".difference-progress-single").length > 0) { 1192 const progressBars = document.querySelectorAll(".progress-bar-single"); 1193 1194 progressBars.forEach((element) => { 1195 const percentAttr = element.getAttribute("data-percent"); 1196 1197 if (percentAttr) { 1198 const progress = percentAttr.replace("%", ""); 1199 const percentDisplay = element.querySelector(".percent-value"); 1200 const circle = element.querySelector(".circle-progress"); 1201 1202 if (percentDisplay && circle) { 1203 const radius = 15.9155; 1204 const circumference = 2 * Math.PI * radius; 1205 1206 gsap.fromTo( 1207 circle, 1208 { 1209 strokeDashoffset: circumference, 1210 }, 1211 { 1212 strokeDashoffset: 1213 circumference - (progress / 100) * circumference, 1214 duration: 2, 1215 scrollTrigger: { 1216 trigger: element, 1217 start: "top 80%", 1218 end: "bottom 20%", 1219 toggleActions: "play none none none", 1220 }, 1221 } 1222 ); 1223 1224 gsap.fromTo( 1225 percentDisplay, 1226 { 1227 textContent: 0, 1228 }, 1229 { 1230 textContent: progress, 1231 duration: 2, 1232 snap: { textContent: 1 }, 1233 ease: "power1.inOut", 1234 onUpdate: function () { 1235 percentDisplay.textContent = 1236 Math.round(percentDisplay.textContent) + "%"; 1237 }, 1238 } 1239 ); 1240 } 1241 } 1242 }); 1243 } 1244 1245 1246 1247 1248// Testimonial scroll gsap js 1249 let pr = gsap.matchMedia(); 1250 pr.add("(min-width: 992px)", () => { 1251 1252 let tl = gsap.timeline(); 1253 let projectpanels = document.querySelectorAll('.project-panel')
1254 projectpanels.forEach((section, index) => { 1255 tl.to(section, { 1256 scrollTrigger: { 1257 trigger: section, 1258 pin: section, 1259 scrub: 1, 1260 start: 'center center', 1261 end: "bottom 100%", 1262 endTrigger: '.project-panel-area', 1263 pinSpacing: false, 1264 markers: false, 1265 }, 1266 }) 1267 }) 1268 }); 1269 1270 1271 1272 1273 1274 // Blog 8 active Js 1275 $(".blog-eight-wrap").on("mouseenter", function () { 1276 $(this).addClass("active").siblings().removeClass("active"); 1277 }); 1278 1279 1280 1281 1282 1283 1284 // Team js====== 1285 1286 $('.material-card > .mc-btn-action').click(function () { 1287 var card = $(this).parent('.material-card'); 1288 var icon = $(this).children('i'); 1289 icon.addClass('fa-spin-fast'); 1290 1291 if (card.hasClass('mc-active')) { 1292 card.removeClass('mc-active'); 1293 1294 window.setTimeout(function() { 1295 icon 1296 .removeClass('fa-arrow-left') 1297 .removeClass('fa-spin-fast') 1298 .addClass('fa-bars'); 1299 1300 }, 800); 1301 } else { 1302 card.addClass('mc-active'); 1303 1304 window.setTimeout(function() { 1305 icon 1306 .removeClass('fa-bars') 1307 .removeClass('fa-spin-fast') 1308 .addClass('fa-arrow-left'); 1309 1310 }, 800); 1311 } 1312 }); 1313 1314 // Team js end==== 1315 1316 1317 1318 1319 1320 1321 // Home 13 testi 1322 $('.testimonial-nine-thumb-active').slick({ 1323 slidesToShow: 1, 1324 slidesToScroll: 1, 1325 arrows: false, 1326 draggable: false, 1327 fade: false, 1328 asNavFor: '.testimonial-nine-img-active' 1329 }); 1330 $('.testimonial-nine-img-active').slick({ 1331 slidesToShow: 3, 1332 slidesToScroll: false, 1333 asNavFor: '.testimonial-nine-thumb-active', 1334 dots: false, 1335 draggable: false, 1336 arrows: false, 1337 vertical: true, 1338 focusOnSelect: true, 1339 centerPadding: '0', 1340 centerMode: true, 1341 speed: 3500, 1342 responsive: [ 1343 { 1344 breakpoint: 1200, 1345 settings: { 1346 slidesToShow: 3, 1347 } 1348 }, 1349 { 1350 breakpoint: 992, 1351 settings: { 1352 slidesToShow: 3, 1353 } 1354 }, 1355 { 1356 breakpoint: 768, 1357 settings: { 1358 slidesToShow: 1, 1359 } 1360 }, 1361 { 1362 breakpoint: 576, 1363 settings: { 1364 arrows: false, 1365 slidesToShow: 1, 1366 } 1367 }, 1368 { 1369 breakpoint: 380, 1370 settings: { 1371 arrows: false, 1372 slidesToShow: 1, 1373 } 1374 }, 1375 1376 ] 1377 }); 1378 1379 1380 1381 1382 1383 1384 /** 1385 * ====================================== 1386 * 42. banner animation 1387 * ====================================== 1388 */ 1389 if ($(".banner").length > 0) { 1390 if (device_width >= 768) { 1391 var tl = gsap.timeline({ 1392 scrollTrigger: { 1393 trigger: ".banner", 1394 start: "center center", 1395 end: "+=40%", 1396 scrub: 0.5, 1397 pin: false, 1398 }, 1399 }); 1400 tl.to(".circle-shape", { 1401 duration: 3, 1402 scale: 1.7, 1403 }); 1404 } 1405 } 1406 1407 }); 1408})(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.