first commit

public/frontend/template/archiark/js/counter.js

@@ -0,0 +1,88 @@
+(function () {
+
+	'use trict';
+// How long you want the animation to take, in ms
+const animationDuration = 2000;
+// Calculate how long each ‘frame’ should last if we want to update the animation 60 times per second
+const frameDuration = 1000 / 60;
+// Use that to calculate how many frames we need to complete the animation
+const totalFrames = Math.round( animationDuration / frameDuration );
+// An ease-out function that slows the count as it progresses
+const easeOutQuad = t => t * ( 2 - t );
+
+
+const numberWithCommas = n => {
+	return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');	
+}
+
+// The animation function, which takes an Element
+const animateCountUp = el => {
+	let frame = 0;
+	const countTo = parseInt( el.innerHTML, 10 );
+	// Start the animation running 60 times per second
+	const counter = setInterval( () => {
+		frame++;
+		// Calculate our progress as a value between 0 and 1
+		// Pass that value to our easing function to get our
+		// progress on a curve
+		const progress = easeOutQuad( frame / totalFrames );
+		// Use the progress value to calculate the current count
+		const currentCount = Math.round( countTo * progress );
+
+		// If the current count has changed, update the element
+		if ( parseInt( el.innerHTML, 10 ) !== currentCount ) {
+			el.innerHTML = numberWithCommas(currentCount);
+		}
+
+		// If we’ve reached our last frame, stop the animation
+		if ( frame === totalFrames ) {
+			clearInterval( counter );
+		}
+	}, frameDuration );
+};
+
+// Run the animation on all elements with a class of ‘countup’
+const runAnimations = () => {
+	const countupEls = document.querySelectorAll( '.countup' );
+	countupEls.forEach( animateCountUp );
+};
+
+
+
+
+// In Viewed
+var elements;
+var windowHeight;
+
+function init() {
+	elements = document.querySelectorAll('.section-counter');
+	windowHeight = window.innerHeight;
+}
+
+function checkPosition() {
+	var i;
+	for (i = 0; i < elements.length; i++) {
+		var element = elements[i];
+		var positionFromTop = elements[i].getBoundingClientRect().top;
+		if (positionFromTop - windowHeight <= 0) {
+			if( !element.classList.contains('viewed') ) {
+				element.classList.add('viewed');
+				runAnimations();
+			} else {
+				if ( element.classList.contains('viewed') ) {
+
+				}
+			}
+
+		}
+	}
+}
+
+window.addEventListener('scroll', checkPosition);
+window.addEventListener('resize', init);
+
+init();
+checkPosition();
+
+
+})()