wow.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. 'use strict';
  2. var WOW;
  3. (function ($) {
  4. WOW = function WOW() {
  5. return {
  6. init: function init() {
  7. var animationName = [];
  8. var once = 1;
  9. function mdbWow() {
  10. var windowHeight = window.innerHeight;
  11. var scroll = window.scrollY;
  12. $('.wow').each(function () {
  13. if ($(this).css('visibility') == 'visible') {
  14. return;
  15. }
  16. if (windowHeight + scroll - 100 > getOffset(this) && scroll < getOffset(this) || windowHeight + scroll - 100 > getOffset(this) + $(this).height() && scroll < getOffset(this) + $(this).height() || windowHeight + scroll == $(document).height() && getOffset(this) + 100 > $(document).height()) {
  17. var index = $(this).index('.wow');
  18. var delay = $(this).attr('data-wow-delay');
  19. if (delay) {
  20. delay = $(this).attr('data-wow-delay').slice(0, -1
  21. );
  22. var self = this;
  23. var timeout = parseFloat(delay) * 1000;
  24. $(self).addClass('animated');
  25. $(self).css({
  26. 'visibility': 'visible'
  27. });
  28. $(self).css({
  29. 'animation-delay': delay
  30. });
  31. $(self).css({
  32. 'animation-name': animationName[index]
  33. });
  34. var removeTime = $(this).css('animation-duration').slice(0, -1) * 1000;
  35. if ($(this).attr('data-wow-delay')) {
  36. removeTime += $(this).attr('data-wow-delay').slice(0, -1) * 1000;
  37. }
  38. var self = this;
  39. setTimeout(function () {
  40. $(self).removeClass('animated');
  41. }, removeTime);
  42. } else {
  43. $(this).addClass('animated');
  44. $(this).css({
  45. 'visibility': 'visible'
  46. });
  47. $(this).css({
  48. 'animation-name': animationName[index]
  49. });
  50. var removeTime = $(this).css('animation-duration').slice(0, -1) * 1000;
  51. var self = this;
  52. setTimeout(function () {
  53. $(self).removeClass('animated');
  54. }, removeTime);
  55. }
  56. }
  57. });
  58. }
  59. function appear() {
  60. $('.wow').each(function () {
  61. var index = $(this).index('.wow');
  62. var delay = $(this).attr('data-wow-delay');
  63. if (delay) {
  64. delay = $(this).attr('data-wow-delay').slice(0, -1);
  65. var timeout = parseFloat(delay) * 1000;
  66. $(this).addClass('animated');
  67. $(this).css({
  68. 'visibility': 'visible'
  69. });
  70. $(this).css({
  71. 'animation-delay': delay + 's'
  72. });
  73. $(this).css({
  74. 'animation-name': animationName[index]
  75. });
  76. } else {
  77. $(this).addClass('animated');
  78. $(this).css({
  79. 'visibility': 'visible'
  80. });
  81. $(this).css({
  82. 'animation-name': animationName[index]
  83. });
  84. }
  85. });
  86. }
  87. function hide() {
  88. var windowHeight = window.innerHeight;
  89. var scroll = window.scrollY;
  90. $('.wow.animated').each(function () {
  91. if (windowHeight + scroll - 100 > getOffset(this) && scroll > getOffset(this) + 100 || windowHeight + scroll - 100 < getOffset(this) && scroll < getOffset(this) + 100 || getOffset(this) + $(this).height > $(document).height() - 100) {
  92. $(this).removeClass('animated');
  93. $(this).css({
  94. 'animation-name': 'none'
  95. });
  96. $(this).css({
  97. 'visibility': 'hidden'
  98. });
  99. } else {
  100. var removeTime = $(this).css('animation-duration').slice(0, -1) * 1000;
  101. if ($(this).attr('data-wow-delay')) {
  102. removeTime += $(this).attr('data-wow-delay').slice(0, -1) * 1000;
  103. }
  104. var self = this;
  105. setTimeout(function () {
  106. $(self).removeClass('animated');
  107. }, removeTime);
  108. }
  109. });
  110. mdbWow();
  111. once--;
  112. }
  113. function getOffset(elem) {
  114. var box = elem.getBoundingClientRect();
  115. var body = document.body;
  116. var docEl = document.documentElement;
  117. var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
  118. var clientTop = docEl.clientTop || body.clientTop || 0;
  119. var top = box.top + scrollTop - clientTop;
  120. return Math.round(top);
  121. }
  122. $('.wow').each(function () {
  123. $(this).css({
  124. 'visibility': 'hidden'
  125. });
  126. animationName[$(this).index('.wow')] = $(this).css('animation-name');
  127. $(this).css({
  128. 'animation-name': 'none'
  129. });
  130. });
  131. $(window).scroll(function () {
  132. if (once) {
  133. hide();
  134. } else {
  135. mdbWow();
  136. }
  137. });
  138. appear();
  139. }
  140. };
  141. };
  142. })(jQuery);