Posts Tagged: бегущая строка

Бегущая строка (табло) на JavaScript

Бывает, что на работе выдаётся свободное время. Особенно приятно это, когда под самый Новый Год, в последние деньки, работа, после самого активного в году времени вдруг резко заканчивается. Не перестаю не замечать за собой, что кодить для себя практически всегда интересней, чем что-то по работе. Наверно потому что по своей инициативе выбираешь как раз то, что интересно больше всего.

Как-то раз, сидя в вагоне «Русича» и глядя на табло, я подумал, а как интересно кодят его сообщения и как вообще оно работает в плане отображения текста в виде точек и, самое главное, его анимации.

Придя домой, я решил загуглить этот вопрос и нашёл несколько примеров, как вдруг мне в голову пришла идея посмотреть, не делал ли кто-нибудь это на скрипте. Из одной из найденных страничек, я взял основу для своей реализации этой замечательной штуковины, которую в свою очередь постарался сделать максимально аккуратно и современно. Жаль, что тогда я не сохранил ссылку, а теперь я не смог найти её, обязательно добавлю, если найду.

Было это кстати ещё давно, уже почти год назад, сейчас я бы возможно оформил код по-другому, однако всё равно скрипт вышел вполне рабочим и достаточно интересным.

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

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

Доведя работу до точки, а случилось это только днём 31 декабря, я отправился на празднование Нового Года к другу. Новый Год мы встретили чудесно в замечательной компании, а на следующий день я отправил ссылку на страничку близким друзьям.

Смешно, но иногда спешишь и выполняя работу, которую сам выбрал как развлечение

Страничка, zip, GitHub.