Как сделать бегущую строку и бегущее изображение в дневнике

Понедельник, 26 Апреля 2021 г. 05:28 + в цитатник

Veta-z все записи автора

Цитата сообщения Шадрина_Галина

Прочитать целиком В свой цитатник или сообщество!

<
Часто при написании своего сайта, или его управлением, возникает потребность установить на сайт бегущую строку. Такой элемент дизайна привлекает внимание посетителей на нужные разделы сайта, а также может выделить определенную информацию на передний план, что даст возможность первоочередного просмотра нужной темы.

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

Создать бегущую строку на сайте – проще простого.

Для создания бегущей строки используют вот этот специальный тег "marquee", который и поможет вам сделать бегущую строку. Изначально он работал только в браузере Internet Explorer, но теперь почти во всех браузерах.( Не проверяла только в Google Chrome), в остальных работает нормально.

1. СТАНДАРТНАЯ ЗАПИСЬ БЕГУЩЕЙ СТРОКИ такая - :

Вставьте заголовок, приветствие, объявление, между этими тегами (ВМЕСТО МОИХ СЛОВ "БЕГУЩИЙ ТЕКСТ"), и вы получите бегущую строку. Будет это выглядеть ВОТ ТАК.

ДЕЛАЕМ БЕГУЩУЮ СТРОКУ

Бегущей строкой может быть не только текст, но и картинка, и ссылка на какой то сайт. Может быть и любой текст, созданный вами на сайтах, создающих красивые надписи. Как например "горящий текст", в предыдущем посте.

Текст можно форматировать так же, как и просто в посте. Например сделаем его большим, жирным, цветным, курсивом и прочее.

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

Наиболее распространенные я вам попытаюсь показать.

2. Ширину и высоту бегущей строки можно задать определенными параметрами, то есть поставить ширину строки и ее высоту. Теперь формула будет выглядеть вот такая.

Где width=" " - ширина блока для строки
height=" " - высота блока для строки

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

3. МЕНЯЕМ ФОН БЕГУЩЕЙ СТРОКИ.
Фон бегущей строчки можно задать любой, какой вам нужен. Вот эта формула. Размеры строки можно не устанавливать. В первой формуле я их поставила, во второй нет.

где bgcolor=" " - атрибут устаналивающий параметр цвета фона

Выглядит это вот так

меняем фон СТРОКИ

меняем фон СТРОКИ, без указания ширины и длины

4. ДВИЖЕНИЕ СЛЕВА НАПРАВО.

Поскольку по умолчанию строчка движется, справа на лево, то что бы сделать наоборот, применяем вот эту формулу.

Где left - движение справа налево (по умолчанию)
right - движение слева направо

Выглядеть это будет ВОТ ТАК
ДВИЖЕНИЕ СЛЕВА НАПРАВО.

5. ПОСТОЯННОЕ ДВИЖЕНИЕ В ОБЕ СТОРОНЫ.
Можно задать движение строчки постоянно, то есть она будет двигаться попеременно в обе стороны.. Вот эта формула.

где alternate - возвратно-поступательное движение

Выглядеть это будет ВОТ ТАК
ПОСТОЯННОЕ ДВИЖЕНИЕ В ОБЕ СТОРОНЫ

6. ДВИЖЕНИЕ СНИЗУ ВВЕРХ.
Строчка, или изображение могут двигатся не только в разные стороны, но и снизу - вверх. Здесь лучше поставить ограничение строчки,(особенно высоту) или картинки, иначе она будет бегать по всей странице, и займет очень много места. Вот эта формула.

Где up - движение снизу верх

Выглядеть это будет ВОТ ТАК

ДВИЖЕНИЕ СТРОЧКИ ИЛИ КАРТИНКИ СНИЗУ ВВЕРХ

7. ДВИЖЕНИЕ СВЕРХУ ВНИЗ.
Можно заставить текст двигаться и наоборот СВЕРХУ ВНИЗ. Вот эта формула.

Где down - движение сверху вниз

Выглядеть это будет ВОТ ТАК
ДВИЖЕНИЕ СТРОЧКИ ИЛИ КАРТИНКИ СВЕРХУ ВНИЗ

8. МЕНЯЕМ СКОРОСТЬ ДВИЖЕНИЯ НА БОЛЕЕ МЕДЛЕННУЮ.
Скорость движения строчки тоже можно поменять, сделать быстрее, или медленнее. Для этого используют вот такую формулу.

Где behavior=" " - атрибут устанавливающий тип строчки
alternate - возвратно-поступательное движение
direction=" " - атрибут устанавливающий направление
scrollAmount ="1" - устанавливает скорость движения строки. Цифру скорости можно менять.

Выглядеть это будет ВОТ ТАК
МЕДЛЕННАЯ СКОРОСТЬ ДВИЖЕНИЯ СТРОЧКИ

9. МЕДЛЕННОЕ ДВИЖЕНИЕ СТРОЧКИ СВЕРХУ ВНИЗ И НАОБОРОТ.
Регулировать скорость строчки вверх и вниз тоже можно. Для этого используют вот такую формулу.

Где alternate - возвратно-поступательное движение
direction=" " - атрибут устанавливающий направление(в нашем случае сверху вниз и наоборот)
scrollAmount ="1" - устанавливает скорость движения строки. Цифру скорости можно менять.

Выглядеть это будет ВОТ ТАК
медленное движение текста снизу вверх и наоборот

10. СОЗДАНИЕ БЕГУЩЕЙ ССЫЛКИ НА САЙТ.
Можно создать и бегущую ссылку на какой то сайт, которые вы хотите показать читателям. Вот эта формула.

Выглядеть это будет ВОТ ТАК
МОЙ ДНЕВНИК НАХОДИТСЯ ЗДЕСЬ ДНЕВНИК ГАЛИНЫ ШАДРИНОЙ

11. БЕГУЩАЯ СТРОКА С ИЗОБРАЖЕНИЕМ.
Как я уже писала, что двигаться может не только строчка, но и любая картинка. Все выше приведенные формулы так же применимы и к картинкам. Только вместо СЛОВ, вставляется HTML - код картинки. Вот такая формула, к которой можно добавлять любые параметры движения.

Исходная картинка.

Добавим формулу бегущей строки, и выглядеть это будет ВОТ ТАК

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

Пропишу ВСЕ ЭТИ ФОРМУЛЫ ЕЩЕ РАЗ, УЖЕ со всеми параметрами. (то есть к каждой новой формуле добавляется новое значение, и поэтому формула становится все длиннее. Если вам не нужны ВСЕ ПАРАМЕТРЫ, то берите формулы выше, там каждый параметр отдельно)

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

Или сотрите размеры строчки. Только помните что формула должна быть в угловых КАВЫЧКАХ, поэтому не убирайте их.

Пробуйте смелее и у вас все получится.

Серия сообщений "РАБОТА с ТЕКСТОМ":
Часть 1 - Движение текста
Часть 2 - Промотка текста в записи
...
Часть 32 - Ставим картинки по краям текста
Часть 33 - ВЕРТИКАЛЬНАЯ ЛИНИЯ в тексте.
Часть 34 - Как сделать бегущую строку и бегущее изображение в дневнике
Часть 35 - Как разбить текст на 2 колонки HTML
Часть 36 - Образцы русифицированных шрифтов
Часть 37 - Генераторы текста (используем прокрутку справа)

Рубрики:

РАБОТА с ТЕКСТОМ/-движение
РАБОТА с КАРТИНКОЙ

<a href="https://www.liveinternet.ru/community/z-zz/post483508519/">РљР°Рє СЃРґРµР»Р°С‚СЊ Р±РµРіСѓС‰СѓСЋ СЃС‚СЂРѕРєСѓ Рё Р±РµРіСѓС‰РµРµ РёР·РѕР±СЂР°Р¶РµРЅРёРµ РІ РґРЅРµРІРЅРёРєРµ</a><br/>&lt;
Р§Р°СЃС‚Рѕ РїСЂРё РЅР°РїРёСЃР°РЅРёРё СЃРІРѕРµРіРѕ СЃР°Р№С‚Р°, РёР»Рё РµРіРѕ СѓРїСЂР°РІР»РµРЅРёРµРј, РІРѕР·РЅРёРєР°РµС‚ РїРѕС‚СЂРµР±РЅРѕСЃС‚СЊ СѓСЃС‚Р°РЅРѕРІРёС‚СЊ РЅР° СЃР°Р№С‚ Р±РµРіСѓС‰СѓСЋ СЃС‚СЂРѕРєСѓ. РўР°РєРѕР№ СЌР»РµРјРµРЅС‚ РґРёР·Р°Р№РЅР° РїСЂРёРІР»РµРєР°РµС‚ РІРЅРёРјР°РЅРёРµ РїРѕСЃРµС‚РёС‚РµР»РµР№ РЅР° РЅСѓР¶РЅС‹Рµ СЂР°Р·РґРµР»С‹ СЃР°Р№С‚Р°, Р° С‚Р°РєР¶Рµ РјРѕР¶РµС‚ РІС‹РґРµР»РёС‚СЊ РѕРїСЂРµРґРµР»РµРЅРЅСѓСЋ РёРЅС„РѕСЂРјР°С†РёСЋ РЅР° РїРµСЂРµРґРЅРёР№ РїР»Р°РЅ, С‡С‚Рѕ РґР°СЃС‚ РІРѕР·РјРѕР¶РЅРѕСЃС‚СЊ РїРµСЂРІРѕРѕС‡РµСЂРµРґРЅРѕРіРѕ РїСЂРѕСЃРјРѕС‚СЂР° РЅСѓР¶РЅРѕР№ С‚РµРјС‹.

РСЃРїРѕР»СЊР·СѓСЋС‚ Р±РµРіСѓС‰СѓСЋ СЃС‚СЂРѕРєСѓ РґР»СЏ СЂР°Р·Р»РёС‡РЅС‹С… С†РµР»РµР№, РЅР°РїСЂРёРјРµСЂ, РґР»СЏ СЂРµРєР»Р°РјРЅРѕРіРѕ СЃРѕРѕР±С‰РµРЅРёСЏ, РЅРѕРІРѕСЃС‚РµР№, Р°РєС†РёР№, РѕР±СЉСЏРІР»РµРЅРёР№, РёР·РѕР±СЂР°Р¶РµРЅРёР№, СЃРјР°Р№Р»РёРєРѕРІ, Р±Р°РЅРµСЂРѕРІ Рё С‚.Рґ.

РЎРѕР·РґР°С‚СЊ Р±РµРіСѓС‰СѓСЋ СЃС‚СЂРѕРєСѓ РЅР° СЃР°Р№С‚Рµ вЂ“ РїСЂРѕС‰Рµ РїСЂРѕСЃС‚РѕРіРѕ.

Р”Р»СЏ СЃРѕР·РґР°РЅРёСЏ Р±РµРіСѓС‰РµР№ СЃС‚СЂРѕРєРё РёСЃРїРѕР»СЊР·СѓСЋС‚  РІРѕС‚ СЌС‚РѕС‚  СЃРїРµС†РёР°Р»СЊРЅС‹Р№ С‚Рµ... <a href="https://www.liveinternet.ru/community/z-zz/post483508519/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Люба47 обратиться по имени Вторник, 27 Апреля 2021 г. 09:57 (ссылка)

Интересный и очень часто нужный пост!!! Спасибо!!!

Ответить С цитатой В цитатник

Четверг, 29 Апреля 2021 г. 23:35ссылка

Veta-z

да....нам часто нужно что-то выделить....на что -то обратить внимание

Ответить С цитатой В цитатник Обратиться по имени

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

LiveInternetLiveInternet

-Рубрики

-Всегда под рукой

-Цитатник

-Метки

-Ссылки

-Поиск по дневнику

-Подписка по e-mail

-Друзья

-Постоянные читатели

-Сообщества

-Статистика

Как сделать бегущую строку и бегущее изображение в дневнике