Анимация ссылок в строке браузера с помощью JavaScript и эмодзи

Перевод материала программиста Мэтью Райфилда.

Полное видео — по ссылке

Эмодзи (как и другие символы Юникода) можно использовать в ссылках, но по какой-то причине этого никто не делает. Почему? Сайтам стыдно использовать такие эксцентричные вещи? Или их избегают из страха прогневить богов поисковой оптимизации?

Как бы там ни было, на диаграмме Венна в месте пересечения кругов «Это возможно» и «Никто этого не делает» находится мой энтузиазм. Поэтому я решил исследовать возможности графического оформления ссылок с помощью JavaScript.

Прежде всего необходимо убедиться, что вы используете стандарт кодирования Юникода UTF-8, иначе эмодзи в коде разместить без труда не удастся. Проверить это можно через заголовок HTTP или тег МЕТА. Скорее всего, у вас всё будет в порядке, но вы можете подробнее изучить этот вопрос.

Чтобы достичь желаемого результата — красующихся на ссылке эмодзи, — нам нужно их зациклить. И в общем-то, всё. Мы создаём цикл, запускаем код и радуемся. Итак, вот наш первый цикл — эмодзи луны с рожицей. Не просто так же создатели эту рожицу придумали?

var f = ['🌑', '🌒', '🌓', '🌔', '🌝', '🌖', '🌗', '🌘']; function loop() { location.hash = f[Math.floor((Date.now()/100)%f.length)]; setTimeout(loop, 50); } loop();

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

Например, часы

var f = ['🕐','🕑','🕒','🕓','🕔','🕕','🕖','🕗','🕘','🕙','🕚','🕛'];

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

var e = ['🏻', '🏼', '🏽', '🏾', '🏿']; function loop() { var s = '', i, m; for (i = 0; i < 10; i ++) { m = Math.floor(e.length * ((Math.sin((Date.now()/100) + i)+1)/2)); s += '👶' + e[m]; } location.hash = s; setTimeout(loop, 50); } loop();

Обозначив время и положение и в результате получив синусоидальную волну, мы выбираем нужный цвет. Это даёт нам красивый зацикленный эффект изменения цвета.

Давайте ещё раз взглянем на нашу луну и создадим некое подобие полосы загрузки.

Для анимации адресной строки необязательно использовать только эмодзи. Среди множества символов Юникода можно найти те, что подойдут для ваших целей.

Особый интерес представляют псевдографические символы:

Анимация ссылок в строке браузера с помощью JavaScript и эмодзи

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

function loop() { var i, n, s = ''; for (i = 0; i < 10; i++) { n = Math.floor(Math.sin((Date.now()/200) + (i/2)) * 4) + 4; s += String.fromCharCode(0x2581 + n); } window.location.hash = s; setTimeout(loop, 50); } loop();

Она мне так понравилась, что я увековечил её на сайте wavyurl.com.

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

function loop() { var s = '', p; p = Math.floor(((Math.sin(Date.now()/300)+1)/2) * 100); while (p >= 8) { s += '█'; p -= 8; } s += ['⠀','▏','▎','▍','▌','▋','▊','▉'][p]; location.hash = s; setTimeout(loop, 50); }

Индикатор выполнения — это уже практически полезная функция. Что и привело меня к следующему разделу.

В попытке уменьшить бесполезность нашего маленького эксперимента мне в голову пришла идея отобразить прогресс просмотра видео в адресной строке.

Я просто добавил функцию, которая привязывает созданную мной последовательность символов к функции обновления таймера видео! В адресной строке появляется индикатор прогресса просмотра вместе с продолжительностью.

var video; function formatTime(seconds) { var minutes = Math.floor(seconds/60), seconds = Math.floor(seconds - (minutes*60)); return ('0'+minutes).substr(-2) + ':' + ('0'+seconds).substr(-2); } function renderProgressBar() { var s = '', l = 15, p = Math.floor(video.currentTime / video.duration * (l-1)), i; for (i = 0; i < l; i ++) { if (i == p) s +='◯'; else if (i < p) s += '─'; else s += '┄'; } location.hash = '╭'+s+'╮'+formatTime(video.currentTime)+'╱'+formatTime(video.duration); } video = document.getElementById('video'); video.addEventListener('timeupdate', renderProgressBar);

Мне больше нравятся полоса и кружок, но их можно заменить на уже знакомые нам луны.

Ладно, возможно, этот указатель прогресса просмотра не так уж и полезен. Но я могу представить сценарий, в котором его можно использовать. Например, на YouTube есть функция привязки ссылки на видео к конкретному времени в видео. Было бы здорово иметь ещё и визуальное отображение на ссылке, нет?

Наверняка есть и более полезное применение этой «технологии», до которого я не додумался. Быть может, у вас получится?

Возможно, вас интересует, почему я использовал «location.hash =» вместо более нового и удобного HTML5 History API. Две проблемы: одна решаемая, вторая не очень. Обе вызывают трудности.

Первая проблема заключается в функции History API: она изменяет весь путь URL-адреса, а не только решётку. Поэтому при использовании History API и изменении адреса на «/🌑🌘🌗🌖🌕», он выглядит лучше, чем вместе с решёткой.

Но тогда я должен быть уверен в том, что сервер сможет ответить на «/🌑🌘🌗🌖🌕», иначе пользователь не сможет нормально обновить страницу или управлять изменённой ссылкой. Это сделать сложнее, чем просто использовать «location.hash =», который не требует никаких особых условий сервера.

Вторая проблема оказалась непредвиденной. Когда я проводил тесты, то в двух из трёх браузеров регулировалось количество запросов на History API. При быстром вводе символов для волны в адресной строке Chrome выдавал мне следующую ошибку:

Throttling history state changes to prevent the browser from hanging.

Safari даёт чуть больше информации:

SecurityError: Attempt to use history.pushState() more than 100 times per 30.000000 seconds

Если не превышать этот лимит, то всё в порядке. Но трёх кадров в секунду недостаточно для моих классных анимаций.

Firefox — хороший мальчик, ему всё равно, сколько раз и как быстро я жму на кнопку. Но из-за сложностей в двух браузерах и необходимости конфигурации сервера для исправления первой проблемы я готов смириться с маленьким значком решётки в адресной строке.

Пока да. Но у меня есть идеи для нескольких игр в адресной строке. И мы ещё даже не начали изучать Брайлевские символы.

Исходники, уродующие адресные строки в формате HTML, есть на моём сайте.

Мой Twitter и почтовая рассылка.

#html #эмодзи #браузеры

40 комментариев

Alexander Zhikh

05.09.2019

Как способ показать что это возможно - прикольно. Но надеюсь никто не додумается делать такое.

Ответить

Mr. Burns

Снежинки на новый год до сих пор делают.

Anton Smets

Я вот надеюсь, что никто из HR которые это увидят не догадается задать это на собеседовании.

Мехман Агаев

06.09.2019

Так же надеюсь , что такого не будет, но уверен что разработчики браузеров быстро прикроют эту фичу

Семен Смирнов

Миллениалы изобрели кастомный javascript в браузере?

Denis Novikov

Ящик пандоры открыт

Дмитрий Разин

Юзлесс если у вас spa на хешевом роутинге ну и на мобайле в целом. Вообще все это дрочево по поводу анимированного тайтла (аля Одноклассники) или анимированных фавиконок — полный колхоз.

Статья интересна только в ключе использования 1 апишки браузера. Очень не хочу увидеть что либо подобное на сайтах которые я посещаю.

Анимация ссылок в строке браузера с помощью JavaScript и эмодзи

Зацикливание

Использование прочих символов

Отображение времени видео в адресной строке

И ещё кое-что

Всё?