Как сделать плавную горизонтальную заливку текста?

Question

[ravlex]

Мне нужно сделать подобную заливку текста, но я не знаю, как это можно реализовать ?
https://www.werkstatt.fr/project/citroen-origins (начиная со 2 экрана), ниже анимацией показал.

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

https://i.stack.imgur.com/Q5jAc.gif

Comments

[cssfish]

так... берете коллекцию этих ... скажем, mark, и с интервалом в несколько ms добавляете им класс с анимацией... и все это от прокрутки стартует
либо (более мутороно) каждому анимацию со своей задержкой...

Answer 1

[Николай Чуприк]

Я бы положил друг на друга два одинаковых текста разного цвета, один вначале видимый, другой — нет. А потом анимацией открывал бы второй (верхний) текст иного цвета. Создавалось бы впечатление цветового перехода.

https://codepen.io/anon/pen/VzXPjN

Comments

[ravlex]

Да, это работает, но не совсем так как нужно. Мне нужно чтобы заливка была слева направо и построчно...

[Николай Чуприк]

Ну общий принцип такой. А уж анимацию делайте, какую хотите. И тогда уж лучше на CSS.

https://codepen.io/anon/pen/wqmejg

[ravlex]

Николай Чуприк: Всё равно не совсем то. Нужна именно построчная анимация... Сейчас же она просто по диагонали заливается..

[Николай Чуприк]

Получите, распишитесь:

https://codepen.io/anon/pen/vJjdXW

Если не нужен reset, то удалите эту функцию, а вначале напишите всего лишь обработчик для прокрутки:
$(window).scroll(move_symbols);