Как заставить мигать текст в HTML

Мигающий текст никогда не был стандартной функцией HTML, и потому по-разному реализуется в каждом браузере. Наиболее близким вариантом, который полагается только на HTML, является тег marquee, но даже он не работает в Google Chrome. JavaScript — более надежный метод, позволяющий скопировать и вставить код прямо в HTML-документ.

Метод 1

Метод 1 из 2:

С помощью тега Marquee

Загрузить PDF

1
Пользуйтесь им только для личных проектов. Тег marquee давно устарел, и разработчикам настоятельно рекомендуется его избегать. Он по-разному отображается в браузерах, а после очередного обновления текст и вовсе может перестать мигать.^{[1]XИсточник информации}^{[2]XИсточник информации} Если вы разрабатываете сайт на профессиональной основе, то лучше положитесь на Javascript.
- Google Chrome не поддерживает атрибут scrollamount, на который опирается этот метод.^{[3]XИсточник информации} По этой причине текст будет не мигать, а перемещаться по странице.
2
Окружите мигающий текст тегами marquee. Откройте HTML-документ в простом текстовом редакторе. Введите <marquee> перед текстом, который должен мигать. Вставьте </marquee> в конце текста.
- Не забудьте сначала наполнить HTML-страницу тегами <html>, <head> и <body>.
3
Укажите ширину текста. Добавьте к открывающему тегу <marquee width="300">. Это никак не изменит размер шрифта. Есть две причины, по которым вам может потребоваться изменить это значение на другое:
- Если текст выйдет за границы, то он будет перемещаться, а не мигать. Увеличьте ширину текста, чтобы этого избежать.
- В Chrome текст будет перемещаться на расстояние, определяемое указанной шириной.
4
Продублируйте значение ширины для атрибута scrollamount. Внутри этого же тега добавьте scrollamount="300" (то же значение, что и у ширины). Тег marquee заставит текст перемещаться по всей странице. Но если скопировать значение ширины в атрибут scrollamount, то текст будет перемещаться на свою изначальную позицию, вызывая тем самым эффект мерцания.
- Ваш текст должен выглядеть примерно так:
  <marquee width="300" scrollamount="300">Мигающий текст.</marquee>.
5
Измените задержку прокрутки. Откройте HTML-файл в браузере, чтобы увидеть результат. Если текст мигает слишком быстро или слишком медленно, измените скорость с помощью атрибута scrolldelay="500". По умолчанию задержка имеет значение 85 миллисекунд.^{[4]XИсточник информации} Увеличьте это число, чтобы замедлить мерцание, или уменьшите его, чтобы ускорить.
- Теперь строка должна выглядеть следующим образом:
  <marquee width="300" scrollamount="300" scrolldelay="500">Мигающий текст.</marquee>
6
Ограничьте количество бликов (необязательно). Многих пользователей раздражает мигающий текст. Если вы уже привлекли внимание пользователя, остановите мерцание, добавив атрибут loop="7". Теперь текст будет мигать семь раз, а затем исчезнет. Вместо семи можно использовать любое другое число.
- Финальный вид кода:
  <marquee width="300" scrollamount="300" scrolldelay="500" loop="7">Мигающий текст.</marquee>
Реклама

Метод 2

Метод 2 из 2:

С помощью JavaScript

Загрузить PDF

1
Вставьте скрипт мерцания в заголовок HTML-документа. Вставьте следующий код JavaScript между тегами <head> и </head> HTML-документа:^{[5]XИсточник информации}
- function blinktext() {
    var f = document.getElementById('announcement');
    setInterval(function() {
      f.style.visibility = (f.style.visibility == 'hidden' ? '' : 'hidden');
    }, 1000);
  }
Приведенный выше код определяет функцию и называет ее «blinktext» (мигающий текст). Чтобы использовать эту функцию в HTML, измените тег <body> на <body >.
3
Определите мигающий текст как объявление. Тогда скрипт затронет только элементы с идентификатором «announcement» (объявление). Поместите мигающий текст в любой элемент и присвойте ему этот идентификатор. Например, введите <p id="announcement">Мигающий текст.</p> или <div id="announcement">Мигающий текст.</div>.
- Назовите его как угодно. Главное, чтобы в скрипте и идентификаторе стояло одно и то же слово.
4
Подкорректируйте скрипт. Число «1000» в скрипте отвечает за задержку между миганиями. Поскольку значение указывается в микросекундах, «1000» заставляет текст мигать раз в секунду.^{[6]XИсточник информации} Уменьшите это число, чтобы ускорить мигание, или увеличьте его, чтобы замедлить.
- Сама задержка, скорее всего, не будет в точности соответствовать этому значению. Вероятно, она будет немного короче, но может занять больше времени, если браузер будет перегружен запросами.
Реклама

Советы

Для изменения внешнего вида выделенного текста используйте атрибут style. Попробуйте добавить style="border:solid".
Помимо ширины к тегу marquee также можно добавить атрибут высоты, но многие браузеры его игнорируют.^{[7]XИсточник информации} Возможно, вы заметите разницу, если окружите текст рамкой.
Чтобы заставить текст мигать, можно использовать анимацию CSS. Это довольно сложный процесс и не рекомендуется для начинающих программистов в CSS. При этом вам понадобится связанный CSS-документ, поскольку Firefox не поддерживает CSS-анимации со встроенным CSS.^{[8]XИсточник информации}

Предупреждения

Не используйте тег <blink> или оформление текста с использованием таблицы стилей CSS, так как их поддерживают очень мало современных браузеров.^{[9]XИсточник информации}^{[10]XИсточник информации}