Как сделать бегущую строку на сайте

SEO Маяк

Всем привет! Сегодня на будет не совсем обычный урок. Речь пойдет об анимации.

Нет, в фотошопе мы разбираться на будем, обойдемся старым добрым HTML и научимся делать несколько анимационных фокусов.

Анимация для сайта забавная штука, скажу я Вам, но почему-то редко применяемая, хотя сложного вообще ничего нет.

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

Обратите внимание

Фотошоп — великая сила, кстати скоро выйдет серия бесплатных видео уроков по анимации картинок, так что подписывайтесь на .

Многие вещи можно анимировать без применения фотошопа, средствами обычного HTML, но давайте обо всем по-порядку. Поехали!

Как на сайте сделать бегущую строку с помощью HTML

Итак, знакомьтесь! Волшебный тег — . Изначально этот тег был разработан для браузера Internet Explorer, но со временем и другие браузеры стали поддерживать его применение.

Давайте заставим строку двигаться. Для этого в редакторе WordPress, в HTML режиме вставляем следующее:

Бегущая строка

Вуаля

Невероятно, но строчка стала двигаться. Теперь давайте сделаем строчку немного заметнее, добавив стили.

Бегущая строка

Применив атрибут direction со значением right мы изменим направление движения бегущей строки и она будет двигаться справа налево:

Бегущая строка

По умолчанию тегу присвоен атрибут direction со значением left, поэтому строчка без применения атрибутов движется слева направо.

Подставив значение up для атрибута direction мы заставим строчку двигаться снизу вверх:

Бегущая строка

Значение down укажет строчке двигаться сверху вниз

Бегущая строка

Мне кажется надо увеличить скорость прокрутки бегущей строки, для этого мы используем атрибут scrollamount. В кавычках указываем число от 1. Например:

Бегущая строка

Теперь давайте немного остановимся и разберемся как работает тег .

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

По молчанию стоит значение 6, но если задать значение 1, то расстояние между старым и новым положением строчки будет равняться 1 пикселю, что обеспечит медленный и плавный ход бегущей строки:

Бегущая строка

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

Но если подставить значение alternate, то строчка не будет скрываться из виду, а дойдя до границ блока начнет движение в обратную сторону:

Бегущая строка

Важно

Значение slide для атрибута behavior дает команду бегущей строчке дойти до границы блока и остановиться:

Бегущая строка

Атрибут height задает высоту блока. По умолчанию стоит 12 пикселей, но давайте ее изменим и немного добавим к скорости прокрутки бегущей строки:

Бегущая строка

Атрибут width отвечает за ширину блока. Можно применять атрибуты width и height вместе, чтобы задать желаемые границы блока. Для наглядности добавим рамку в стили и чуть-чуть замедлим скорость прокрутки:

Бегущая строка

Теперь давайте зададим фон для бегущей строки. Для этого применим атрибут bgcolor и поставим для него желтый цвет фона:

Бегущая строка

Теперь попробуем сделать так, чтобы бегущая строка двигалась в разные стороны.

Бегущая строкаБегущая строка

Устанавливаем время задержки анимации с помощью атрибута scrolldelay, подставляя числовые значения. По умолчанию стоит 80 миллисекунд:

Бегущая строка

Атрибут scrolldelay — это еще один инструмент, с помощью которого мы можем регулировать скорость прокрутки.

Анимация изображений на сайте

Простой пример анимации изображения:

Конечно сама картинка анимирована в фотошопе, но мы ее заставили перемещаться по странице, создавая эффект движения.

Вот еще интересный пример, с помощью тега marquee можно создать простенький слайдер:

Можно каждую картинку в слайдере сделать ссылкой:

До встречи!

C уважением, Виталий Кириллов

Источник: https://seo-mayak.com/sozdanie-bloga/wordpress-dlya-novichkov/animaciya-dlya-sajta-begushhaya-stroka-html-teg-marquee.html

Бегущая строка на HTML. Основы HTML для начинающих. Урок №9

Бегущая строка

Результат:

* атрибуты для бегущей строки
цвет фона бегущей строки
Чтобы закрасить фон бегущей строки, добавьте к тегу «marquee» атрибут «bgcolor»:

Бегущая строка

Результат:

○ высота и ширина бегущей строки
Чтобы установит высоту и ширину бегущей строки, добавьте к тегу «marquee» атрибут «width» и «height»:

Бегущая строка

Результат:

○ поведение бегущей строки
Добавьте к тегу «marquee» атрибут «behavior» с такими значениями:

scroll — обычная прокрутка (по умолчанию);

slide – строка начинает свой путь из одного края и останавливается у другого;

alternate – строка будет двигаться от края до края

Пример:

обычная прокрутка (по умолчанию) Бегущая строка перейдет из одного края и остановится у другого строка будет двигаться от края до края

Результат:

○ направление бегущей строки
Добавьте к тегу «marquee» атрибут «direction» с такими значениями:

left – движение текста влево (по умолчанию);

right – движение текста вправо;

up – движение текста снизу вверх;

down — движение текста сверху вниз

Пример:

движение текста влево (по умолчанию) движение текста вправо движение текста снизу вверх движение текста сверху вниз

Результат:

○ скорость бегущей строки
Чтобы регулировать скорость перемещения бегущей строки, добавьте к тегу «marquee» атрибут «scrollamount»:

Бегущая строка

Чем больше значение, тем больше скорость.

Результат:

○ задержка интервала передвижения бегущей строки
Еще один атрибут, с помощью которого можно регулировать скорость. Чем больше значение, тем меньше скорость. Добавьте к тегу «marquee» атрибут «scrolldelay»:

Бегущая строка

Результат:

○ количество проходов бегущей строки
Если вам нужно указать определенное количество проходов бегущей строки, добавьте к тегу «marquee» атрибут «loop»:

Бегущая строка

В примере стоит значение «2», это значит, что проходов будет только два.

○ отступы бегущей строки
Если вам нужно указать отступ с левой и правой стороны, добавьте к тегу «marquee» атрибут «hspace»:

Бегущая строка

Результат:

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

Чтобы вставить бегущую строку в картинку, вставьте между тегами уже известный вами тег для вывода картинки :

Результат:

Все атрибуты для тега действуют и в этом случае.

Как вставить в бегущую строку ссылку

Здесь тоже вовсе не сложно. Как вставлять ссылку в HTML документ вы знаете. Как сделать бегущую строку вы тоже уже знаете. Достаточно вставить в текст бегущей строки ссылку и все:

Бегущая строка на блоге StepkinBlog.ru

Пример:

Бегущая строка на блоге StepkinBlog.ru

Результат:

На сегодня это все! Жду вас на следующем уроке. Удачи!

Читайте также:  Как узнать посещаемость чужого сайта

Источник: http://stepkinblog.ru/html/begushhaya-stroka-na-html-osnovy-html-dlya-nachinayushhix-urok-9.html/

Бегущая строка на сайт с помощью CSS

Почему было принято решение обновить и переделать имеющуюся строку. Дело в том, что раньше, чтобы сделать бегущую строку, использовался HTML тег, который сейчас считается устаревшим и его не советуют использовать, потому как в HTML5 его уже нет.

Браузеры еще поддерживают его, но как долго marquee будет обрабатываться? Вот поэтому, чтобы не рисковать, стоит от него отказаться и если бегущая строка вам все же необходима, то можно сделать ее с помощью CSS. Получится в итоге такое:

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

Наш бегущий текст. Текст, который будет двигаться с права налево.

Совет

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

.marquee{ width:100%; white-space:nowrap; overflow:hidden; } .marquee span { color:#212121; font-size:25px; display:inline-block; padding-left:100%; -webkit-animation: marquee 10s infinite linear; animation: marquee 10s infinite linear; } @-webkit-keyframes marquee { 0%{-webkit-transform: translate(0, 0);} 100%{-webkit-transform: translate(-100%, 0);} } @keyframes marquee{ 0%{transform: translate(0, 0);} 100%{transform: translate(-100%, 0)} }

Тут есть несколько главных параметров, остальные уже можете менять и добавлять свои. Сначала стили для родительского блока.

  • width:100%; — Задаем ширину нашему родительскому блоку marquee.
  • white-space:nowrap; — запрещаем перенос слов на другую строку.
  • overflow:hidden; — обрезаем все что выходит за наш блок с бегущей строкой, чтобы не было казусов.

Далее стили для span:

  • display:inline-block; — делаем наш span строчно-блочным элементом
  • padding-left:100%; — делаем отступ слева на всю ширину родительского блока.
  • -webkit-animation и animation — применяем анимацию к блоку. Время выполнения анимации 10 секунд. Можете менять значение на свое.
  • @-webkit-keyframes marquee и @keyframes marquee — сама анимация.

Это что касается основных параметров. Как и сказал выше, остальные стили можете добавлять какие угодно.

Все же многие считают бегущую строку устаревшим элементом. Ведь с развитием HTML и CSS, открылись новые возможности и сделать какую-то анимацию на сайте стало намного проще. Бегущая строка попросту устарела. Но тем не менее, многие продолжают ее использовать и как показывает практика, часто в тренды возвращается то что было когда-то.

На этом все, спасибо за внимание.

Источник: http://gnatkovsky.com.ua/begushhaya-stroka-na-sajt-s-pomoshhyu-css.html

Как сделать на сайте бегущую строку | History-of-Blog.ru — История одного блога

Как сделать на сайте бегущую строку

Здравствуйте уважаемые посетители блога history-of-blog.ru. Сегодня мы научимся делать на сайте бегущую строку при помощи html тега marquee.

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

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

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

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

Куда:

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

Как:

  • При написании статьи необходимо переключиться в HTML-редактор и именно в нем вставлять необходимый код (примеры кодов Вы можете посмотреть ниже). Внимание! При обратном переключении в визуальный редактор тег marquee обрезается, поэтому лучше сначала написать статью, а уже затем обозначить в ней бегущую строку.
  • Если Вы хотите вывести бегущую строку например в шапке, то необходимо вставить код в файл header.php, если в подвал сайта, то в footer.php и т.д. Для этого нужно переключиться в режим редактирования файлов темы (Дизайн -> Редактор) и вносить изменения в нужном файле.

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

Код бегущей строки для сайта

1 пример.

Самый простой код бегущей строки для сайта – это необходимые слова, заключенные в тег  marquee. То есть вот так:

В Июне я заработал более 7'000 в интернете

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

Вот что получилось:

2 пример.

Пример:

В самой бегущей строке я перечисли все стили, которые для нее задал, прежде чем понять что за что ответственно посмотрите код этой бегущей строчки:

Бегущая строка с шириной, высотой, фоном, направлением и скоростью

  • width – это ширина. Сейчас она фиксированная и составляет 550 пикселей. Если не прописывать этот параметр, то бегущая строка будет занимать всю возможную ширину, например если вставлять ее в статью, то она будет занимать ровно столько же, сколько и отведено для основного контента.
  • height – высота в пикселях. В данном случае 55.
  • bgcolor – фоновый цвет.
  • direction – направление движения. Возможные варианты: up – снизу вверх, down – сверху вниз, right – слева направо, left – справа налево (по-умолчанию).
  • scrollAmount – скорость бегущей строки. Чем больше цифра, тем больше скорость.

Так же стоить отметить еще один параметр, который может быть полезен:

  • behavior – задает тип движения. Возможные варианты: alternate – перемещение между левой и правой границами, slide – строчка перемещается так, как это задано атрибутом direction, однако дойдя до края останавливается.

3 пример.

Можно сделать бегущую строку с картинкой или с картинкой и текстом:

Для этого нужно вставить html код картинки внутрь тега marquee:

Надеюсь статья была Вам полезна!

Примечание: можно вставить анимированную картинку – тогда бегущая строка на сайте будет смотреться очень эффектно!

Источник: http://history-of-blog.ru/wordpress/kak-sdelat-na-sajte-begushhuyu-stroku/

Как сделать бегущую строку на сайте

Часто при написании своего сайта, или его управлением, возникает потребность установить на сайт бегущую строку.

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

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

Сама бегущая строка создается тегом < marquee > текст , а точнее создаёт динамический эффект автоматического скроллинга.

Тег MARQUEE — блочный контейнер, аналогичный тегам P DIV SPAN, в который помещается нужная информация для отображения.

Читайте также:  Обзор программ для майнинга биткоинов

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

Стандартная запись бегущей строки такая —
< marquee > текст внутри блока, или изображение, или несколько изображений, или ссылки , соответствует такой записи —

< marquee behavior=»scroll» direction=»left» loop=»-1″ scrollamount=»6″ scrolldelay=»0″ > наполнение … < /marquee >

Атрибуты тега MARQUEE

direction=» « — атрибут устанавливающий направление скроллинга:     Значения:left — движение справа налево (по умолчанию)right — движение слева направоup — движение снизу верхdown — движение сверху вниз behavior=» « — атрибут устанавливающий тип скроллинга:     Значения:scroll — скроллинг в одном из заданных направлений (по умолчанию)slide — одноразовый скроллинг с остановом контентаalternate — возвратно-поступательный скроллинг
width=» « — устанавливает ширину блока для строкиheight=» « — устанавливает высоту блокаhspace=» » — отступа в пикселях от вертикальных границ блокаvspace=» » — отступ в пикселях от горизонтальных границ блока bgcolor=» » — атрибут устаналивающий параметр цвета фона скроллингаstyle=» « — атрибут указывает стиль форматирования блока и контентаclass=» « — атрибут внедрение стиля форматирования блока и контента
loop=» « — определяет количество циклов перемещения«-1» или «infinite» — безконечное перемещение наполнения в блоке«N» — целое число, задающее количество показов в блоке bgcolor=» » — атрибут устаналивающий параметр цвета фона скроллинга

Атрибут     scrollAmount    — устанавливает скорость движения строки.

Примеры бегущей строки

HTML — код примеров бегущей строки.

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

Март 2019

ПнВтСрЧтПтСбВс
« Апр
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

Источник: http://kapon.com.ua/kak-sdelat-beguschuyu-stroku-na-sayte/

Сделать бегущую строку на сайте. Примеры создания бегущей строки на сайте

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

Кроме того, бегущая строка — самый простой способ создания анимации на сайте. На самом деле вы можете сделать «бегущими» не только слова, но и любые другие элементы страницы — изображения (включая анимированные), таблицы, элементы форм и т.д.

Причём перемещение объекта может быть как по горизонтали, так и по вертикали.

Вы можете использовать её в самых разных ситуациях:

  • в качестве информера для новостей, обновлений,
  • в качестве разделителей для текста,
  • в рекламных целях,
  • для визуального украшения и т.д.

Чтобы сделать эффект бегущего текста, используется контейнер с определёнными атрибутами. Давайте сначала посмотрим, какие атрибуты за что отвечают, а потом будем применять:

  • behavior — задает тип движения содержимого контейнера , может принимать значения:
    • alternate — объект перемещается между правым и левым краем области;
    • scroll — объект перемещается в направлении, заданным атрибутом direction, затем скрывается за пределами области, после чего начинает движение с начала;
    • slide — объект перемещается в направлении, заданным атрибутом direction, доходит до края области и останавливается.
  • bgcolor — цвет фона контейнера, по умолчанию установлен цвет фона страницы,

  • direction — указывает направление движения содержимого контейнера, может принимать занчения:

    • down — сверху вниз,
    • up — снизу вверх,
    • left — справа налево (установлено по умолчанию),
    • right — слева направо.
  • height — высота области прокрутки (в пикселах или процентах),

  • width — ширина области прокрутки (в пикселах или процентах),

  • hspace — горизонтальные поля вокруг контейнера (целое положительное число),

  • vspace — вериткальные поля вокруг контейнера (целое положительное число),

  • loop — задаёт количество раз прокрутки содержимого (любое целое положительное число или -1 для бесконечного воспроизведения движения),

  • scrollamount — задаёт скорость движения контента: устанавливает расстояние в пикселах между старым и новым положениями, которое влияет на скорость движения и плавность хода. По умолчанию установлено 6.

Простая бегущая строка с текстом:

Бегущая строка с картинкой.

Если прикрепить к зайчику ленту с каким-нибудь объявлением, то получится прикольный информер, который будет активно привлекать внимание посетителей сайта.

Вертикальная бегущая строка с картинкой или текстом.

Вертикальная бегущая строка с прокруткой сверху вниз.

Вертикальная бегущая строка с прокруткой снизу вверх.

Источник: http://SeoKlub.ru/sdelat_beguschuyu_stroku_na_saite.html

Реклама на сайте при помощи бегущей строки

Здравствуйте  мои дорогие читатели. Уже давно зародилась мысль поделиться  с вами  одной интересной идеей. Вероятно, что вы слышали о таком явлении, как реклама на сайте. Сейчас разберем  несколько приемов, как сделать рекламу на сайте или блоге при помощи бегущей строки. Это сможет сделать каждый. Читайте статью до конца.

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

 Кстати там на некоторых  ресурсах (яндекс директ), существуют определенные правила. Посещение вашего сайта (блога) должно быть 300 человек в сутки. Не берут блоги с бесплатных хостингов, а значит не всем это подходит.

Сегодня, я хочу предложить вам сделать рекламу на сайте при помощи бегущей строки.

Допустим, у вас на блоге идет конкурс.

У вас для читателей и подписчиков есть предложение по скидке на ваш курс.

Вы объявили конкурс на лучшего комментатора месяца.

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

Обратите внимание

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

Вам только нужно скопировать код, который я вам дам и поставить в нужное место.

И так сегодня вы узнаете варианты кодов для бегущей строки.

А также поясню, куда нужно и можно это все вставлять.

Варианты кодов бегущей строки.

Реклама делается просто, для этого будем использовать коды. Но для общего понимания расскажу о волшебном теге, который заставляет ваш текст двигаться.

Это  парный тег <\p>

Достаточно  написать:

Внимание!  На сайте проводится конкурс комментатора

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

Читайте также:  Как выбрать памм счет

Мы рассмотрим несколько видов строчек и получим расшифровку каждой.

Делаем строчку  красивой и привлекательной,  для этого вставим  код.

Ваш текст

style=»color: #D9470D это цвет

font-size: 40px это размер текста

font-weight: bolder  ширина линии

line-height: 150%; высота линии

Ваше предложение о скидке на ваш курс

Если подставим  значение up  для атрибута direction  наша строка появится снизу на вверх:

Ваш рекламный текст

А значение down  поменяет направление  сверху вниз.

Ваш текст

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

Пример:

Ваше рекламное предложение

Атрибут behavior задаст вариант  прокрутки внутри рекламного  блока. Он  по умолчанию имеет значение scroll, это заставит  бегущую строчку  сначала скрываться, а затем  начинать движение сначала.

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

Ваше предложение по скидке

Значение slide для atribyta  behavior это  команда дойти до границ  блока и остановиться:

Ваш рекламный текст

С помощью атрибутов width ( ширина) и  height ( высота)  будем использовать вместе и зададим границы блока. Для  этого  добавим рамку в стили.

Ваше объявление

Можно изменить фон для рекламной строчки.  В этом нам поможет  атрибут bgcolor  В данном случае это  желтый цвет. Но можно в палитре цветов найти любой и подставить значение. Как вам это?

Только сегодня скидка 10% Спешите

А теперь вообще супер. Бегущая строка двигается  в разные стороны.

Скорей копируйте код и внедрите.

Бегущая строкаТолько у нас скидка 50%

Установив  время задержки анимации при  помощи  атрибута scrolldelay и,  подставив любое значение в числах (по умолчанию  80 миллисекунд), получим другой код:

Ваше предложение

При  помощи тега marquee можно создать простой слайдер. Для этого подбираем картинки одинакового размера и загружаем в библиотеку. Не забываем оптимизировать. Берем ссылку на изображение и вставляем в код ниже.

А этот вариант,  картинка будет  ссылкой. Пробуйте сами.

Куда  вставить бегущую строку.

Вставлять  строку на сайт можно:

Тут нужно иметь всегда наготове нужный код и вставлять, туда куда считаете нужным. Вставляем в режиме текст(html) Только запомните, что код работает когда не переходите в визуальный редактор. Вставили просмотр, а потом публикуйте. Если потом задумаете редактировать код двигаться не будет и его нужно вставлять заново.

Чтобы  строчка бежала все время без вставки каждый раз ее нужно вставить  в файлы header.php и footer.php  вашей темы WordPress.

  • виджетом в саде-баре-  это боковая панель, у некоторых она находится справа, а иногда слева…  В других случаях  может  находиться  сразу с двух сторон.

Способы размещения и сам вид кода выбирайте на свой вкус. А у меня на этом пока все. Жду ваши вопросы. Подписывайтесь на новые статьи  блога.

C уважением, Рита Молчанова, автор блога ritabk.ru

Источник: http://ritabk.ru/vse-sekrety-blogovedeniya/reklama-begushhej-stroki/

Бегущая строка на страницах сайта

Если появилась необходимость на маленьком участке страницы сайта большого объёма информации, такой как новости сайта, баннеры, ссылки и прочее, то Вам в этом случае может пригодиться бегущая строка. По конфигурации они могут быть разными. Всё будет зависеть от того где и что Вы хотите вставить в бегущую строку.

Теги бегущей строки это всё что будет заключено меду этими тегами, будет двигаться по строке. Движения можно сделать разными: слева на прав, справа на лева, сверху вниз, снизу вверх, возвратно-поступательные движения и т.д. Рассмотрим самую простую бегущую строку. Для этого заключим какой-то текст межу выше написанными тегами:

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

Атрибуты тега MARQUEE

direction=» « — атрибут устанавливающий направление скроллинга:
     Значения:
left — движение справа налево (по умолчанию)
right — движение слева направо
up — движение снизу верх
down — движение сверху вниз
behavior=» « — атрибут устанавливающий тип скроллинга:
     Значения:
scroll — скроллинг в одном из заданных направлений (по умолчанию)
slide — одноразовый скроллинг с остановом контента
alternate — возвратно-поступательный скроллинг

width=» « — устанавливает ширину блока для строки
height=» « — устанавливает высоту блока
hspace=» » — отступа в пикселях от вертикальных границ блока
vspace=» » — отступ в пикселях от горизонтальных границ блока

bgcolor=» » — атрибут устаналивающий параметр цвета фона скроллинга
style=» « — атрибут указывает стиль форматирования блока и контента
class=» « — атрибут внедрение стиля форматирования блока и контента

loop=» « — определяет количество циклов перемещения
«-1» или «infinite» — безконечное перемещение наполнения в блоке
«N» — целое число, задающее количество показов в блоке

bgcolor=» » — атрибут устаналивающий параметр цвета фона скроллинга

Атрибут     scrollAmount    — устанавливает скорость движения строки.

(использован материал сайта http://kapon.com.ua)

Теперь сделаем бегущую строку в небольшом окошке, а для наглядности я окрашу это окошко в какой-нибудь цвет. Для создания бегущей строки в окошке нужно к тегам приставить атрибуты Widht и Height.

Строка в окошке<\p>

Для того чтобы строка двигалась с лева на право, необходимо добавить атрибут right

движение слева направо

При добавлении атрибута alternate, движение строки будет от края до края

Важно

постоянное движение

Теперь с помощью атрибута scrollamount изменим скорость движения строки. Принцип такой — чем меньше цифра, тем медленнее движется строка

Замедляем движение
Движется снизу вверх
вверх со скоростью 2

Заменив direction=»up» на direction=»down« движение строки будет сверху вниз.

Для удобства пользователей можно сделать чтобы бегущая строка останавливалась при наведении курсора. Для этого к тегу необходимо добавить следующую конструкцию
onmouseover=»this.stop()» onmouseout=»this.start()»  
останавливается при наведении курсора

Рассмотрим еще движение картинки. Можно таким способом сделать прокрутку рекламных баннеров,  кнопок и т.д. В общую конструкцию необходимо вставить адрес картинки, баннера, кнопки…

Всё основное я Вам рассказал, но это не предел. Можете сами пофантазировать и сделать что-то необычное. Удачи!!!

Бегущая строка на страницах сайта обновлено: Август 5, 2017 автором: admin

Источник: http://mehelps.ru/begushhaya-stroka-na-stranitsah-sayta.html

Ссылка на основную публикацию