Как сделать бесшовную текстуру из многострочного текста?

Question

[Testing Tester]

Есть стена текста:
Скриншот

Подскажите, пожалуйста, как можно ее правильно сшить для применения бесконечной горизонтальной анимации?

Comments

[Сергей delphinpro]

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

первая строка первая строка
вторая строка вторая строка

рандомно смещаем все строки вправо-влево
Вырезаем любой кусок картинки нужной ширины.
Вот вам и бесшовная текстура.

Причем здесь css/html/sass - непонятно.

[Testing Tester]

Сергей: ну просто не обязательно оформлять это изображением, можно было бы и кодом, но это наверное будет слишком заморочно.
Кажется понял принцип который ты описал, спасибо!

[Сергей delphinpro]

bobongida97: Можно и кодом. Всё то же самое, только вместо вырезания используем обрезку overflow:hidden
Для анимации клонируем блоки
Принцип можно подсмотреть в любой карусели с режимом loop.

[Testing Tester]

Сергей: продублируй 2 комментария своих как ответ, отмечу решением

[Денис Каракчиев]

Сергей: c точки зрения производительности, лучше gif, или css?

[Testing Tester]

Сергей: хотя нет, первый вариант все таки не могу понять что то
Можно попродробнее немного?
вот весь блок текста
Если продублировать каждую строку, и потом вырезать любой кусок, то текстура явно не получится

[Сергей delphinpro]

bobongida97: Пожалуй я поспешил с советом.
Тогда остается наверное кропотливая ручная работа по выравниванию символов в строках, чтобы повтор начинался точно за направляющей. После этого можно будет рандомно смещать и вырезать.
s.delphinpro.ru/20170418-020955.png

[Сергей delphinpro]

bobongida97: В принципе, если использовать моноширинный шрифт, достаточно будет подобрать межсимвольный интервал, и вбить в каждую строку одинаковое количество символов.

[Testing Tester]

Сергей: С направляющей не получится видимо, разная длина строк
1

Даже если выровнять по ней
2

[Сергей delphinpro]

bobongida97: я о том и говорю - нужно выровнять строки, как вариант - межсимвольным интервалом.

Answer 1

[lukoie]

Если столько текста - лучше эффектами текста с цсс, а не фотошопом(растром).
Если всё же хотите фотошопом и растром - нужно чтобы текст дублировался, так что придется дублировать строки. Это увеличит картинку. Если хотите одноцветным, формат пинг будет не много занимать, в принципе. Тогда уж лучше анимировать не большую картинку, а строками. Но опять же, это утяжелит весь код страницы.

Comments

[Testing Tester]

Посмотри комментарии пожалуйста. Дело в том, что строки разной длины

[lukoie]

bobongida97: такую штуку видели? codepen.io/bennettfeely/pen/lgybC
Или такую?
codepen.io/Zaku/pen/ALChE
Или такую?
codepen.io/natewiley/pen/xGyZXp
Подвигать строчки после такого - раз плюнуть.

Можно покурить вот эту статью:
www.hongkiat.com/blog/css3-animation-advanced-marquee
Вот тут много написано про движущийся текст: www.html.am/html-codes/marquees
Вот тут еще www.hongkiat.com/blog/css-marquee
Ну и вот тут: https://css-tricks.com/infinite-all-css-scrolling-... замените картинки текстом. Там будет не важно какой длины строки если они в свг(а не джейпеге) или обычным текстом.