https://thecorteizuk.com/temp/custom/assets/js/function.js

1(function ($) {
2  "use strict";
3
4  var $window = $(window);
5  var $body = $("body");
6
7  /* Preloader Effect */
8  $window.on("load", function () {
9    $(".preloader").fadeOut(600);
10  });
11
12  /* Sticky Header */
13  if ($(".active-sticky-header").length) {
14    $window.on("resize", function () {
15      setHeaderHeight();
16    });
17
18    function setHeaderHeight() {
19      $("header.main-header").css(
20        "height",
21        $("header .header-sticky").outerHeight()
22      );
23    }
24
25    $(window).on("scroll", function () {
26      var fromTop = $(window).scrollTop();
27      setHeaderHeight();
28      var headerHeight = $("header .header-sticky").outerHeight();
29      $("header .header-sticky").toggleClass(
30        "hide",
31        fromTop > headerHeight + 100
32      );
33      $("header .header-sticky").toggleClass("active", fromTop > 600);
34    });
35  }
36
37  /* Slick Menu JS */
38  $("#menu").slicknav({
39    label: "",
40    prependTo: ".responsive-menu",
41  });
42
43  if ($("a[href='#top']").length) {
44    $("a[href='#top']").click(function () {
45      $("html, body").animate({ scrollTop: 0 }, "slow");
46      return false;
47    });
48  }
49
50  /* Hero Slider Layout JS */
51  const hero_slider_layout = new Swiper(".hero-slider-layout .swiper", {
52    slidesPerView: 1,
53    speed: 1000,
54    spaceBetween: 0,
55    loop: true,
56    autoplay: {
57      delay: 4000,
58    },
59    pagination: {
60      el: ".hero-pagination",
61      clickable: true,
62    },
63  });
64
65  /* testimonial Slider JS */
66  if ($(".testimonial-slider").length) {
67    const testimonial_slider = new Swiper(".testimonial-slider .swiper", {
68      slidesPerView: 1,
69      speed: 1000,
70      spaceBetween: 60,
71      loop: true,
72      autoplay: {
73        delay: 5000,
74      },
75      pagination: {
76        el: ".testimonial-pagination",
77        clickable: true,
78      },
79      navigation: {
80        nextEl: ".testimonial-button-next",
81        prevEl: ".testimonial-button-prev",
82      },
83      breakpoints: {
84        768: {
85          slidesPerView: 1,
86        },
87        991: {
88          slidesPerView: 1,
89        },
90      },
91    });
92  }
93
94  /* testimonial Slider JS */
95  if ($(".faqs-client-slider").length) {
96    const faqs_client_slider = new Swiper(".faqs-client-slider .swiper", {
97      slidesPerView: 2,
98      speed: 1000,
99      spaceBetween: 40,
100      loop: true,
101      autoplay: {
102        delay: 5000,
103      },
104      pagination: {
105        el: ".testimonial-pagination",
106        clickable: true,
107      },
108      navigation: {
109        nextEl: ".testimonial-button-next",
110        prevEl: ".testimonial-button-prev",
111      },
112      breakpoints: {
113        768: {
114          slidesPerView: 3,
115        },
116        991: {
117          slidesPerView: 5,
118        },
119      },
120    });
121  }
122
123  /* Skill Bar */
124  if ($(".skills-progress-bar").length) {
125    $(".skills-progress-bar").waypoint(
126      function () {
127        $(".skillbar").each(function () {
128          $(this)
129            .find(".count-bar")
130            .animate(
131              {
132                width: $(this).attr("data-percent"),
133              },
134              2000
135            );
136        });
137      },
138      {
139        offset: "50%",
140      }
141    );
142  }
143

144  /* Youtube Background Video JS */
145  if ($("#herovideo").length) {
146    var myPlayer = $("#herovideo").YTPlayer();
147  }
148
149  /* Init Counter */
150  if ($(".counter").length) {
151    $(".counter").counterUp({ delay: 6, time: 3000 });
152  }
153
154  /* Image Reveal Animation */
155  if ($(".reveal").length) {
156    gsap.registerPlugin(ScrollTrigger);
157    let revealContainers = document.querySelectorAll(".reveal");
158    revealContainers.forEach((container) => {
159      let image = container.querySelector("img");
160      let tl = gsap.timeline({
161        scrollTrigger: {
162          trigger: container,
163          toggleActions: "play none none none",
164        },
165      });
166      tl.set(container, {
167        autoAlpha: 1,
168      });
169      tl.from(container, 1, {
170        xPercent: -100,
171        ease: Power2.out,
172      });
173      tl.from(image, 1, {
174        xPercent: 100,
175        scale: 1,
176        delay: -1,
177        ease: Power2.out,
178      });
179    });
180  }
181
182  /* Text Effect Animation */
183  if ($(".text-anime-style-1").length) {
184    let staggerAmount = 0.05,
185      translateXValue = 0,
186      delayValue = 0.5,
187      animatedTextElements = document.querySelectorAll(".text-anime-style-1");
188
189    animatedTextElements.forEach((element) => {
190      let animationSplitText = new SplitText(element, { type: "chars, words" });
191      gsap.from(animationSplitText.words, {
192        duration: 1,
193        delay: delayValue,
194        x: 20,
195        autoAlpha: 0,
196        stagger: staggerAmount,
197        scrollTrigger: { trigger: element, start: "top 85%" },
198      });
199    });
200  }
201
202  if ($(".text-anime-style-2").length) {
203    let staggerAmount = 0.03,
204      translateXValue = 20,
205      delayValue = 0.1,
206      easeType = "power2.out",
207      animatedTextElements = document.querySelectorAll(".text-anime-style-2");
208
209    animatedTextElements.forEach((element) => {
210      let animationSplitText = new SplitText(element, { type: "chars, words" });
211      gsap.from(animationSplitText.chars, {
212        duration: 1,
213        delay: delayValue,
214        x: translateXValue,
215        autoAlpha: 0,
216        stagger: staggerAmount,
217        ease: easeType,
218        scrollTrigger: { trigger: element, start: "top 85%" },
219      });
220    });
221  }
222
223  if ($(".text-anime-style-3").length) {
224    let animatedTextElements = document.querySelectorAll(".text-anime-style-3");
225
226    animatedTextElements.forEach((element) => {
227      //Reset if needed
228      if (element.animation) {
229        element.animation.progress(1).kill();
230        element.split.revert();
231      }
232
233      element.split = new SplitText(element, {
234        type: "lines,words,chars",
235        linesClass: "split-line",
236      });
237      gsap.set(element, { perspective: 400 });
238
239      gsap.set(element.split.chars, {
240        opacity: 0,
241        x: "50",
242      });
243
244      element.animation = gsap.to(element.split.chars, {
245        scrollTrigger: { trigger: element, start: "top 90%" },
246        x: "0",
247        y: "0",
248        rotateX: "0",
249        opacity: 1,
250        duration: 1,
251        ease: Back.easeOut,
252        stagger: 0.02,
253      });
254    });
255  }
256
257  /* Parallaxie js */
258  var $parallaxie = $(".parallaxie");
259  if ($parallaxie.length && $window.width() > 991) {
260    if ($window.width() > 768) {
261      $parallaxie.parallaxie({
262        speed: 0.55,
263        offset: 0,
264      });
265    }
266  }
267
268  /* Zoom Gallery screenshot */
269  $(".gallery-items").magnificPopup({
270    delegate: "a",
271    type: "image",
272    closeOnContentClick: false,
273    closeBtnInside: false,
274    mainClass: "mfp-with-zoom",
275    image: {
276      verticalFit: true,
277    },
278    gallery: {
279      enabled: true,
280    },
281    zoom: {
282      enabled: true,
283      duration: 300, // don't foget to change the duration also in CSS
284      opener: function (element) {
285        return element.find("img");
286      },
287    },
288  });
289
290  /* Contact form validation */
291  var $contactform = $("#contactForm");
292  $contactform.validator({ focus: false }).on("submit", function (event) {
293    if (!event.isDefaultPrevented()) {
294      event.preventDefault();
295      submitForm();
296    }
297  });
298
299  function submitForm() {
300    /* Ajax call to submit form */
301    $.ajax({
302      type: "POST",
303      url: "form-process.php",
304      data: $contactform.serialize(),
305      success: function (text) {
306        if (text == "success") {
307          formSuccess();
308        } else {
309          submitMSG(false, text);
310        }
311      },
312    });
313  }
314
315  function formSuccess() {
316    $contactform[0].reset();
317    submitMSG(true, "Message Sent Successfully!");
318  }
319
320  function submitMSG(valid, msg) {
321    if (valid) {
322      var msgClasses = "h4 text-success";
323    } else {
324      var msgClasses = "h4 text-danger";
325    }
326    $("#msgSubmit").removeClass().addClass(msgClasses).text(msg);
327  }
328  /* Contact form validation end */
329
330  /* Our Project (filtering) Start */
331  $window.on("load", function () {
332    if ($(".project-item-boxes").length) {
333      /* Init Isotope */
334      var $menuitem = $(".project-item-boxes").isotope({
335        itemSelector: ".project-item-box",
336        layoutMode: "masonry",
337        masonry: {
338          // use outer width of grid-sizer for columnWidth
339          columnWidth: 1,
340        },
341      });
342
343      /* Filter items on click */
344      var $menudisesnav = $(".project-nav li a");
345      $menudisesnav.on("click", function (e) {
346        var filterValue = $(this).attr("data-filter");
347        $menuitem.isotope({
348          filter: filterValue,
349        });
350
351        $menudisesnav.removeClass("active-btn");
352        $(this).addClass("active-btn");
353        e.preventDefault();
354      });
355      $menuitem.isotope({ filter: "*" });
356    }
357  });
358  /* Our Project (filtering) End */
359
360  /* Animated Wow Js */
361  new WOW().init();
362
363  /* Popup Video */
364  if ($(".popup-video").length) {
365    $(".popup-video").magnificPopup({
366      type: "iframe",
367      mainClass: "mfp-fade",
368      removalDelay: 160,
369      preloader: false,
370      fixedContentPos: true,
371    });
372  }
373})(jQuery);