Бегущая строка с прыгающими буквами на JS (canvas)
05.10.2013 20:57
0Вот переписал на JS много лет спустя :) Ностальгия замучала :)
Строка бежит по закону синуса + случайном образом у нее подпрыгивают буквы
Демо
Грубо, работает примерно так:
- Есть смещение в пикселях позиции относительно начала строки, оно все время увеличивается и при достижении максимума снова начинается с начала - это собственно скроллинг.
- Есть таблица с набором строк, где хранится номер символа и его смещение по вертикали. Спецальная подпрограмма занимается случайной генерацией этих позиций, производит их обсчет и при достижении конца анимации "подпрыгивания" уничтожает данную строку - это "подпрыгивания".
- Есть основная процедура, которая используя смещение, а так-же ширину символов в строке вычисляет с какого элемента начинать отрисовывать строку по горизонтали и вогласно таблице "подпрыгиваний" по вертикали, отрисовывает эту бегущую строку, меняя текущую вычисленную высоту согласно закону sin от текущего смещения скроллинга
Как? Вы ничего не поняли? Тогда добро пожаловать в исходники :-)
Для отрисовки используется библиотека canvas.js
05.10.2013, Protocoder