site.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. (function() {
  2. var _ = v;
  3. var scrollerDesc = mctracker();
  4. scrollerDesc.setup({
  5. element: _('.box-container').toArray(),
  6. offsetBottom: '20%',
  7. once: true,
  8. }).onStepEnter(function(response) {
  9. var list = _(response.element).find('li');
  10. list.forEach(function(item, i) {
  11. var delay = i * 150 / 1000;
  12. item = _(item);
  13. item.attr('style', 'transition-delay: ' + delay + 's;');
  14. })
  15. list.addClass('show')
  16. });
  17. var header = function() {
  18. var lastKnownScrollY = 0;
  19. var currentScrollY = 0;
  20. var eleHeader = null;
  21. const classes = {
  22. pinned: 'header-pin',
  23. unpinned: 'header-unpin',
  24. };
  25. function onScroll() {
  26. currentScrollY = window.pageYOffset;
  27. if (currentScrollY <= 0) {
  28. restore();
  29. return;
  30. }
  31. if (currentScrollY < lastKnownScrollY) {
  32. pin();
  33. } else if (currentScrollY > lastKnownScrollY) {
  34. unpin();
  35. }
  36. lastKnownScrollY = currentScrollY;
  37. }
  38. function pin() {
  39. eleHeader.removeClass(classes.unpinned);
  40. eleHeader.addClass(classes.pinned);
  41. }
  42. function unpin() {
  43. eleHeader.removeClass(classes.pinned);
  44. eleHeader.addClass(classes.unpinned);
  45. }
  46. function restore() {
  47. eleHeader.removeClass(classes.pinned);
  48. eleHeader.removeClass(classes.unpinned);
  49. }
  50. eleHeader = _('.main-header');
  51. headerHeaight = eleHeader.height();
  52. onScroll();
  53. window.onload = function() {
  54. document.addEventListener('scroll', onScroll, false);
  55. }
  56. }
  57. header();
  58. var specifics = function(params) {
  59. var scrollerDesc = mctracker();
  60. scrollerDesc.setup({
  61. element: _('.especifications ul').toArray(),
  62. bottom: '300',
  63. once: true,
  64. }).onStepEnter(function(response) {
  65. var list = _(response.element).find('li');
  66. list.forEach(function(item, i) {
  67. var delay = i * 100 / 1000;
  68. item = _(item);
  69. item.attr('style', 'transition-delay: ' + delay + 's;');
  70. })
  71. list.addClass('show')
  72. });
  73. }
  74. specifics();
  75. const letters = _('svg').children('g');
  76. function animateLetter(index = 0) {
  77. if (index > letters.length - 1) {
  78. return false;
  79. }
  80. let nextIndex = index + 1;
  81. let paths = _(letters[index]).find('path');
  82. let duration = (index > 0 ? 390 : 1000);
  83. anime({
  84. targets: paths.toArray(),
  85. strokeDashoffset: [anime.setDashoffset, 0],
  86. easing: 'easeInOutSine',
  87. duration: duration,
  88. begin: () => {
  89. paths.addClass('hw');
  90. },
  91. complete: () => {
  92. animateLetter(nextIndex);
  93. }
  94. });
  95. }
  96. animateLetter(0);
  97. }());