wow.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524
  1. (function() {
  2. var MutationObserver, Util, WeakMap, getComputedStyle, getComputedStyleRX,
  3. bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
  4. indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
  5. Util = (function() {
  6. function Util() {}
  7. Util.prototype.extend = function(custom, defaults) {
  8. var key, value;
  9. for (key in defaults) {
  10. value = defaults[key];
  11. if (custom[key] == null) {
  12. custom[key] = value;
  13. }
  14. }
  15. return custom;
  16. };
  17. Util.prototype.isMobile = function(agent) {
  18. return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent);
  19. };
  20. Util.prototype.createEvent = function(event, bubble, cancel, detail) {
  21. var customEvent;
  22. if (bubble == null) {
  23. bubble = false;
  24. }
  25. if (cancel == null) {
  26. cancel = false;
  27. }
  28. if (detail == null) {
  29. detail = null;
  30. }
  31. if (document.createEvent != null) {
  32. customEvent = document.createEvent('CustomEvent');
  33. customEvent.initCustomEvent(event, bubble, cancel, detail);
  34. } else if (document.createEventObject != null) {
  35. customEvent = document.createEventObject();
  36. customEvent.eventType = event;
  37. } else {
  38. customEvent.eventName = event;
  39. }
  40. return customEvent;
  41. };
  42. Util.prototype.emitEvent = function(elem, event) {
  43. if (elem.dispatchEvent != null) {
  44. return elem.dispatchEvent(event);
  45. } else if (event in (elem != null)) {
  46. return elem[event]();
  47. } else if (("on" + event) in (elem != null)) {
  48. return elem["on" + event]();
  49. }
  50. };
  51. Util.prototype.addEvent = function(elem, event, fn) {
  52. if (elem.addEventListener != null) {
  53. return elem.addEventListener(event, fn, false);
  54. } else if (elem.attachEvent != null) {
  55. return elem.attachEvent("on" + event, fn);
  56. } else {
  57. return elem[event] = fn;
  58. }
  59. };
  60. Util.prototype.removeEvent = function(elem, event, fn) {
  61. if (elem.removeEventListener != null) {
  62. return elem.removeEventListener(event, fn, false);
  63. } else if (elem.detachEvent != null) {
  64. return elem.detachEvent("on" + event, fn);
  65. } else {
  66. return delete elem[event];
  67. }
  68. };
  69. Util.prototype.innerHeight = function() {
  70. if ('innerHeight' in window) {
  71. return window.innerHeight;
  72. } else {
  73. return document.documentElement.clientHeight;
  74. }
  75. };
  76. return Util;
  77. })();
  78. WeakMap = this.WeakMap || this.MozWeakMap || (WeakMap = (function() {
  79. function WeakMap() {
  80. this.keys = [];
  81. this.values = [];
  82. }
  83. WeakMap.prototype.get = function(key) {
  84. var i, item, j, len, ref;
  85. ref = this.keys;
  86. for (i = j = 0, len = ref.length; j < len; i = ++j) {
  87. item = ref[i];
  88. if (item === key) {
  89. return this.values[i];
  90. }
  91. }
  92. };
  93. WeakMap.prototype.set = function(key, value) {
  94. var i, item, j, len, ref;
  95. ref = this.keys;
  96. for (i = j = 0, len = ref.length; j < len; i = ++j) {
  97. item = ref[i];
  98. if (item === key) {
  99. this.values[i] = value;
  100. return;
  101. }
  102. }
  103. this.keys.push(key);
  104. return this.values.push(value);
  105. };
  106. return WeakMap;
  107. })());
  108. MutationObserver = this.MutationObserver || this.WebkitMutationObserver || this.MozMutationObserver || (MutationObserver = (function() {
  109. function MutationObserver() {
  110. if (typeof console !== "undefined" && console !== null) {
  111. console.warn('MutationObserver is not supported by your browser.');
  112. }
  113. if (typeof console !== "undefined" && console !== null) {
  114. console.warn('WOW.js cannot detect dom mutations, please call .sync() after loading new content.');
  115. }
  116. }
  117. MutationObserver.notSupported = true;
  118. MutationObserver.prototype.observe = function() {};
  119. return MutationObserver;
  120. })());
  121. getComputedStyle = this.getComputedStyle || function(el, pseudo) {
  122. this.getPropertyValue = function(prop) {
  123. var ref;
  124. if (prop === 'float') {
  125. prop = 'styleFloat';
  126. }
  127. if (getComputedStyleRX.test(prop)) {
  128. prop.replace(getComputedStyleRX, function(_, _char) {
  129. return _char.toUpperCase();
  130. });
  131. }
  132. return ((ref = el.currentStyle) != null ? ref[prop] : void 0) || null;
  133. };
  134. return this;
  135. };
  136. getComputedStyleRX = /(\-([a-z]){1})/g;
  137. this.WOW = (function() {
  138. WOW.prototype.defaults = {
  139. boxClass: 'wow',
  140. animateClass: 'animated',
  141. offset: 0,
  142. mobile: true,
  143. live: true,
  144. callback: null
  145. };
  146. function WOW(options) {
  147. if (options == null) {
  148. options = {};
  149. }
  150. this.scrollCallback = bind(this.scrollCallback, this);
  151. this.scrollHandler = bind(this.scrollHandler, this);
  152. this.resetAnimation = bind(this.resetAnimation, this);
  153. this.start = bind(this.start, this);
  154. this.scrolled = true;
  155. this.config = this.util().extend(options, this.defaults);
  156. this.animationNameCache = new WeakMap();
  157. this.wowEvent = this.util().createEvent(this.config.boxClass);
  158. }
  159. WOW.prototype.init = function() {
  160. var ref;
  161. this.element = window.document.documentElement;
  162. if ((ref = document.readyState) === "interactive" || ref === "complete") {
  163. this.start();
  164. } else {
  165. this.util().addEvent(document, 'DOMContentLoaded', this.start);
  166. }
  167. return this.finished = [];
  168. };
  169. WOW.prototype.start = function() {
  170. var box, j, len, ref;
  171. this.stopped = false;
  172. this.boxes = (function() {
  173. var j, len, ref, results;
  174. ref = this.element.querySelectorAll("." + this.config.boxClass);
  175. results = [];
  176. for (j = 0, len = ref.length; j < len; j++) {
  177. box = ref[j];
  178. results.push(box);
  179. }
  180. return results;
  181. }).call(this);
  182. this.all = (function() {
  183. var j, len, ref, results;
  184. ref = this.boxes;
  185. results = [];
  186. for (j = 0, len = ref.length; j < len; j++) {
  187. box = ref[j];
  188. results.push(box);
  189. }
  190. return results;
  191. }).call(this);
  192. if (this.boxes.length) {
  193. if (this.disabled()) {
  194. this.resetStyle();
  195. } else {
  196. ref = this.boxes;
  197. for (j = 0, len = ref.length; j < len; j++) {
  198. box = ref[j];
  199. this.applyStyle(box, true);
  200. }
  201. }
  202. }
  203. if (!this.disabled()) {
  204. this.util().addEvent(window, 'scroll', this.scrollHandler);
  205. this.util().addEvent(window, 'resize', this.scrollHandler);
  206. this.interval = setInterval(this.scrollCallback, 50);
  207. }
  208. if (this.config.live) {
  209. return new MutationObserver((function(_this) {
  210. return function(records) {
  211. var k, len1, node, record, results;
  212. results = [];
  213. for (k = 0, len1 = records.length; k < len1; k++) {
  214. record = records[k];
  215. results.push((function() {
  216. var l, len2, ref1, results1;
  217. ref1 = record.addedNodes || [];
  218. results1 = [];
  219. for (l = 0, len2 = ref1.length; l < len2; l++) {
  220. node = ref1[l];
  221. results1.push(this.doSync(node));
  222. }
  223. return results1;
  224. }).call(_this));
  225. }
  226. return results;
  227. };
  228. })(this)).observe(document.body, {
  229. childList: true,
  230. subtree: true
  231. });
  232. }
  233. };
  234. WOW.prototype.stop = function() {
  235. this.stopped = true;
  236. this.util().removeEvent(window, 'scroll', this.scrollHandler);
  237. this.util().removeEvent(window, 'resize', this.scrollHandler);
  238. if (this.interval != null) {
  239. return clearInterval(this.interval);
  240. }
  241. };
  242. WOW.prototype.sync = function(element) {
  243. if (MutationObserver.notSupported) {
  244. return this.doSync(this.element);
  245. }
  246. };
  247. WOW.prototype.doSync = function(element) {
  248. var box, j, len, ref, results;
  249. if (element == null) {
  250. element = this.element;
  251. }
  252. if (element.nodeType !== 1) {
  253. return;
  254. }
  255. element = element.parentNode || element;
  256. ref = element.querySelectorAll("." + this.config.boxClass);
  257. results = [];
  258. for (j = 0, len = ref.length; j < len; j++) {
  259. box = ref[j];
  260. if (indexOf.call(this.all, box) < 0) {
  261. this.boxes.push(box);
  262. this.all.push(box);
  263. if (this.stopped || this.disabled()) {
  264. this.resetStyle();
  265. } else {
  266. this.applyStyle(box, true);
  267. }
  268. results.push(this.scrolled = true);
  269. } else {
  270. results.push(void 0);
  271. }
  272. }
  273. return results;
  274. };
  275. WOW.prototype.show = function(box) {
  276. this.applyStyle(box);
  277. box.className = box.className + " " + this.config.animateClass;
  278. if (this.config.callback != null) {
  279. this.config.callback(box);
  280. }
  281. this.util().emitEvent(box, this.wowEvent);
  282. this.util().addEvent(box, 'animationend', this.resetAnimation);
  283. this.util().addEvent(box, 'oanimationend', this.resetAnimation);
  284. this.util().addEvent(box, 'webkitAnimationEnd', this.resetAnimation);
  285. this.util().addEvent(box, 'MSAnimationEnd', this.resetAnimation);
  286. return box;
  287. };
  288. WOW.prototype.applyStyle = function(box, hidden) {
  289. var delay, duration, iteration;
  290. duration = box.getAttribute('data-wow-duration');
  291. delay = box.getAttribute('data-wow-delay');
  292. iteration = box.getAttribute('data-wow-iteration');
  293. return this.animate((function(_this) {
  294. return function() {
  295. return _this.customStyle(box, hidden, duration, delay, iteration);
  296. };
  297. })(this));
  298. };
  299. WOW.prototype.animate = (function() {
  300. if ('requestAnimationFrame' in window) {
  301. return function(callback) {
  302. return window.requestAnimationFrame(callback);
  303. };
  304. } else {
  305. return function(callback) {
  306. return callback();
  307. };
  308. }
  309. })();
  310. WOW.prototype.resetStyle = function() {
  311. var box, j, len, ref, results;
  312. ref = this.boxes;
  313. results = [];
  314. for (j = 0, len = ref.length; j < len; j++) {
  315. box = ref[j];
  316. results.push(box.style.visibility = 'visible');
  317. }
  318. return results;
  319. };
  320. WOW.prototype.resetAnimation = function(event) {
  321. var target;
  322. if (event.type.toLowerCase().indexOf('animationend') >= 0) {
  323. target = event.target || event.srcElement;
  324. return target.className = target.className.replace(this.config.animateClass, '').trim();
  325. }
  326. };
  327. WOW.prototype.customStyle = function(box, hidden, duration, delay, iteration) {
  328. if (hidden) {
  329. this.cacheAnimationName(box);
  330. }
  331. box.style.visibility = hidden ? 'hidden' : 'visible';
  332. if (duration) {
  333. this.vendorSet(box.style, {
  334. animationDuration: duration
  335. });
  336. }
  337. if (delay) {
  338. this.vendorSet(box.style, {
  339. animationDelay: delay
  340. });
  341. }
  342. if (iteration) {
  343. this.vendorSet(box.style, {
  344. animationIterationCount: iteration
  345. });
  346. }
  347. this.vendorSet(box.style, {
  348. animationName: hidden ? 'none' : this.cachedAnimationName(box)
  349. });
  350. return box;
  351. };
  352. WOW.prototype.vendors = ["moz", "webkit"];
  353. WOW.prototype.vendorSet = function(elem, properties) {
  354. var name, results, value, vendor;
  355. results = [];
  356. for (name in properties) {
  357. value = properties[name];
  358. elem["" + name] = value;
  359. results.push((function() {
  360. var j, len, ref, results1;
  361. ref = this.vendors;
  362. results1 = [];
  363. for (j = 0, len = ref.length; j < len; j++) {
  364. vendor = ref[j];
  365. results1.push(elem["" + vendor + (name.charAt(0).toUpperCase()) + (name.substr(1))] = value);
  366. }
  367. return results1;
  368. }).call(this));
  369. }
  370. return results;
  371. };
  372. WOW.prototype.vendorCSS = function(elem, property) {
  373. var j, len, ref, result, style, vendor;
  374. style = getComputedStyle(elem);
  375. result = style.getPropertyCSSValue(property);
  376. ref = this.vendors;
  377. for (j = 0, len = ref.length; j < len; j++) {
  378. vendor = ref[j];
  379. result = result || style.getPropertyCSSValue("-" + vendor + "-" + property);
  380. }
  381. return result;
  382. };
  383. WOW.prototype.animationName = function(box) {
  384. var animationName;
  385. try {
  386. animationName = this.vendorCSS(box, 'animation-name').cssText;
  387. } catch (_error) {
  388. animationName = getComputedStyle(box).getPropertyValue('animation-name');
  389. }
  390. if (animationName === 'none') {
  391. return '';
  392. } else {
  393. return animationName;
  394. }
  395. };
  396. WOW.prototype.cacheAnimationName = function(box) {
  397. return this.animationNameCache.set(box, this.animationName(box));
  398. };
  399. WOW.prototype.cachedAnimationName = function(box) {
  400. return this.animationNameCache.get(box);
  401. };
  402. WOW.prototype.scrollHandler = function() {
  403. return this.scrolled = true;
  404. };
  405. WOW.prototype.scrollCallback = function() {
  406. var box;
  407. if (this.scrolled) {
  408. this.scrolled = false;
  409. this.boxes = (function() {
  410. var j, len, ref, results;
  411. ref = this.boxes;
  412. results = [];
  413. for (j = 0, len = ref.length; j < len; j++) {
  414. box = ref[j];
  415. if (!(box)) {
  416. continue;
  417. }
  418. if (this.isVisible(box)) {
  419. this.show(box);
  420. continue;
  421. }
  422. results.push(box);
  423. }
  424. return results;
  425. }).call(this);
  426. if (!(this.boxes.length || this.config.live)) {
  427. return this.stop();
  428. }
  429. }
  430. };
  431. WOW.prototype.offsetTop = function(element) {
  432. var top;
  433. while (element.offsetTop === void 0) {
  434. element = element.parentNode;
  435. }
  436. top = element.offsetTop;
  437. while (element = element.offsetParent) {
  438. top += element.offsetTop;
  439. }
  440. return top;
  441. };
  442. WOW.prototype.isVisible = function(box) {
  443. var bottom, offset, top, viewBottom, viewTop;
  444. offset = box.getAttribute('data-wow-offset') || this.config.offset;
  445. viewTop = window.pageYOffset;
  446. viewBottom = viewTop + Math.min(this.element.clientHeight, this.util().innerHeight()) - offset;
  447. top = this.offsetTop(box);
  448. bottom = top + box.clientHeight;
  449. return top <= viewBottom && bottom >= viewTop;
  450. };
  451. WOW.prototype.util = function() {
  452. return this._util != null ? this._util : this._util = new Util();
  453. };
  454. WOW.prototype.disabled = function() {
  455. return !this.config.mobile && this.util().isMobile(navigator.userAgent);
  456. };
  457. return WOW;
  458. })();
  459. }).call(this);
  460. /* ==============================================
  461. ANIMATION -->
  462. =============================================== */
  463. wow = new WOW({
  464. boxClass: 'wow', // default
  465. animateClass: 'animated', // default
  466. offset: 0, // default
  467. mobile: true, // default
  468. live: true // default
  469. })
  470. wow.init();