BCB Bank static website
Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
 
 
 
 

217 righe
5.1 KiB

  1. var hamburger_menu = document.getElementById('mobile-hamburger-menu');
  2. var mobile_menu = document.getElementById('mobile-nav-menu');
  3. hamburger_menu.addEventListener('click', show_menu);
  4. function show_menu() {
  5. 'use strict';
  6. hamburger_menu.classList.toggle('active');
  7. document.body.classList.toggle('non-scrollable');
  8. mobile_menu.classList.toggle('show');
  9. }
  10. var desktop_navigation_menu_links = document.querySelectorAll('#desktop-navigation-menu ul li');
  11. for (var i = 0; i < desktop_navigation_menu_links.length; i++) {
  12. desktop_navigation_menu_links[i].addEventListener('click', changeActiveClass);
  13. }
  14. function changeActiveClass(e) {
  15. for (var i = 0; i < desktop_navigation_menu_links.length; i++) {
  16. desktop_navigation_menu_links[i].classList.remove('active');
  17. }
  18. e.currentTarget.classList.add('active');
  19. }
  20. var page_header = document.getElementById('page-header');
  21. var about_description_animate = document.querySelector('#about .description');
  22. var about_image_animate = document.querySelector('#about figure');
  23. window.addEventListener('scroll', page_scroll);
  24. document.addEventListener('DOMContentLoaded', page_loaded);
  25. function page_scroll() {
  26. 'use strict';
  27. var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  28. if (40 + winScroll < page_header.offsetTop) {
  29. page_header.classList.remove('minimize');
  30. } else {
  31. page_header.classList.add('minimize');
  32. }
  33. if (-120 + winScroll >= about_description_animate.offsetTop) {
  34. about_description_animate.classList.add('show');
  35. about_image_animate.classList.add('show');
  36. }
  37. }
  38. var home_image = document.querySelector('#home figure');
  39. var home_description = document.querySelector('#home .description');
  40. var temp_contact_info = document.querySelectorAll('.temp-contact-info ul li');
  41. function page_loaded() {
  42. home_image.classList.remove('hide');
  43. home_description.classList.remove('hide');
  44. if ($(window).width() < 960) {
  45. $(document).on('click', 'a[href^="#"]', function (event) {
  46. event.preventDefault();
  47. $('html, body').animate({
  48. scrollTop: $($.attr(this, 'href')).offset().top - 780
  49. }, 500);
  50. });
  51. for (var i = 0; i < temp_contact_info.length; i++) {
  52. temp_contact_info[i].addEventListener('click', toggle_contact_info);
  53. }
  54. }
  55. }
  56. function toggle_contact_info(e) {
  57. for (var i = 0; i < temp_contact_info.length; i++) {
  58. temp_contact_info[i].classList.remove('active');
  59. }
  60. e.currentTarget.classList.add('active');
  61. }
  62. var mobile_nav_lists = document.querySelectorAll('#mobile-nav-menu ul li');
  63. for (var i = 0; i < mobile_nav_lists.length; i++) {
  64. mobile_nav_lists[i].addEventListener('click', hide_mobile_nav);
  65. }
  66. function hide_mobile_nav() {
  67. mobile_menu.classList.remove('show');
  68. hamburger_menu.classList.remove('active');
  69. document.body.classList.remove('non-scrollable');
  70. }
  71. // Native method of doing smooth scrolling
  72. // document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
  73. // anchor.addEventListener('click', function (e) {
  74. // e.preventDefault();
  75. // document.querySelector(this.getAttribute('href')).scrollIntoView({
  76. // behavior: 'smooth'
  77. // });
  78. // });
  79. // });
  80. // Support for old Browsers.
  81. $(document).on('click', 'a[href^="#"]', function (event) {
  82. event.preventDefault();
  83. $('html, body').animate({
  84. scrollTop: $($.attr(this, 'href')).offset().top - 100
  85. }, 500);
  86. });
  87. var owl = $('.owl-service');
  88. owl.owlCarousel({
  89. loop: true,
  90. margin: 0,
  91. autoplay: true,
  92. autoplayTimeout: 3000,
  93. autoplayHoverPause: true,
  94. responsiveClass: true,
  95. responsive: {
  96. 0: {
  97. items: 1,
  98. stagePadding: 100,
  99. },
  100. 600: {
  101. items: 1,
  102. stagePadding: 100,
  103. },
  104. 1000: {
  105. items: 4
  106. }
  107. }
  108. });
  109. var service_carousel_Btn = $('.owl-service');
  110. owl.owlCarousel();
  111. $('#service-carousel-left-btn').click(function () {
  112. "use strict";
  113. service_carousel_Btn.trigger('next.owl.carousel', [300]);
  114. });
  115. $('#service-carousel-right-btn').click(function () {
  116. "use strict";
  117. service_carousel_Btn.trigger('prev.owl.carousel', [300]);
  118. });
  119. var owl = $('.owl-testimonial');
  120. owl.owlCarousel({
  121. loop: true,
  122. margin: 0,
  123. autoplay: true,
  124. autoplayTimeout: 3000,
  125. autoplayHoverPause: true,
  126. responsiveClass: true,
  127. responsive: {
  128. 0: {
  129. items: 1
  130. },
  131. 600: {
  132. items: 1
  133. },
  134. 1000: {
  135. items: 2,
  136. stagePadding: -10
  137. }
  138. }
  139. });
  140. var testimonial_carousel_Btn = $('.owl-testimonial');
  141. owl.owlCarousel();
  142. $('#testimonial-carousel-left-btn').click(function () {
  143. "use strict";
  144. testimonial_carousel_Btn.trigger('next.owl.carousel', [300]);
  145. });
  146. $('#testimonial-carousel-right-btn').click(function () {
  147. "use strict";
  148. testimonial_carousel_Btn.trigger('prev.owl.carousel', [300]);
  149. });
  150. var owl = $('.owl-team');
  151. owl.owlCarousel({
  152. loop: true,
  153. margin: 0,
  154. autoplay: true,
  155. autoplayTimeout: 3000,
  156. autoplayHoverPause: true,
  157. responsiveClass: true,
  158. responsive: {
  159. 0: {
  160. items: 1
  161. },
  162. 600: {
  163. items: 1
  164. },
  165. 1000: {
  166. items: 4,
  167. }
  168. }
  169. });
  170. var team_carousel_Btn = $('.owl-team');
  171. owl.owlCarousel();
  172. $('#team-carousel-left-btn').click(function () {
  173. "use strict";
  174. team_carousel_Btn.trigger('next.owl.carousel', [300]);
  175. });
  176. $('#team-carousel-right-btn').click(function () {
  177. "use strict";
  178. team_carousel_Btn.trigger('prev.owl.carousel', [300]);
  179. });