0

Есть блок, который на странице выглядит так:

Блок, background которого нужно заполнить

Html выглядит так:

<div class="relative rounded-full rating_border overflow-hidden h-9 bg-grey-100 mb-3">
<div class="bg-primary absolute inset-0 text-white z-10 whitespace-nowrap overflow-hidden text-lg flex items-center transition-all" style="width: 90%; transition-duration: 300ms; transition-delay: 0ms;">
<span class="pl-3 absolute px-3 py-1 inset-0">Value - <span>90</span>%</span>
</div>
<span class="text-primary text-lg absolute px-3 py-1 inset-0">Value - <span>90</span>%</span>
</div>

Хотелось бы, чтобы при прокрутке страницы, когда блок попадал в видимую часть экрана, div за указанное время заполнялся бы на указанное значение, в данном случае на 90%. Подскажите пожалуйста как это сделать. Можно использовать JS.

И второй вопрос, подскажите каким плагином делается, чтобы когда элемент попадал в видимую часть экрана числа автоматически прокручивались от 0 до 90

2
  • Ну смотрите, если вы хотите плавное заполнение слева на право, тогда у вас вся CSS структура неправильна, т.к. тут нужно работать с background-image и background-position (И другими по типу ...-repeat, ...-size и т.п.), можно конечно сделать отдельный задний фон и вертеть его с помощью left, но такой подход неправильный.
    – ΝNL993
    25 мая в 21:42
  • можно просто добавить анимацию, где будет меняться градиент с полностью белого на фиолетовый с белым 90\10 и вешать на какое то событие в js, только какое не ясно...
    – Maneken
    25 мая в 22:36

0

Ваш ответ

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

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