Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.

375 řádky
6.5 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 Parallax
  8. 5. Init Progress Bars
  9. 6. Init Accordions
  10. 7. Init Loaders
  11. 8. Init Milestones
  12. ******************************/
  13. $(document).ready(function()
  14. {
  15. "use strict";
  16. /*
  17. 1. Vars and Inits
  18. */
  19. var ctrl = new ScrollMagic.Controller();
  20. var header = $('.header');
  21. var menuActive = false;
  22. var hamb = $('.hamburger_container');
  23. var menu = $('.fs_menu_container');
  24. var hambIcon = $('.hamburger_icon');
  25. setHeader();
  26. $(window).on('resize', function()
  27. {
  28. setHeader();
  29. });
  30. $(document).on('scroll', function()
  31. {
  32. setHeader();
  33. });
  34. initMenu();
  35. initParallax();
  36. initProgressBars();
  37. initAccordions();
  38. initLoaders();
  39. initMilestones();
  40. /*
  41. 2. Set Header
  42. */
  43. function setHeader()
  44. {
  45. if(window.innerWidth < 992)
  46. {
  47. if($(window).scrollTop() > 100)
  48. {
  49. header.css({'height':"80"});
  50. }
  51. else
  52. {
  53. header.css({'height':"110"});
  54. }
  55. }
  56. else
  57. {
  58. if($(window).scrollTop() > 100)
  59. {
  60. header.css({'height':"80"});
  61. }
  62. else
  63. {
  64. header.css({'height':"110"});
  65. }
  66. }
  67. if(window.innerWidth > 991 && menuActive)
  68. {
  69. closeMenu();
  70. }
  71. }
  72. /*
  73. 3. Init Menu
  74. */
  75. function initMenu()
  76. {
  77. if($('.hamburger_container').length)
  78. {
  79. hamb.on('click', function()
  80. {
  81. if(!menuActive)
  82. {
  83. openMenu();
  84. }
  85. else
  86. {
  87. closeMenu();
  88. }
  89. });
  90. }
  91. }
  92. function openMenu()
  93. {
  94. menu.addClass('active');
  95. setTimeout(function()
  96. {
  97. hambIcon.addClass('active');
  98. },500);
  99. menuActive = true;
  100. }
  101. function closeMenu()
  102. {
  103. menu.removeClass('active');
  104. setTimeout(function()
  105. {
  106. hambIcon.removeClass('active');
  107. },500);
  108. menuActive = false;
  109. }
  110. /*
  111. 4. Init Parallax
  112. */
  113. function initParallax()
  114. {
  115. if($('.prlx_parent').length && $('.prlx').length)
  116. {
  117. var elements = $('.prlx_parent');
  118. elements.each(function()
  119. {
  120. var ele = this;
  121. var bcg = $(ele).find('.prlx');
  122. var slideParallaxScene = new ScrollMagic.Scene({
  123. triggerElement: ele,
  124. triggerHook: 1,
  125. duration: "200%"
  126. })
  127. .setTween(TweenMax.from(bcg, 1, {y: '-30%', ease:Power0.easeNone}))
  128. .addTo(ctrl);
  129. });
  130. }
  131. }
  132. /*
  133. 5. Init Progress Bars
  134. */
  135. function initProgressBars()
  136. {
  137. if($('.skill_bars').length)
  138. {
  139. var bars = $('.skill_bars');
  140. bars.each(function()
  141. {
  142. var ele = $(this);
  143. var elePerc = ele.data('perc');
  144. var eleName = '#' + ele.attr('id');
  145. var statsScene = new ScrollMagic.Scene({
  146. triggerElement: this,
  147. triggerHook: 'onEnter',
  148. reverse:false
  149. })
  150. .on('start', function()
  151. {
  152. var pbar = new ProgressBar.Line(eleName,
  153. {
  154. strokeWidth: 0.5,
  155. easing: 'easeInOut',
  156. duration: 1400,
  157. color: '#ff4200',
  158. trailColor: '#f0f0f0',
  159. trailWidth: 1,
  160. svgStyle: {display: 'block', width: '100%', height: '100%'},
  161. text: {
  162. style: {
  163. // Text color.
  164. // Default: same as stroke color (options.color)
  165. fontFamily: 'Open Sans',
  166. letterSpacing: '0.3em',
  167. textAlign: 'right',
  168. fontSize: '11px',
  169. width: '48px',
  170. color: '#1c1c1c',
  171. position: 'absolute',
  172. left: 'calc' + '(' + (elePerc * 100) + '% - 48px' + ')',
  173. top: '17px',
  174. padding: 0,
  175. margin: 0,
  176. transform: null
  177. },
  178. autoStyleContainer: false
  179. },
  180. from: {color: '#00bcd5'},
  181. to: {color: '#00bcd5'},
  182. step: function(state, bar) {
  183. bar.setText(Math.round(bar.value() * 100) + ' %');
  184. }
  185. });
  186. pbar.animate(elePerc);
  187. })
  188. .addTo(ctrl);
  189. })
  190. }
  191. }
  192. /*
  193. 6. Init Accordions
  194. */
  195. function initAccordions()
  196. {
  197. if($('.accordion').length)
  198. {
  199. var accs = $('.accordion');
  200. accs.each(function()
  201. {
  202. var acc = $(this);
  203. acc.on('click', function()
  204. {
  205. acc.toggleClass('active');
  206. var panel = $(acc.next());
  207. var panelH = panel.prop('scrollHeight') + "px";
  208. if(panel.css('max-height') == "0px")
  209. {
  210. panel.css('max-height', panel.prop('scrollHeight') + "px");
  211. }
  212. else
  213. {
  214. panel.css('max-height', "0px");
  215. }
  216. });
  217. });
  218. }
  219. }
  220. /*
  221. 7. Init Loaders
  222. */
  223. function initLoaders()
  224. {
  225. if($('.loader').length)
  226. {
  227. var loaders = $('.loader');
  228. loaders.each(function()
  229. {
  230. var loader = this;
  231. var endValue = $(loader).data('perc');
  232. var loaderScene = new ScrollMagic.Scene({
  233. triggerElement: this,
  234. triggerHook: 'onEnter',
  235. reverse:false
  236. })
  237. .on('start', function()
  238. {
  239. var bar = new ProgressBar.Circle(loader,
  240. {
  241. color: '#aaa',
  242. // This has to be the same size as the maximum width to
  243. // prevent clipping
  244. strokeWidth: 4,
  245. trailWidth: 1.6,
  246. easing: 'easeInOut',
  247. duration: 1400,
  248. text:
  249. {
  250. autoStyleContainer: false
  251. },
  252. from:{ color: '#ff4200', width: 2 },
  253. to: { color: '#ff4200', width: 2 },
  254. // Set default step function for all animate calls
  255. step: function(state, circle)
  256. {
  257. circle.path.setAttribute('stroke', state.color);
  258. circle.path.setAttribute('stroke-width', state.width);
  259. var value = Math.round(circle.value() * 100);
  260. if (value === 0)
  261. {
  262. circle.setText('0%');
  263. }
  264. else
  265. {
  266. circle.setText(value + "%");
  267. }
  268. }
  269. });
  270. bar.text.style.fontFamily = '"Open Sans", sans-serif';
  271. bar.text.style.fontSize = '36px';
  272. bar.text.style.fontWeight = '600';
  273. bar.text.style.color = "#1c1c1c";
  274. bar.animate(endValue); // Number from 0.0 to 1.0
  275. })
  276. .addTo(ctrl);
  277. });
  278. }
  279. }
  280. /*
  281. 8. Init Milestones
  282. */
  283. function initMilestones()
  284. {
  285. if($('.milestone_counter').length)
  286. {
  287. var milestoneItems = $('.milestone_counter');
  288. milestoneItems.each(function(i)
  289. {
  290. var ele = $(this);
  291. var endValue = ele.data('end-value');
  292. var eleValue = ele.text();
  293. var milestoneScene = new ScrollMagic.Scene({
  294. triggerElement: this,
  295. triggerHook: 'onEnter',
  296. reverse:false
  297. })
  298. .on('start', function()
  299. {
  300. var counter = {value:eleValue};
  301. var counterTween = TweenMax.to(counter, 4,
  302. {
  303. value: endValue,
  304. roundProps:"value",
  305. ease: Circ.easeOut,
  306. onUpdate:function()
  307. {
  308. document.getElementsByClassName('milestone_counter')[i].innerHTML = counter.value;
  309. }
  310. });
  311. })
  312. .addTo(ctrl);
  313. });
  314. }
  315. }
  316. });