Матвей Земсков

Заметки веб-мастера

Вторник, 19 января 2016 12:29

Анимация title в браузере

Оцените материал
(1 Голосовать)

Порой бывает необходимо реализовать анимацию в заголовке окна браузера или во вкладке. Как известно текст, который отображается там является содержимым HTML-элемента title, а анимация заключается мигании текста. Для создания эффекта анимации в title можно использовать скрипт под названием blinkTitle.js.

Порядок действий следующий:

  • Подключаем скрипт к странице сайта:

    HTML

    <script type="text/javascript" src="https://raw.githubusercontent.com/flouthoc/blinkTitle.js/master/index.js"></script>
    
  • У скрипта есть 2 режима: постоянное мигание текста и мигание в случае отсутствия фокуса на вкладке. В обоих случаях используется функция blinkTitle(). Только во втором случае при ее вызове, в функцию передается дополнительный параметр.

Переходим к примерам.

  • Постоянная анимация title:

    JavaScript

    blinkTitle("Head's Up","Notification",500); 
  • Анимация title при отсутствии фокуса на вкладке:

    JavaScript

    blinkTitle("Head's Up","Notification",500,true);

Чтобы остановить анимацию в любом случае, используйте функцию blinkTitleStop();

Ну вот, собственно, и все. Кстати, этот скрипт также доступен для скачивания.

Прочитано 8407 раз
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

Наверх