https://www.sycom.co.jp/bto/silent/noctua_edition/js/index.js

1
2$(window).on('load',function(){
3	var windowH = $(window).height() / 1.25 ;
4	var graphSelectors = ['.graph01', '.graph02', '.graph03', '.graph04'];
5
6	function formatCountValue(value, decimals, hasComma) {
7		var displayValue = decimals > 0 ? Number(value).toFixed(decimals) : Math.ceil(value).toString();
8
9		if (hasComma) {
10			displayValue = Number(displayValue).toLocaleString('en-US');
11		}
12
13		return displayValue;
14	}
15
16	function cacheCountUpState($target) {
17		if ($target.data('endValue') !== undefined) {
18			return;
19		}
20
21		var rawText = $.trim($target.text());
22		var normalized = rawText.replace(/,/g, '');
23		var inferredDecimals = normalized.indexOf('.') !== -1 ? (normalized.split('.')[1] || '').length : 0;
24		var decimals = inferredDecimals > 0 ? (Number($target.data('decimals')) || inferredDecimals) : 0;
25		var endValue = Number(normalized);
26
27		$target.data({
28			hasComma: rawText.indexOf(',') !== -1,
29			decimals: decimals,
30			endValue: Number.isNaN(endValue) ? 0 : endValue
31		});
32	}
33
34	function resetGraphSection(selector) {
35		var $section = $(selector);
36
37		if ($section.length === 0) {
38			return;
39		}
40
41		$section.removeData('animated');
42		$section.find('.graph .inner').removeClass('active');
43		$section.find('.count-up').each(function () {
44			var $target = $(this);
45
46			cacheCountUpState($target);
47			$target.stop(true, true).prop('Counter', 0).text(formatCountValue(0, $target.data('decimals') || 0, !!$target.data('hasComma')));
48		});
49	}
50
51	function resetGraphSections(selectors) {
52		$.each(selectors, function (_, selector) {
53			resetGraphSection(selector);
54		});
55	}
56
57	function animateCountUp($target) {
58		cacheCountUpState($target);
59
60		var hasComma = $target.data('hasComma');
61		var decimals = Number($target.data('decimals'));
62		var endValue = Number($target.data('endValue'));
63
64		if (!Number.isFinite(decimals)) {
65			decimals = 0;
66		}
67
68		if (Number.isNaN(endValue)) {
69			return;
70		}
71
72		$target.prop('Counter', 0).animate({
73			Counter: endValue
74		}, {
75			duration: 1500,
76			easing: 'swing',
77			step: function (now) {
78				var displayValue;
79				if (decimals > 0) {
80					displayValue = now.toFixed(decimals);
81				} else {
82					displayValue = Math.ceil(now).toString();
83				}
84
85				if (hasComma) {
86					displayValue = Number(displayValue).toLocaleString('en-US');
87				}
88
89				$(this).text(displayValue);
90			}
91		});
92	}
93
94	function animateGraphSection(selector) {
95		var $section = $(selector);
96
97		if ($section.length === 0 || $section.data('animated')) {
98			return;
99		}
100
101		var targetY = $section.offset().top - windowH;
102		if ($(window).scrollTop() <= targetY) {
103			return;
104		}
105
106		$section.data('animated', true);
107		setTimeout(function(){
108			$section.find('.graph .inner').addClass('active');
109			$section.find('.count-up').each(function () {
110				animateCountUp($(this));
111			});
112		}, 300);
113	}
114		
115	$(window).scroll(function () {
116		$.each(graphSelectors, function (_, selector) {
117			animateGraphSection(selector);
118		});
119	});
120
121	$.each(graphSelectors, function (_, selector) {
122		animateGraphSection(selector);
123	});
124
125	if (typeof window.tabchange === 'function') {
126		var originalTabchange = window.tabchange;
127
128		window.tabchange = function(tab) {
129			resetGraphSections(graphSelectors);
130
131			originalTabchange.apply(this, arguments);
132		};
133	}
134});