diff --git a/js/custom.js b/js/custom.js index 8025c62b..7ec8f650 100644 --- a/js/custom.js +++ b/js/custom.js @@ -12,4 +12,54 @@ function toggleAnswer(answerId, element) { indicator.innerHTML = '-'; } } -} \ No newline at end of file +} + +// Counter Animation of the home page +document.addEventListener('DOMContentLoaded', () => { + const counters = document.querySelectorAll('.count'); + + // Function to animate the counter + function animateCounter(counter) { + const target = +counter.getAttribute('data-target'); + const speed = 200; + + const updateCount = () => { + const current = +counter.innerText; + const increment = target / speed; + + if (current < target) { + counter.innerText = Math.ceil(current + increment); + setTimeout(updateCount, 10); // Repeat every 10ms + } else { + + if (target === 170) { + counter.innerText = `${target}`; + } else { + counter.innerText = `${target}+`; + } + + } + }; + + updateCount(); + } + + // Use IntersectionObserver to detect when the element comes into view + const observerOptions = { + root: null, + threshold: 0.3 + }; + + const observer = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + animateCounter(entry.target); // Start animation + observer.unobserve(entry.target); // Stop observing after animation starts + } + }); + }, observerOptions); + + counters.forEach(counter => { + observer.observe(counter); // Observe each counter + }); +}); \ No newline at end of file diff --git a/js/main.js b/js/main.js index 3d432637..94826841 100755 --- a/js/main.js +++ b/js/main.js @@ -122,53 +122,3 @@ $(document).ready(function(){ }); }; }); - -// Counter Animation of the home page -document.addEventListener('DOMContentLoaded', () => { - const counters = document.querySelectorAll('.count'); - - // Function to animate the counter - function animateCounter(counter) { - const target = +counter.getAttribute('data-target'); - const speed = 200; - - const updateCount = () => { - const current = +counter.innerText; - const increment = target / speed; - - if (current < target) { - counter.innerText = Math.ceil(current + increment); - setTimeout(updateCount, 10); // Repeat every 10ms - } else { - - if (target === 170) { - counter.innerText = `${target}`; - } else { - counter.innerText = `${target}+`; - } - - } - }; - - updateCount(); - } - - // Use IntersectionObserver to detect when the element comes into view - const observerOptions = { - root: null, - threshold: 0.3 - }; - - const observer = new IntersectionObserver((entries, observer) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - animateCounter(entry.target); // Start animation - observer.unobserve(entry.target); // Stop observing after animation starts - } - }); - }, observerOptions); - - counters.forEach(counter => { - observer.observe(counter); // Observe each counter - }); -});