https://legion-miniatures.com/g/s3/misc/animator/1.1.0/js/s3.animator.js

1// masalygin, 1.1.0
2
3(function ($, window, document, undefined) {
4
5	var $window = $(window);
6	var $document = $(document);
7	var countUp = window.countUp;
8
9	function Element(el) {
10
11		var num;
12		var cls;
13		var parent;
14		this.el = el;
15		this.$el = $(el);
16		this.data = this.$el.data('s3-animator');
17		this.params = this.data.split(/\s+/);
18
19		if (~this.params.indexOf('counter') && countUp) {
20
21			this.type = 'counter';
22			num = Number(this.$el.text().replace(/\D/g, '')) || 0;
23			this.counter = new countUp(this.el, 0, num, 0, 10, {
24				separator: ' ',
25				useGrouping: true,
26				useEasing: true
27			});
28
29		} else {
30
31			this.type = 'animate';
32			cls = this.params.map(function (param) {
33				return 's3-animator-' + param;
34			});
35			cls.push('s3-animator');
36			this.cls = cls.join(' ');
37
38		}
39
40		if (~this.data.indexOf('bar')) {
41
42			parent = this.$el.parent();
43			this.height = parent.height();
44			this.top = parent.offset().top;
45
46		} else {
47
48			this.height = this.$el.height();
49			this.top = this.$el.offset().top;
50
51		}
52	}
53
54	Element.prototype.play = function () {
55		this.working = true;
56		if (this.type == 'counter') {
57			this.counter.start();
58		} else {
59			this.$el.removeClass('s3-animator-hide').addClass(this.cls);
60		}
61
62	};
63
64	Element.prototype.stop = function () {
65		this.working = false;
66		if (this.type == 'counter') {
67			this.counter.reset();
68		} else {
69			this.$el.addClass('s3-animator-hide').removeClass(this.cls);
70		}
71
72	};
73
74	function Animator() {
75
76		var self = this;
77		this.offset = 10;
78		this.refresh();
79		this.updateElements = this.refresh;
80

81		$document.on('scroll.s3_animator', function () {
82			self.check();
83		});
84
85		$window.on('resize.s3_animator', function () {
86			self.windowHeight = $window.height();
87			self.check();
88		}).trigger('resize.s3_animator');
89
90	}
91
92	Animator.prototype.check = function () {
93
94		var self = this;
95		var scrollTop = $document.scrollTop();
96		$.each(this.elements, function () {
97			if (this.top + this.height > scrollTop + self.offset && this.top < scrollTop + self.windowHeight - self.offset) {
98				if (!(self.once && this.working)) {
99					this.play();
100				}
101			} else {
102				if (!(self.once && this.working)) {
103					this.stop();
104				}
105			}
106		});
107
108	};
109
110	Animator.prototype.refresh = function () {
111
112		var self = this;
113		this.elements = [];
114		$('[data-s3-animator]').each(function () {
115			self.elements.push(new Element(this));
116		});
117
118	};
119
120	window.s3Animator = new Animator();
121
122})(jQuery, window, document);
123
124//s3Animator.once = true;