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.

184 lines
8.6 KiB

  1. $(function () {
  2. if ($('.vinnyfollow').length) {
  3. setTimeout(function () {
  4. setupAnimations();
  5. }, 100);
  6. $(window).resize(function () {
  7. $('.vinny-animate').remove();
  8. setupAnimations();
  9. });
  10. var prevScroll = 0;
  11. $(window).scroll(function () {
  12. if ($('.features').length) {
  13. //Features widget
  14. animateFeaturesVinny($('.features.vinnyfollow .vinny-line'));
  15. }
  16. else if ($('.platforms-chart').length) {
  17. //Platforms chart widget
  18. animatePlatformsVinny($('.platforms-chart.vinnyfollow .vinny-line'), $(window).scrollTop() < prevScroll);
  19. }
  20. else if ($('.partner-box').length) {
  21. //Partners list
  22. animatePartnersVinny($('.partner-box:last-child .vinnyfollow .vinny-line:last-child'));
  23. }
  24. else {
  25. //General vinnyfollow animation
  26. animateToBottom($('.vinnyfollow').last().find('.vinny-line'));
  27. }
  28. prevScroll = $(window).scrollTop();
  29. });
  30. }
  31. });
  32. var animateToBottom = function (vinnyline) {
  33. checkAnimateBar();
  34. if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
  35. var vinnyflow = vinnyline.find('.vinnyflow');
  36. var vinnyBottom = getVinnyBottom(vinnyline);
  37. var vinnyPosition = parseInt(vinnyflow.css('top').replace('px', '')) + vinnyflow.height();
  38. if (vinnyPosition < vinnyBottom) {
  39. var orig = vinnyPosition - vinnyflow.height();
  40. var top = vinnyBottom - vinnyflow.height();
  41. $('.vinnyflow').animate({ 'top': "+=" + (top - orig) + "px" }, 300);
  42. setTimeout(function () {
  43. $('.vinnyfollow').addClass('animate-bar');
  44. }, 300);
  45. }
  46. }
  47. };
  48. var animateFeaturesVinny = function (vinnyline) {
  49. if (vinnyline.length) {
  50. var vinnyflow = vinnyline.find('.vinnyflow');
  51. var vinnyBottom = getVinnyBottom(vinnyline);
  52. var vinnyPosition = parseInt(vinnyflow.css('top').replace('px', '')) + vinnyflow.height();
  53. var horizontalWidth = $('.features .row').width() / 2;
  54. if (vinnyPosition >= vinnyBottom) {
  55. var fraction = (vinnyPosition - vinnyBottom) / vinnyflow.height();
  56. var calc = Math.round(horizontalWidth * fraction);
  57. var barWidth = calc <= horizontalWidth ? calc : horizontalWidth;
  58. $('.vinny-horiz').css('width', barWidth);
  59. $('.vinny-horiz').css('left', "calc(50% - (" + barWidth / 2 + "px - 2px))");
  60. if (calc > horizontalWidth) {
  61. var maxHeight = parseInt($('.feature').css('margin-top').replace('px', '')) + 1;
  62. var legCalc = calc - barWidth;
  63. var height = legCalc <= maxHeight ? legCalc : maxHeight;
  64. $('.vinny-leg').css('height', height);
  65. }
  66. else {
  67. $('.vinny-leg').css('height', 0);
  68. }
  69. }
  70. else {
  71. $('.vinny-horiz').css('left', '50%');
  72. $('.vinny-horiz').css('width', 0);
  73. $('.vinny-leg').css('height', 0);
  74. }
  75. }
  76. };
  77. var animatePlatformsVinny = function (vinnyline, scrollUp) {
  78. if (vinnyline.length) {
  79. checkAnimateBar();
  80. var vinnyflow = vinnyline.find('.vinnyflow');
  81. var vinnyBottom = getVinnyBottom(vinnyline);
  82. var vinnyPosition = parseInt(vinnyflow.css('top').replace('px', ''));
  83. var horizontalWidth = $('.platforms').width() - 61 - 9;
  84. var legHeight = parseInt($('.platforms li').css('margin-top').replace('px', '')) + 2;
  85. if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
  86. if (vinnyPosition < vinnyBottom) {
  87. var orig = vinnyPosition - vinnyflow.height();
  88. $('.vinnyflow').animate({ 'top': "+=" + (vinnyBottom - orig) + "px" }, 600);
  89. $('.vinny-horiz').css('transition-delay', '.4s');
  90. $('.vinny-horiz').css('left', "calc(50% - (" + horizontalWidth / 2 + "px - 3px))");
  91. $('.vinny-horiz').css('width', horizontalWidth + "px");
  92. $('.vinny-leg').css('transition-delay', '.6s');
  93. $('.vinny-leg').css('height', legHeight + "px");
  94. setTimeout(function () {
  95. $('.vinnyfollow').addClass('animate-bar');
  96. }, 600);
  97. }
  98. else {
  99. $('.vinny-horiz').css('left', "calc(50% - (" + horizontalWidth / 2 + "px - 3px))");
  100. $('.vinny-horiz').css('width', horizontalWidth + "px");
  101. $('.vinny-leg').css('height', legHeight);
  102. }
  103. }
  104. else if ((vinnyPosition + vinnyflow.height()) >= vinnyBottom && !scrollUp) {
  105. var adjPosition = vinnyPosition + vinnyflow.height();
  106. var fraction = (adjPosition - vinnyBottom) / vinnyflow.height();
  107. var calc = Math.round(horizontalWidth * fraction);
  108. var barWidth = calc <= horizontalWidth ? calc : horizontalWidth;
  109. $('.vinny-horiz').css('width', barWidth + "px");
  110. $('.vinny-horiz').css('left', "calc(50% - (" + barWidth / 2 + "px - 2px))");
  111. if (calc > horizontalWidth) {
  112. var maxHeight = legHeight;
  113. var legCalc = calc - barWidth;
  114. var height = legCalc <= maxHeight ? legCalc : maxHeight;
  115. $('.vinny-leg').css('height', height);
  116. }
  117. else {
  118. $('.vinny-leg').css('height', 0);
  119. }
  120. }
  121. else {
  122. $('.vinny-horiz').css('left', '50%');
  123. $('.vinny-horiz').css('width', 0);
  124. $('.vinny-leg').css('height', 0);
  125. }
  126. }
  127. };
  128. var animatePartnersVinny = function (vinnyline) {
  129. if (vinnyline.length) {
  130. checkAnimateBar();
  131. if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
  132. var vinnyflow = vinnyline.find('.vinnyflow');
  133. var vinnyBottom = getVinnyBottom(vinnyline);
  134. var vinnyPosition = parseInt(vinnyflow.css('top').replace('px', '')) + vinnyflow.height();
  135. if (vinnyPosition < vinnyBottom) {
  136. var orig = vinnyPosition - vinnyflow.height();
  137. var top = vinnyBottom - vinnyflow.height();
  138. $('.vinny-line:not(.line-horiz) .vinnyflow').animate({ 'top': "+=" + (top - orig) + "px" }, 300);
  139. $('.vinny-line.line-horiz .vinnyflow').animate({ 'left': '100%' }, 100);
  140. setTimeout(function () {
  141. $('.vinnyfollow').addClass('animate-bar');
  142. }, 300);
  143. }
  144. }
  145. }
  146. };
  147. var getVinnyBottom = function (vinnyline) {
  148. var vinnycolor = vinnyline.find('.vinnycolor');
  149. return parseInt(vinnycolor.css('top').replace('px', '')) + vinnycolor.height();
  150. };
  151. var checkAnimateBar = function () {
  152. if ($('.animate-bar').length) {
  153. if ($('.platforms-chart').length) {
  154. $('.vinny-horiz').css('transition-delay', '.2s');
  155. $('.vinny-horiz').css('left', '50%');
  156. $('.vinny-horiz').css('width', 0);
  157. $('.vinny-leg').css('transition-delay', '0s');
  158. $('.vinny-leg').css('height', 0);
  159. }
  160. setTimeout(function () {
  161. $('.vinnyfollow').removeClass('animate-bar');
  162. }, 500);
  163. }
  164. };
  165. var setupAnimations = function () {
  166. if (!$('.vinny-animate').length) {
  167. if ($('.features').length) {
  168. var vinnyBottom = getVinnyBottom($('.features.vinnyfollow .vinny-line'));
  169. var horizontalWidth = $('.features .row').width() / 2;
  170. $('.features.vinnyfollow').append('<div class="vinny-animate"><div class="vinny-horiz"></div><div class="vinny-leg"></div><div class="vinny-leg"></div></div>');
  171. $('.vinny-horiz, .vinny-leg').css('top', vinnyBottom - 1 + "px");
  172. $($('.vinny-leg')[0]).css('left', "calc(50% - (" + horizontalWidth / 2 + "px + 1px))");
  173. $($('.vinny-leg')[1]).css('left', "calc(50% + (" + horizontalWidth / 2 + "px - 1px))");
  174. }
  175. else if ($('.platforms-chart').length) {
  176. var vinnyBottom = getVinnyBottom($('.platforms-chart.vinnyfollow .vinny-line'));
  177. $('.platforms-chart.vinnyfollow').append('<div class="vinny-animate"><div class="vinny-horiz"></div></div>');
  178. $('.platforms li').each(function (i, elem) {
  179. $('.vinny-animate').append("<div class=\"vinny-leg\" style=\"left: " + ($(elem).offset().left + ($(elem).width() / 2) - 1) + "px\"></div>");
  180. });
  181. $('.vinny-horiz, .vinny-leg').css('top', vinnyBottom - 2 + "px");
  182. }
  183. }
  184. };