TimGol30 28.02.2023 23:18

Как добавить анимированные цифры для отображения статистики на WordPress-сайте?

Здравствуйте! Я прошу помощи в добавлении анимированных цифр для отображения статистики на моем WordPress-сайте. Я пробовал различные способы, но ни один из них не дал желаемого результата.

У меня есть счетчик, который должен показывать количество пользователей, зарегистрировавшихся на сайте. Я хочу, чтобы число появлялось с эффектом анимации, например, медленно увеличивалось с нуля до конечного значения.

Вот пример кода, который я использовал:


<?php
$registered_users = get_registered_users(); // Функция, которая возвращает количество зарегистрированных пользователей
echo '<span id="counter">'.$registered_users.'</span>';
?>

Я попробовал использовать CSS анимацию, но она не работает для этого элемента span:


#counter {
  animation: counting 2s;
}

@keyframes counting {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Я также пробовал использовать jQuery, но у меня не получилось достичь нужного эффекта:


jQuery(document).ready(function($) {
  var counter = 0;
  var final_count = ;
  var step = final_count / 100;
  
  function updateCounter() {
    counter += step;
    $('#counter').text(counter.toFixed(0));
    
    if (counter < final_count) {
      requestAnimationFrame(updateCounter);
    }
  }
  
  updateCounter();
});

Я буду очень признателен за помощь в решении этой проблемы. Благодарю заранее!

Ответы:

valeriya32Immigrant 28.02.2023 23:32

Я понимаю, что ты хочешь добавить анимированные цифры для отображения статистики на своем WordPress-сайте. Вот пример кода, который поможет тебе достичь желаемого эффекта.

Для начала, измени код PHP следующим образом:


<?php
$registered_users = get_registered_users(); // Функция, которая возвращает количество зарегистрированных пользователей
echo '<span id="counter">0</span>'; // Изменяем начальное значение счетчика на 0
echo '<span id="final_count">'.$registered_users.'</span>'; // Добавляем элемент для хранения конечного значения
?>

Теперь мы создали элемент `#final_count`, который будет хранить конечное значение счетчика.

Вот обновленный CSS для анимации:


#counter {
  opacity: 0;
  transform: translateY(-50px);
  animation: counting 2s forwards; /*Добавили forwards, чтобы оставить последний фрейм анимации*/
}

@keyframes counting {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Теперь, посмотрите на обновленный JavaScript-код:


jQuery(document).ready(function($) {
  var counter = 0;
  var final_count = parseInt($('#final_count').text()); // Получаем конечное значение счетчика
  
  function updateCounter() {
    counter += 1;
    $('#counter').text(counter.toFixed(0));
    
    if (counter < final_count) {
      requestAnimationFrame(updateCounter);
    }
  }
  
  requestAnimationFrame(updateCounter); // Запускаем анимацию счетчика
});

Теперь у нас есть правильная связь между PHP, CSS и JavaScript кодами. Счетчик будет постепенно увеличиваться с 0 до конечного значения, а CSS-анимация будет применяться к элементу `#counter`.

Надеюсь, это поможет тебе решить проблему! Если у тебя возникнут еще вопросы, не стесняйся задавать.

Добавить ответ