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 мая 2023 в 21:42
  • можно просто добавить анимацию, где будет меняться градиент с полностью белого на фиолетовый с белым 90\10 и вешать на какое то событие в js, только какое не ясно...
    – Maneken
    25 мая 2023 в 22:36

0

Ваш ответ

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

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