https://codecaptain.cc/magic/assets/js/front-page-landing.js

1/**
2 * Main - Front Pages
3 */
4'use strict';
5
6(function () {
7  const nav = document.querySelector('.layout-navbar'),
8    heroAnimation = document.getElementById('hero-animation'),
9    animationImg = document.querySelectorAll('.hero-dashboard-img'),
10    animationElements = document.querySelectorAll('.hero-elements-img'),
11    swiperLogos = document.getElementById('swiper-clients-logos'),
12    swiperReviews = document.getElementById('swiper-reviews'),
13    ReviewsPreviousBtn = document.getElementById('reviews-previous-btn'),
14    ReviewsNextBtn = document.getElementById('reviews-next-btn'),
15    ReviewsSliderPrev = document.querySelector('.swiper-button-prev'),
16    ReviewsSliderNext = document.querySelector('.swiper-button-next'),
17    priceDurationToggler = document.querySelector('.price-duration-toggler'),
18    priceMonthlyList = [].slice.call(document.querySelectorAll('.price-monthly')),
19    priceYearlyList = [].slice.call(document.querySelectorAll('.price-yearly'));
20
21  // Hero
22  const mediaQueryXL = '1200';
23  const width = screen.width;
24  if (width >= mediaQueryXL && heroAnimation) {
25    heroAnimation.addEventListener('mousemove', function parallax(e) {
26      animationElements.forEach(layer => {
27        layer.style.transform = 'translateZ(1rem)';
28      });
29      animationImg.forEach(layer => {
30        let x = (window.innerWidth - e.pageX * 2) / 100;
31        let y = (window.innerHeight - e.pageY * 2) / 100;
32        layer.style.transform = `perspective(1200px) rotateX(${y}deg) rotateY(${x}deg) scale3d(1, 1, 1)`;
33      });
34    });
35    nav.addEventListener('mousemove', function parallax(e) {
36      animationElements.forEach(layer => {
37        layer.style.transform = 'translateZ(1rem)';
38      });
39      animationImg.forEach(layer => {
40        let x = (window.innerWidth - e.pageX * 2) / 100;
41        let y = (window.innerHeight - e.pageY * 2) / 100;
42        layer.style.transform = `perspective(1200px) rotateX(${y}deg) rotateY(${x}deg) scale3d(1, 1, 1)`;
43      });
44    });
45
46    heroAnimation.addEventListener('mouseout', function () {
47      animationElements.forEach(layer => {
48        layer.style.transform = 'translateZ(0)';
49      });
50      animationImg.forEach(layer => {
51        layer.style.transform = 'perspective(1200px) scale(1) rotateX(0) rotateY(0)';
52      });
53    });
54  }
55
56  // swiper carousel
57  // Customers reviews
58  // -----------------------------------
59  if (swiperReviews) {
60    new Swiper(swiperReviews, {
61      slidesPerView: 1,
62      spaceBetween: 5,
63      autoplay: {
64        delay: 3000,
65        disableOnInteraction: false
66      },
67      loop: true,
68      loopAdditionalSlides: 1,
69      navigation: {
70        nextEl: '.swiper-button-next',
71        prevEl: '.swiper-button-prev'
72      },
73      breakpoints: {
74        1200: {
75          slidesPerView: 3,
76          spaceBetween: 26
77        },
78        992: {
79          slidesPerView: 2,
80          spaceBetween: 20
81        }
82      }
83    });
84  }
85
86  // Reviews slider next and previous
87  // -----------------------------------
88  // Add click event listener to next button
89  /*
90  ReviewsNextBtn.addEventListener('click', function () {
91    ReviewsSliderNext.click();
92  });
93  ReviewsPreviousBtn.addEventListener('click', function () {
94    ReviewsSliderPrev.click();
95  });
96  */
97  // Review client logo
98  // -----------------------------------
99  if (swiperLogos) {
100    new Swiper(swiperLogos, {
101      slidesPerView: 2,
102      autoplay: {
103        delay: 3000,
104        disableOnInteraction: false
105      },
106      breakpoints: {
107        992: {
108          slidesPerView: 5
109        },
110        768: {
111          slidesPerView: 3
112        }
113      }
114    });
115  }
116
117  // Pricing Plans
118  // -----------------------------------
119  document.addEventListener('DOMContentLoaded', function (event) {
120    /*
121    function togglePrice() {
122      if (priceDurationToggler.checked) {
123        // If checked
124        priceYearlyList.map(function (yearEl) {
125          yearEl.classList.remove('d-none');
126        });
127        priceMonthlyList.map(function (monthEl) {
128          monthEl.classList.add('d-none');
129        });
130      } else {
131        // If not checked
132        priceYearlyList.map(function (yearEl) {
133          yearEl.classList.add('d-none');
134        });
135        priceMonthlyList.map(function (monthEl) {
136          monthEl.classList.remove('d-none');
137        });
138      }
139    }
140    // togglePrice Event Listener
141    togglePrice();
142
143    priceDurationToggler.onchange = function () {
144      togglePrice();
145    };
146    */
147  });
148
149  // swiper loop and autoplay
150  // --------------------------------------------------------------------
151  const swiperWithPagination = document.querySelector('#swiper-with-pagination-cards');
152  if (swiperWithPagination) {
153    new Swiper(swiperWithPagination, {
154      loop: true,
155      autoplay: {
156        delay: 2500,
157        disableOnInteraction: false,
158      },
159      pagination: {
160        clickable: true,
161        el: '.swiper-pagination',
162      },
163    })
164  }
165})();