0

Здравствуйте, не получается найти каким способом на некоторых сайтах осуществляется ротация цифр. Например: "У нас 9 857 компаний" и это число при появлении на экране изменяется от 1 до необходимого числа. Можно ли это сделать на чистом CSS?

2
  • 1
    codepen.io/jakealbaugh/pen/ImEtj?editors=1100 , ищите "css counter" примеров достаточно, просто настроить под себя!
    – SVE
    17 ноя 2016 в 11:23
  • Css не умеет генерировать контент. Менять цифры анимацией вы можете — просто. Однако, цифры надо сгенерировать. Не думаю, что вы пойдете на это, поэтому необходимо использовать JS-изменение контента.
    – higimo
    17 ноя 2016 в 11:24

1 ответ 1

1

Нет, на css нельзя, это делается на JS, на Jquery можно примерно так сделать:

$('.counter').each(function () {
    $(this).prop('Counter', 0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="counter">1000</div>
<div class="counter">700</div>
<div class="counter">1500</div>

3
  • Я правильно понимаю,что этот кусок можно вставить прямо в HTML код?
    – Alla
    17 ноя 2016 в 12:00
  • Можно, только между тегами <script></script> 17 ноя 2016 в 12:02
  • да, но у меня почему-то не срабатывает
    – Alla
    17 ноя 2016 в 12:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.