script.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. 'use strict';
  2. function showMenu() {
  3. $('.menu').fadeToggle(1000);
  4. }
  5. $('.nav-container').on('click', function() {
  6. showMenu();
  7. })
  8. $('.menu').on('mouseleave', function() {
  9. showMenu();
  10. })
  11. // Slider
  12. $('#alex').hover(function() {
  13. $('.name').removeClass('none');
  14. $('.left-top').toggleClass('none');
  15. // for (var i = 10; i < 90; i+=5) {
  16. // let deg = 'rotate' + '('+ i +'deg'+ ')';
  17. // for (var j = 0; j < 11; j++) {
  18. // setTimeout(anim(deg), 100);
  19. // }
  20. // }
  21. // setTimeout(anim1, 100);
  22. // setTimeout(anim2, 100);
  23. // setTimeout(anim3, 100);
  24. // setTimeout(anim4, 100);
  25. // setTimeout(anim5, 100);
  26. // setTimeout(anim6, 100);
  27. // setTimeout(anim7, 100);
  28. // setTimeout(anim8, 100);
  29. // setTimeout(anim9, 100);
  30. // setTimeout(anim10, 100);
  31. // setTimeout(anim11, 100);
  32. // setTimeout(anim12, 100);
  33. // setTimeout(anim13, 100);
  34. // setTimeout(anim14, 100);
  35. // setTimeout(anim15, 100);
  36. // setTimeout(anim16, 100);
  37. // setTimeout(anim17, 100);
  38. // setTimeout(anim18, 100);
  39. // setTimeout(anim19, 100);
  40. // setTimeout(anim20, 100);
  41. })
  42. // function anim1(deg){
  43. // $('.left-top').css('transform', deg)
  44. // }
  45. // function anim2(){
  46. // $('.left-top').css('transform', 'rotate(10deg)')
  47. // }
  48. // function anim3(){
  49. // $('.left-top').css('transform', 'rotate(15deg)')
  50. // }
  51. // function anim4(){
  52. // $('.left-top').css('transform', 'rotate(20deg)')
  53. // }
  54. // function anim5(){
  55. // $('.left-top').css('transform', 'rotate(25deg)')
  56. // }
  57. // function anim6(){
  58. // $('.left-top').css('transform', 'rotate(30deg)')
  59. // }
  60. // function anim8(){
  61. // $('.left-top').css('transform', 'rotate(35deg)')
  62. // }
  63. // function anim9(){
  64. // $('.left-top').css('transform', 'rotate(40deg)')
  65. // }
  66. // function anim10(){
  67. // $('.left-top').css('transform', 'rotate(45deg)')
  68. // }
  69. // function anim11(){
  70. // $('.left-top').css('transform', 'rotate(50deg)')
  71. // }
  72. // function anim12(){
  73. // $('.left-top').css('transform', 'rotate(55deg)')
  74. // }
  75. // function anim13(){
  76. // $('.left-top').css('transform', 'rotate(60deg)')
  77. // }
  78. // function anim14(){
  79. // $('.left-top').css('transform', 'rotate(65deg)')
  80. // }
  81. // function anim15(){
  82. // $('.left-top').css('transform', 'rotate(70deg)')
  83. // }
  84. // function anim17(){
  85. // $('.left-top').css('transform', 'rotate(75deg)')
  86. // }
  87. // function anim18(){
  88. // $('.left-top').css('transform', 'rotate(80deg)')
  89. // }
  90. // function anim19(){
  91. // $('.left-top').css('transform', 'rotate(85deg)')
  92. // }
  93. // function anim20(){
  94. // $('.left-top').css('transform', 'rotate(90deg)')
  95. // }
  96. $('#denis').hover(function() {
  97. $('.right-top').toggleClass('none');
  98. $('.name').removeClass('none');
  99. })
  100. $('#anna').hover(function() {
  101. $('.left-bottom').toggleClass('none');
  102. $('.name').removeClass('none');
  103. })
  104. $('#jane').hover(function() {
  105. $('.right-bottom').toggleClass('none');
  106. $('.name').removeClass('none');
  107. })
  108. // function rotation(target) {
  109. // $(target).animate ({
  110. // transform: 'rotate(20deg)'
  111. // }, 500)
  112. // console.log(target);
  113. // }
  114. // SCROLL
  115. var id = '';
  116. $('.menu > li > a').on('click', function(event, id){
  117. event.preventDefault();
  118. id = $(this).attr('href');
  119. scroll(id)
  120. });
  121. $('.scroll').on('click', function(event, id){
  122. event.preventDefault();
  123. id = $(this).attr('href');
  124. scroll(id)
  125. });
  126. function scroll(id){
  127. $('html, body').animate({
  128. scrollTop: $(id).position().top
  129. }, 1000);
  130. };
  131. // POPAP
  132. $('.baner-form').on('submit', function(event){
  133. event.preventDefault();
  134. $('.popap-background').css('background', 'rgba(0, 0, 0, 0.5)');
  135. $('.popap').show();
  136. this.reset();
  137. });
  138. $('.form-discount').on('submit', function(){
  139. event.preventDefault()
  140. $('body').css('background', 'rgba(0, 0, 0, 0.5)');
  141. $('.popap')
  142. .css('top', '3000px')
  143. .show();
  144. this.reset();
  145. });
  146. $('.popap-top img').on('click', function(){
  147. $('.popap').hide();
  148. $('.popap-background').css('background', 'rgba(0, 0, 0, 0.5)');
  149. });
  150. // paralax
  151. $(window).scroll(function() {
  152. var st = $(this).scrollTop();
  153. var x = st - 5800;
  154. $('.monthFree img').css({
  155. 'transform': "translate(0%, "+ x / 25 + "%"
  156. });
  157. })
  158. $(window).scroll(function() {
  159. var st = $(this).scrollTop();
  160. var x = st - 3000;
  161. $('.discount img').css({
  162. 'transform': "translate(0%, "+ x / 25 + "%"
  163. });
  164. })