Анимация ссылок в строке браузера с помощью JavaScript и эмодзи Статьи редакции
Перевод материала программиста Мэтью Райфилда.
Эмодзи (как и другие символы Юникода) можно использовать в ссылках, но по какой-то причине этого никто не делает. Почему? Сайтам стыдно использовать такие эксцентричные вещи? Или их избегают из страха прогневить богов поисковой оптимизации?
Как бы там ни было, на диаграмме Венна в месте пересечения кругов «Это возможно» и «Никто этого не делает» находится мой энтузиазм. Поэтому я решил исследовать возможности графического оформления ссылок с помощью JavaScript.
Зацикливание
Прежде всего необходимо убедиться, что вы используете стандарт кодирования Юникода UTF-8, иначе эмодзи в коде разместить без труда не удастся. Проверить это можно через заголовок HTTP или тег МЕТА. Скорее всего, у вас всё будет в порядке, но вы можете подробнее изучить этот вопрос.
Чтобы достичь желаемого результата — красующихся на ссылке эмодзи, — нам нужно их зациклить. И в общем-то, всё. Мы создаём цикл, запускаем код и радуемся. Итак, вот наш первый цикл — эмодзи луны с рожицей. Не просто так же создатели эту рожицу придумали?
Вместо кружащейся луны можно использовать любую другую последовательность эмодзи.
Очень простой пример, даже слишком. Давайте усложним цикл, превратив его в строчку из нескольких эмодзи! В этот раз мы используем эмодзи с модификациями, чтобы создать меняющих цвет кожи детей.
Обозначив время и положение и в результате получив синусоидальную волну, мы выбираем нужный цвет. Это даёт нам красивый зацикленный эффект изменения цвета.
Давайте ещё раз взглянем на нашу луну и создадим некое подобие полосы загрузки.
Использование прочих символов
Для анимации адресной строки необязательно использовать только эмодзи. Среди множества символов Юникода можно найти те, что подойдут для ваших целей.
Особый интерес представляют псевдографические символы:
В основном они используются для графического оформления программ, но и на нашей одной строке им есть где развернуться. Например, можно создать последовательность из нескольких блоков разной высоты и получить маленькую волну.
Она мне так понравилась, что я увековечил её на сайте wavyurl.com.
С помощью символов разной ширины можно сделать горизонтальную анимацию, похожую на индикатор выполнения.
Индикатор выполнения — это уже практически полезная функция. Что и привело меня к следующему разделу.
Отображение времени видео в адресной строке
В попытке уменьшить бесполезность нашего маленького эксперимента мне в голову пришла идея отобразить прогресс просмотра видео в адресной строке.
Я просто добавил функцию, которая привязывает созданную мной последовательность символов к функции обновления таймера видео! В адресной строке появляется индикатор прогресса просмотра вместе с продолжительностью.
Мне больше нравятся полоса и кружок, но их можно заменить на уже знакомые нам луны.
Ладно, возможно, этот указатель прогресса просмотра не так уж и полезен. Но я могу представить сценарий, в котором его можно использовать. Например, на YouTube есть функция привязки ссылки на видео к конкретному времени в видео. Было бы здорово иметь ещё и визуальное отображение на ссылке, нет?
Наверняка есть и более полезное применение этой «технологии», до которого я не додумался. Быть может, у вас получится?
И ещё кое-что
Возможно, вас интересует, почему я использовал «location.hash =» вместо более нового и удобного HTML5 History API. Две проблемы: одна решаемая, вторая не очень. Обе вызывают трудности.
Первая проблема заключается в функции History API: она изменяет весь путь URL-адреса, а не только решётку. Поэтому при использовании History API и изменении адреса на «/🌑🌘🌗🌖🌕», он выглядит лучше, чем вместе с решёткой.
Но тогда я должен быть уверен в том, что сервер сможет ответить на «/🌑🌘🌗🌖🌕», иначе пользователь не сможет нормально обновить страницу или управлять изменённой ссылкой. Это сделать сложнее, чем просто использовать «location.hash =», который не требует никаких особых условий сервера.
Вторая проблема оказалась непредвиденной. Когда я проводил тесты, то в двух из трёх браузеров регулировалось количество запросов на History API. При быстром вводе символов для волны в адресной строке Chrome выдавал мне следующую ошибку:
Safari даёт чуть больше информации:
Если не превышать этот лимит, то всё в порядке. Но трёх кадров в секунду недостаточно для моих классных анимаций.
Firefox — хороший мальчик, ему всё равно, сколько раз и как быстро я жму на кнопку. Но из-за сложностей в двух браузерах и необходимости конфигурации сервера для исправления первой проблемы я готов смириться с маленьким значком решётки в адресной строке.
Всё?
Пока да. Но у меня есть идеи для нескольких игр в адресной строке. И мы ещё даже не начали изучать Брайлевские символы.
Исходники, уродующие адресные строки в формате HTML, есть на моём сайте.
Мой Twitter и почтовая рассылка.
Как способ показать что это возможно - прикольно. Но надеюсь никто не додумается делать такое.
Снежинки на новый год до сих пор делают.
Я вот надеюсь, что никто из HR которые это увидят не догадается задать это на собеседовании.
Взял на заметку😊
Так же надеюсь , что такого не будет, но уверен что разработчики браузеров быстро прикроют эту фичу
Миллениалы изобрели кастомный javascript в браузере?
Ящик пандоры открыт
Юзлесс если у вас spa на хешевом роутинге ну и на мобайле в целом. Вообще все это дрочево по поводу анимированного тайтла (аля Одноклассники) или анимированных фавиконок — полный колхоз.
Статья интересна только в ключе использования 1 апишки браузера. Очень не хочу увидеть что либо подобное на сайтах которые я посещаю.
Вот такие урлы!
Enlarge your url!
Надеюсь без регистрации и смс?
Ура! Снова 2003-й! Осталось изобрести анимированные аватарки.
Жаль floppy disk из моды вышел. Можно было музычку наложить, чтобы флопик подзуживал в такт анимашки)
var
Настолько тупо, что гениально
Вот так с помощью нехитрых приспособлений...
С каких пор фронтендщики стали программистами?
Фронтенд в IT это как гуманитарии. Люди, далёкие от программирования. Из дело дизайн и вёрстка. Иногда связь с бэкендом, в котором они ничего не понимают
Фронт уже отжал больше половины логики, вот и бесишься. Ваше дело на бэке только принеси/подай.
Вот и встретились, один думает, что бэк это принеси/подай, другой что фронтендеры не программисты
Не я это дерьмо начал, не мне и заканчивать.
Ты даже понятия не имеешь что такое бэкенд
Не холивара ради, а интереса для - а кто такой "программист" по вашему?
Скажем, я сделал кривое апи для прекрасно написанного SPA - я программист? Если нет, то что нужно сделать, чтобы получить этот статус?
Ты программист, да. Но твой уровень надо проверить на конкретных задачах .
Судя по вашему пренебрежению вы до сих пор пишете на перфокартах? Часто всплывает ненависть к фронтендерам и я не понимаю откуда берется желание, обесценивая чью-то работу, приблизить к элитарности свою профессию. Рынок порешал и им платят много из-за востребованности, да и без фронтендеров апишечки не будут нужны.
Рост популярности BaaS решений не даёт им спокойно спать.
Так ты же ошибаешься
Комментарий недоступен
Ок, можешь привыкать к этому заранее закрыв этот сайт
вам в бекенд надо - там кривые языки если не умирают (perl), то выходят из моды (php, java)
он твоих внуков переживет )
Это самый прекрасный язык. Ты просто знаешь его по мемасам или никогда не изучал.
Вашьі анимации засоряют history браузера. Пользовательне сможет нажать кнопку 'Назад' в браузере.
Сможет, кто ж ему помешает. Так можно прогресс назад отмотать.
Есть такая штука как location.replace/history.replaceState. Так что нет, не засоряют
О, статья от недопрогораммиста родом из 2000-х или 90-х, что одно и то же.
"Прежде всего необходимо убедиться, что вы используете стандарт кодирования Юникода UTF-8, иначе эмодзи в коде разместить без труда не удастся. "Это самое начало и именно в этом проблема.
Не у всех эта кодировка стоит.
Чувак не понимает фундаментальных вещей в программировании. Но ему простительно, он не программист, а фронтендщик
Если у меня браузер будет что-то подобное показывать-заблокирую жава скрипт нафиг
И открываться будут только сайты из 2005 года
Комментарий недоступен
Комментарий недоступен