You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

362 rivejä
6.2 KiB

  1. /* JS Document */
  2. /******************************
  3. [Table of Contents]
  4. 1. Vars and Inits
  5. 2. Set Header
  6. 3. Init Menu
  7. 4. Init Main Slider
  8. 5. Init Progress Bars
  9. 6. Init Testimonials Slider
  10. 7. Init Clients Slider
  11. 8. Init Parallax
  12. ******************************/
  13. $(document).ready(function()
  14. {
  15. "use strict";
  16. /*
  17. 1. Vars and Inits
  18. */
  19. var ctrl = new ScrollMagic.Controller();
  20. var controller = new ScrollMagic.Controller();
  21. var header = $('.header');
  22. var menuActive = false;
  23. var hamb = $('.hamburger_container');
  24. var menu = $('.fs_menu_container');
  25. var hambIcon = $('.hamburger_icon');
  26. setHeader();
  27. $(window).on('resize', function()
  28. {
  29. setHeader();
  30. });
  31. $(document).on('scroll', function()
  32. {
  33. setHeader();
  34. });
  35. initMenu();
  36. initMainSlider();
  37. initProgressBars();
  38. initTestimonialsSlider();
  39. initClientsSlider();
  40. initParallax();
  41. /*
  42. 2. Set Header
  43. */
  44. function setHeader()
  45. {
  46. if(window.innerWidth < 992)
  47. {
  48. if($(window).scrollTop() > 100)
  49. {
  50. header.css({'height':"80"});
  51. }
  52. else
  53. {
  54. header.css({'height':"110"});
  55. }
  56. }
  57. else
  58. {
  59. if($(window).scrollTop() > 100)
  60. {
  61. header.css({'height':"80"});
  62. }
  63. else
  64. {
  65. header.css({'height':"110"});
  66. }
  67. }
  68. if(window.innerWidth > 991 && menuActive)
  69. {
  70. closeMenu();
  71. }
  72. }
  73. /*
  74. 3. Init Menu
  75. */
  76. function initMenu()
  77. {
  78. if($('.hamburger_container').length)
  79. {
  80. hamb.on('click', function()
  81. {
  82. if(!menuActive)
  83. {
  84. openMenu();
  85. }
  86. else
  87. {
  88. closeMenu();
  89. }
  90. });
  91. }
  92. }
  93. function openMenu()
  94. {
  95. menu.addClass('active');
  96. setTimeout(function()
  97. {
  98. hambIcon.addClass('active');
  99. },500);
  100. menuActive = true;
  101. }
  102. function closeMenu()
  103. {
  104. menu.removeClass('active');
  105. setTimeout(function()
  106. {
  107. hambIcon.removeClass('active');
  108. },500);
  109. menuActive = false;
  110. }
  111. /*
  112. 4. Init Main Slider
  113. */
  114. function initMainSlider()
  115. {
  116. if($('.hero_slider').length)
  117. {
  118. var heroSlider = $('.hero_slider');
  119. heroSlider.owlCarousel({
  120. items: 1,
  121. loop: true,
  122. autoplay:true,
  123. autoplayTimeout:5000,
  124. autoplaySpeed:800,
  125. smartSpeed:800,
  126. dotsContainer:'main_slider_custom_dots'
  127. });
  128. /* Custom dots events */
  129. if($('.main_slider_custom_dot').length)
  130. {
  131. $('.main_slider_custom_dot').on('click', function()
  132. {
  133. $('.main_slider_custom_dot').removeClass('active');
  134. $(this).addClass('active');
  135. heroSlider.trigger('to.owl.carousel', [$(this).index(), 300]);
  136. });
  137. }
  138. /* Change active class for dots when slide changes by nav or touch */
  139. heroSlider.on('changed.owl.carousel', function(event)
  140. {
  141. $('.main_slider_custom_dot').removeClass('active');
  142. $('.main_slider_custom_dots li').eq(event.page.index).addClass('active');
  143. });
  144. /* Custom navigation */
  145. if($('.main_slider_nav').length)
  146. {
  147. $('.main_slider_nav_left').on('click', function()
  148. {
  149. heroSlider.trigger('prev.owl.carousel');
  150. });
  151. $('.main_slider_nav_right').on('click', function()
  152. {
  153. heroSlider.trigger('next.owl.carousel');
  154. });
  155. }
  156. }
  157. }
  158. /*
  159. 5. Init Progress Bars
  160. */
  161. function initProgressBars()
  162. {
  163. if($('.skill_bars').length)
  164. {
  165. var bars = $('.skill_bars');
  166. bars.each(function()
  167. {
  168. var ele = $(this);
  169. var elePerc = ele.data('perc');
  170. var eleName = '#'+ele.data('name');
  171. var statsScene = new ScrollMagic.Scene({
  172. triggerElement: this,
  173. triggerHook: 'onEnter',
  174. reverse:false
  175. })
  176. .on('start', function()
  177. {
  178. var pbar = new ProgressBar.Line(eleName,
  179. {
  180. strokeWidth: 0.5,
  181. easing: 'easeInOut',
  182. duration: 1400,
  183. color: '#ff4200',
  184. trailColor: 'rgba(255,255,255,1)',
  185. trailWidth: 1,
  186. svgStyle: {display: 'block', width: '100%', height: '100%'},
  187. text: {
  188. style: {
  189. // Text color.
  190. // Default: same as stroke color (options.color)
  191. color: '#FFFFFF',
  192. position: 'absolute',
  193. left: 'calc' + '(' + (elePerc * 100) + '% - 48px' + ')',
  194. top: '17px',
  195. padding: 0,
  196. margin: 0,
  197. transform: null
  198. },
  199. autoStyleContainer: false
  200. },
  201. from: {color: '#00bcd5'},
  202. to: {color: '#00bcd5'},
  203. step: function(state, bar) {
  204. bar.setText(Math.round(bar.value() * 100) + ' %');
  205. }
  206. });
  207. pbar.animate(elePerc);
  208. })
  209. .addTo(ctrl);
  210. })
  211. }
  212. }
  213. /*
  214. 6. Init Testimonials Slider
  215. */
  216. function initTestimonialsSlider()
  217. {
  218. if($('.testimonials_slider').length)
  219. {
  220. var testSlider = $('.testimonials_slider');
  221. testSlider.owlCarousel(
  222. {
  223. items:1,
  224. loop:true,
  225. dots:false
  226. });
  227. if($('.test_slider_nav').length)
  228. {
  229. var navLeft = $('.test_slider_nav_left');
  230. var navRight = $('.test_slider_nav_right');
  231. navLeft.on('click', function()
  232. {
  233. testSlider.trigger('prev.owl.carousel');
  234. });
  235. navRight.on('click', function()
  236. {
  237. testSlider.trigger('next.owl.carousel');
  238. });
  239. }
  240. }
  241. }
  242. /*
  243. 7. Init Clients Slider
  244. */
  245. function initClientsSlider()
  246. {
  247. if($('.clients_slider').length)
  248. {
  249. var clientsSlider = $('.clients_slider');
  250. clientsSlider.owlCarousel(
  251. {
  252. loop: true,
  253. dots: false,
  254. responsive:
  255. {
  256. 0:{items:1},
  257. 575:{items:2},
  258. 768:{items:3},
  259. 992:{items:4},
  260. 1199:{items:5}
  261. }
  262. });
  263. }
  264. }
  265. /*
  266. 8. Init Parallax
  267. */
  268. function initParallax()
  269. {
  270. // Add parallax effect to home slider
  271. if($('.slider_prlx').length)
  272. {
  273. var homeBcg = $('.slider_prlx');
  274. var homeBcgScene = new ScrollMagic.Scene({
  275. triggerElement: homeBcg,
  276. triggerHook: 1,
  277. duration: "100%"
  278. })
  279. .setTween(TweenMax.to(homeBcg, 1, {y: '15%', ease:Power0.easeNone}))
  280. .addTo(ctrl);
  281. }
  282. // Add parallax effect to every element with class prlx
  283. // Add class prlx_parent to the parent of the element
  284. if($('.prlx_parent').length && $('.prlx').length)
  285. {
  286. var elements = $('.prlx_parent');
  287. elements.each(function()
  288. {
  289. var ele = this;
  290. var bcg = $(ele).find('.prlx');
  291. var slideParallaxScene = new ScrollMagic.Scene({
  292. triggerElement: ele,
  293. triggerHook: 1,
  294. duration: "200%"
  295. })
  296. .setTween(TweenMax.from(bcg, 1, {y: '-30%', ease:Power0.easeNone}))
  297. .addTo(ctrl);
  298. });
  299. }
  300. }
  301. });