https://getwithfocus.com/js/custom.js

1
2document.getElementById("banner-video").play();
3function menuopen(){
4  document.getElementById("sidebar").classList.add("show-Y");
5}
6function menuclose(){
7  document.getElementById("sidebar").classList.remove("show-Y");
8}
9
10document.getElementsByClassName("banner")[0].style = "height:" + document.getElementById("banner-video").offsetHeight*1.1 + "px;";
11 
12$(document).ready(function() {
13  $('#video-btn').magnificPopup({
14    disableOn: 700,
15    type: 'iframe',
16    mainClass: 'mfp-fade',
17    removalDelay: 160,
18    preloader: false,
19
20    fixedContentPos: false
21  });
22});
23
24
25$('.js-tilt').tilt({
26  scale: 1.1,
27  maxTilt:        50,
28  perspective:    2000,   // Transform perspective, the lower the more extreme the tilt gets.
29  easing:         "cubic-bezier(.03,.98,.52,.99)",    // Easing on enter/exit.
30  speed:          300,    // Speed of the enter/exit transition.
31  transition:     true,   // Set a transition on enter/exit.
32  disableAxis:    null,   // What axis should be disabled. Can be X or Y.
33  reset:          true,   // If the tilt effect has to be reset on exit.
34  glare:          false,  // Enables glare effect
35  maxGlare:       1       // From 0 - 1.
36})
37
38
39$('.logo-carousel').owlCarousel({
40  nav: false,
41  loop:true,    
42  autoplay:true,
43  margin:0, 
44  // autoWidth:true,
45  // autoHeight:true,
46  autoplayTimeout:4000,
47  autoplayHoverPause:true,
48  responsiveClass:true,
49  responsive:{
50      0:{
51          items:1, 
52      },
53      400:{
54          items:2, 
55      },
56      768:{
57        items:3, 
58      }, 
59      1200:{
60          items:5
61      },
62  }
63})
64
65$('.testimonial-carousel').owlCarousel({
66  nav: true,
67  loop:true,    
68  autoplay:true,
69  margin:20, 
70  autoplayTimeout:4000,
71  autoplayHoverPause:true,
72  responsiveClass:true,
73  responsive:{
74      0:{
75          items:1, 
76      },
77      768:{
78          items:1, 
79      },
80      1200:{
81          items:1
82      },
83  }
84})
85
86
87$('.one-carousel').owlCarousel({
88  nav: false,
89  loop:true, 
90  dots:false,   
91  autoplay:true,
92  margin:20, 
93  autoplayTimeout:4000,
94  autoplayHoverPause:true,
95  responsiveClass:true,
96  responsive:{
97      0:{
98          items:1, 
99      },
100      768:{
101          items:1, 
102      },
103      1200:{
104          items:1
105      },
106  }
107})
108 
109$('.portfolio-carousel1, .portfolio-carousel2, .portfolio-carousel3, .portfolio-carousel4, .portfolio-carousel5, .portfolio-carousel6, .portfolio-carousel7, .portfolio-carousel8, .portfolio-carousel9, .portfolio-carousel10').owlCarousel({
110  nav: false,
111  loop: true,
112  dots: false,
113  autoplay: true,
114  margin: 20,
115  autoplayTimeout: 4000,
116  autoplayHoverPause: true,
117  responsiveClass: true,
118  responsive: {
119    0: {
120      items: 1,
121    },
122    768: {
123      items: 1,
124    },
125    1200: {
126      items: 1
127    },
128  }
129}) 
130
131$(document).ready(function () {
132  
133  $('.portfolio-carousel1').magnificPopup({
134    delegate: 'a',
135    type: 'image',
136    tLoading: 'Loading image #%curr%...',
137    mainClass: 'mfp-img-mobile',
138    gallery: {
139      enabled: true,
140      navigateByImgClick: true,
141      preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
142    },
143    image: {
144      tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
145      titleSrc: function (item) {
146        //return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
147      }
148    }
149  });
150  
151  $('.portfolio-carousel2').magnificPopup({
152    delegate: 'a',
153    type: 'image',
154    tLoading: 'Loading image #%curr%...',
155    mainClass: 'mfp-img-mobile',
156    gallery: {
157      enabled: true,
158      navigateByImgClick: true,
159      preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
160    },
161    image: {
162      tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
163      titleSrc: function (item) {
164        //return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
165      }
166    }
167  });
168
169  $('.portfolio-carousel3').magnificPopup({
170    delegate: 'a',
171    type: 'image',
172    tLoading: 'Loading image #%curr%...',
173    mainClass: 'mfp-img-mobile',
174    gallery: {
175      enabled: true,
176      navigateByImgClick: true,
177      preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
178    },
179    image: {
180      tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
181      titleSrc: function (item) {
182        //return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
183      }
184    }
185  });
186
187$('.portfolio-carousel4').magnificPopup({
188    delegate: 'a',
189    type: 'image',
190    tLoading: 'Loading image #%curr%...',
191    mainClass: 'mfp-img-mobile',
192    gallery: {
193      enabled: true,
194      navigateByImgClick: true,
195      preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
196    },
197    image: {
198      tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
199      titleSrc: function (item) {
200        //return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
201      }
202    }
203  });
204
205  $('.portfolio-carousel5').magnificPopup({
206    delegate: 'a',
207    type: 'image',
208    tLoading: 'Loading image #%curr%...',
209    mainClass: 'mfp-img-mobile',
210    gallery: {
211      enabled: true,
212      navigateByImgClick: true,
213      preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
214    },
215    image: {
216      tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
217      titleSrc: function (item) {
218        //return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
219      }
220    }
221  });
222
223  $('.portfolio-carousel6').magnificPopup({
224    delegate: 'a',
225    type: 'image',
226    tLoading: 'Loading image #%curr%...',
227    mainClass: 'mfp-img-mobile',
228    gallery: {
229      enabled: true,
230      navigateByImgClick: true,
231      preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
232    },
233    image: {
234      tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
235      titleSrc: function (item) {
236        //return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
237      }
238    }
239  });
240
241  $('.portfolio-carousel7').magnificPopup({
242    delegate: 'a',
243    type: 'image',
244    tLoading: 'Loading image #%curr%...',
245    mainClass: 'mfp-img-mobile',
246    gallery: {
247      enabled: true,
248      navigateByImgClick: true,
249      preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
250    },
251    image: {
252      tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
253      titleSrc: function (item) {
254        //return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
255      }
256    }
257  });
258
259  $('.portfolio-carousel8').magnificPopup({
260    delegate: 'a',
261    type: 'image',
262    tLoading: 'Loading image #%curr%...',
263    mainClass: 'mfp-img-mobile',
264    gallery: {
265      enabled: true,
266      navigateByImgClick: true,
267      preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
268    },
269    image: {
270      tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
271      titleSrc: function (item) {
272        //return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
273      }
274    }
275  });
276
277  $('.portfolio-carousel9').magnificPopup({
278    delegate: 'a',
279    type: 'image',
280    tLoading: 'Loading image #%curr%...',
281    mainClass: 'mfp-img-mobile',
282    gallery: {
283      enabled: true,
284      navigateByImgClick: true,
285      preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
286    },
287    image: {
288      tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
289      titleSrc: function (item) {
290        //return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
291      }
292    }
293  });
294
295  $('.portfolio-carousel10').magnificPopup({
296    delegate: 'a',
297    type: 'image',
298    tLoading: 'Loading image #%curr%...',
299    mainClass: 'mfp-img-mobile',
300    gallery: {
301      enabled: true,
302      navigateByImgClick: true,
303      preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
304    },
305    image: {
306      tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
307      titleSrc: function (item) {
308        //return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
309      }
310    }
311  });
312
313
314$(".num").counterUp({delay:10, time:1000});
315
316// When the user scrolls the page, execute myFunction
317window.onscroll = function() {myFunction()};
318
319// Get the header
320var header = document.getElementById("bottom-header");
321
322// Get the offset position of the navbar
323var sticky = header.offsetTop;
324
325// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
326function myFunction() {
327  if (window.pageYOffset > sticky) {

328    header.classList.add("bg-dark-50");
329    header.classList.add("fixed-top");
330
331  } else {
332    header.classList.remove("bg-dark-50");
333    header.classList.remove("fixed-top");
334
335  }
336}
337});
338
339
340function closemodal(){
341  document.getElementById("custom-modal").classList.add("d-none");
342}
343// Header margin with vedio
344function myFunction(x) {
345  if (x.matches) { // If media query matches
346document.getElementsByClassName("page-wrapper")[0].style = "padding-top:" + document.getElementsByTagName("header")[0].offsetHeight + "px";
347  } else {
348document.getElementsByClassName("page-wrapper")[0].style = "padding-top:0px";
349   // document.body.style.backgroundColor = "pink";
350  }
351document.getElementById("banner-video").play();
352
353}
354
355var x = window.matchMedia("(max-width: 1200px)")
356myFunction(x) // Call listener function at run time
357x.addListener(myFunction) // Attach listener function on state changes