Як змусити блимати текст в html: 10 кроків

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

кроки

Метод 1 з 2:

За допомогою тега Marquee

1. Користуйтеся ним тільки для особистих проектів. Тег marquee давно застарів, і розробникам настійно рекомендується його уникати. Він по-різному відображається в браузерах, а після чергового оновлення текст і зовсім може перестати блимати. Якщо ви розробляєте сайт на професійній основі, то краще покладайтеся на jаvascript.

Google Chrome не підтримує атрибут scrollamount, на який спирається цей метод. З цієї причини текст буде не блимати, а переміщатися по сторінці.

Зображення з назвою Make Text Blink in HTML Step 2

2. Оточіть миготливий текст тегами marquee. Відкрийте HTML-документ в простому текстовому редакторі. Введіть перед текстом, який повинен блимати. вставте в кінці тексту.

Не забудьте спочатку наповнити HTML-сторінку тегами , і .

Зображення з назвою Make Text Blink in HTML Step 3

3. Вкажіть ширину тексту. Додайте до відкриває тегу width ="300">. Це ніяк не змінить розмір шрифту. Є дві причини, за якими вам може знадобитися змінити це значення на інше:

Якщо текст вийде за межі, то він буде переміщатися, а не блимати. Збільште ширину тексту, щоб цього уникнути.

У Chrome текст буде переміщатися на відстань, що визначається зазначеної шириною.

Зображення з назвою Make Text Blink in HTML Step 4

4. Продублюйте значення ширини для атрибута scrollamount. Усередині цього ж тега додайте scrollamount ="300" (Те ж значення, що і у ширини). Тег marquee змусить текст переміщатися по всій сторінці. Але якщо скопіювати значення ширини в атрибут scrollamount, то текст буде переміщатися на свою початкову позицію, викликаючи тим самим ефект мерехтіння.

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

Зображення з назвою Make Text Blink in HTML Step 5

5. Змініть затримку прокрутки. Відкрийте HTML-файл в браузері, щоб побачити результат. Якщо текст блимає занадто швидко або занадто повільно, змініть швидкість за допомогою атрибута scrolldelay ="500". За замовчуванням затримка має значення 85 мілісекунд.Збільште це число, щоб уповільнити мерехтіння, або зменшіть його, щоб прискорити.

Тепер рядок повинен виглядати наступним чином:
миготливий текст.

Зображення з назвою Make Text Blink in HTML Step 6

6. Обмежте кількість відблисків (необов`язково). Багатьох користувачів дратує миготливий текст. Якщо ви вже привернули увагу користувача, зупиніть мерехтіння, додавши атрибут loop ="7". Тепер текст буде блимати сім разів, а потім зникне. Замість семи можна використовувати будь-яке інше число.

Фінальний вид коду:
миготливий текст.

Метод 2 з 2:

За допомогою jаvascript

1. Вставте скрипт мерехтіння в заголовок HTML-документа. Вставте цей код jаvascript між тегами і HTML-документа:

function blinktext () {
var f = document.getElementById ( `announcement`)-
setInterval (function () {
f.style.visibility = (f.style.visibility == `hidden` ? ``: `Hidden`)-
} 1000)-
}

Зображення з назвою Make Text Blink in HTML Step 8

2. Вставте команду для завантаження скрипта. Наведений вище код визначає функцію і називає її «blinktext» (миготливий текст). Щоб скористатися цією функцією в HTML, змініть тег на .

Зображення з назвою Make Text Blink in HTML Step 9

3. Визначте миготливий текст як оголошення. Тоді скрипт торкнеться тільки елементи з ідентифікатором «announcement» (оголошення). Помістіть миготливий текст в будь-який елемент і надайте йому цей ідентифікатор. Наприклад, введіть

миготливий текст.

або

миготливий текст.

Назвіть його як завгодно. Головне, щоб в скрипті і ідентифікатор стояло одне і те ж слово.

Зображення з назвою Make Text Blink in HTML Step 10

4. Підкоригує скрипт. Число «1000» в скрипті відповідає за затримку між миготінням. Оскільки значення вказується в мікросекундах, «1000» змушує текст блимати раз в секунду. Зменшіть це число, щоб прискорити миготіння, або збільште його, щоб уповільнити.

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

Поради

Для зміни зовнішнього вигляду виділеного тексту використовуйте атрибут style. Спробуйте додати style ="border: solid".
Крім ширини до тегу marquee також можна додати атрибут висоти, але багато браузери його ігнорують. Можливо, ви помітите різницю, якщо оточіть текст рамкою.
Щоб змусити текст блимати, можна використовувати анімацію CSS. Це досить складний процес і не рекомендується для початківців програмістів в CSS. При цьому вам знадобиться пов`язаний CSS-документ, оскільки Firefox не підтримує CSS-анімації з вбудованим CSS.

попередження

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