Как сделать интересную анимацию прелоадера?

Question

[Wasya UK]

Пытаюсь сделать анимацию как на видео, но уж больно сложный вариант решения у меня получился. С таймингами трабл. Может есть более универсальный способ реализации. В данном вопросе не очень прошарен, но буду рад любой помощи) Вот мои наработки...

Заранее спасибо.

Answer 1

[Ivan Bogachev]

Тот самый момент, когда небольшое количество JS сильно упрощает дело. Посмотрите вот этот пример.

Comments

[Wasya UK]

это anime.js ? Похоже, но хотелось бы, чтоб текст пересекал невидимую черту и становился белым. Но все равно спасибо

[Ivan Bogachev]

Похоже, но хотелось бы, чтоб текст пересекал невидимую черту и становился белым.

Wasya UK, Важно понимать, что за вас вашу работу никто делать не будет за просто так. Этот пример - наводка в нужную сторону. Если у вас сложности с конкретной частью анимации (переход через невидимую линию) - можно сразу и спрашивать про нее, а не про все целиком.

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