<?php
// Define the target values for each counter
$target1 = 200;
$target2 = 250;
$target3 = 150;
// Define the durations for each count-up animation
$duration1 = 5000; // 5 seconds
$duration2 = 5000; // 5 seconds
$duration3 = 3000; // 3 seconds
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simultaneous Count Up Example</title>
<style>
.count-up {
font-size: 50px;
font-weight: bold;
text-align: center;
margin-top: 20px;
display: inline-block;
width: 100px;
}
.count-up-container {
text-align: center;
margin-top: 20%;
}
</style>
</head>
<body>
<div class="count-up-container">
<div class="count-up" id="countUp1">0</div>
<div class="count-up" id="countUp2">0</div>
<div class="count-up" id="countUp3">0</div>
</div>
<script>
// Function to perform the count-up for each target value
function countUp(target, duration, elementId) {
const element = document.getElementById(elementId);
let start = 0;
const step = target / (duration / 50); // Calculate step size for every 50ms
const interval = setInterval(() => {
start += step;
if (start >= target) {
start = target;
clearInterval(interval);
}
element.textContent = Math.floor(start); // Update the element with the current value
}, 50);
}
// Start the count-up for each value simultaneously using PHP-generated values
countUp(<?php echo $target1; ?>, <?php echo $duration1; ?>, 'countUp1'); // Count up to 200 in 5 seconds
countUp(<?php echo $target2; ?>, <?php echo $duration2; ?>, 'countUp2'); // Count up to 250 in 5 seconds
countUp(<?php echo $target3; ?>, <?php echo $duration3; ?>, 'countUp3'); // Count up to 150 in 3 seconds
</script>
</body>
</html>