» » » Анимация для сайта. Бегущая строка HTML, тег marquee
logotip

Анимация для сайта. Бегущая строка HTML, тег marquee

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

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

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

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

animaciya-na-saite2

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

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

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

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

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

<marquee>Бегущая строка</marquee>

Вуаля

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

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

<marquee style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Бегущая строка

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

<marquee direction="right" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Бегущая строка

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

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

<marquee direction="up" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Бегущая строка

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

<marquee direction="down"  style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Бегущая строка

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

<marquee scrollamount="30" direction="down" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Бегущая строка

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

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

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

<marquee scrollamount="1" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Бегущая строка

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

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

<marquee behavior="alternate" scrollamount="10" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Бегущая строка

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

<marquee behavior="slide" scrollamount="10" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Бегущая строка

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

<marquee height="100" direction="up" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Бегущая строка

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

<marquee width="300" height="300" scrollamount="15" direction="up" style="border: 2px solid #000000; color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Бегущая строка

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

<marquee bgcolor="#F5FF37" width="300" height="300" scrollamount="12" direction="down" style="border: 2px solid #000000; color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Бегущая строка

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

<marquee width="49%" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee><marquee width="49%" direction="right" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Бегущая строкаБегущая строка

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

<marquee scrolldelay="30" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Бегущая строка

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

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

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

<marquee direction="right"><img src="Путь до катринки" /></marquee>

animaciya-dlya-saita2.1

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

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

<marquee direction="right" scrollamount="10"><img src="Путь до картинки №1"/><img src="Путь до картинки №2" /><img src="Путь до картинки №3"/><img src="Путь до картинки №4"/><img src="Путь до картинки №5"/></marquee>

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

<marquee scrollamount="10"><a href="URL статьи №1"><img  src="Путь до изображения №1"  /></a><a href="URL статьи №2"><img src="Путь до изображения №2" /></a><a href="URL статьи №3"><img src="Путь до изображения №3" /></a><a href="URL статьи №"4"><img  src="Путь до изображения №4" /></a><a href="URL статьи №5"2"><img  src="Путь до изображения №5"  /></a></marquee>

В заключение хотел сказать. Анимация штука нужная! Наверняка Вы видели анимированные фавиконы различные баннеры и слайдеры. Анимация широко используется на сайтах.
Я же показал Вам самый простой способ анимации, с помощью тега marquee.
Если Вам понравилась статья, поделитесь с друзьями в соц сетях. А если вдруг будут вопросы, то задавайте их в комментариях. Удачи!

До встречи!

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

Статьи по теме:

CSS анимация — свойство animation.

Комментарии: 114

  1. Елена:

    Вот это да! Супер! Я такого не знала, думала, что все нужно делать в фотошопе)) Обязательно воспользуюсь! Спасибо большое))

    Ответить
    • Виталий Кириллов:

      Пожалуйста Елена! Я думаю многие не знают про существование тега marquee.

      Ответить
    • Сергей Яковлев:

      Вот это супер!!! Вот результат work-rub.ru/top_reyting.php
      Плывущий банер заметно оживляет сайт! Спасибо автору!

      Ответить
      • Татьяна:

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

        Ответить
    • Anna:

      Автору Спасибо огромное! Всего 2-3 часа и статическая страница сайта заметно оживилась: bitstyle.ru И это чистый HTML! Также немного подрос приток целевых посетителей в мои проекты… Еще раз — БОЛЬШОЕ СПАСИБО!

      Ответить
  2. Василий:

    Спасибо. Очень интересная статья, способ действительно простой но можно хорошо использовать для привлечения внимания посетителя сайта.

    Ответить
    • Виталий Кириллов:

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

      Ответить
  3. Наталья:

    Дело не в том, что не знают.. я, например, с самого начала постижения азов HTML читала, что использования подобного рода оформления текста плохой тон, и с тех пор даже не задумывалась о его применении.
    Может, это прикольно и интересно, но нужно к этому относиться с большой осторожностью. Лично меня раздражают сайты со слайдерами, нельзя толком ничего рассмотреть. А бегущие строки.. вообще не знаю, где это может быть уместно.
    Анимация вообще отвлекает, например, невозможно читать текст там, где анимированная картинка (как у Вас). Мне кажется, что веб-дизайнер, который вставляет такие картинки, не заботится о своем читателе.
    Но за урок спасибо!

    Ответить
    • Виталий Кириллов:

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

      Ответить
      • Наталья:

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

        Ответить
        • Виталий Кириллов:

          Моей дочке картинка понравилась)) Интересно, что скажут другие читатели.

          Ответить
  4. Наталья:

    Мне тоже интересно, Виталий.. это же субъективное мнение)

    Ответить
  5. Наталья:

    Вот случайно наткнулась на сайт, где бегущая строка очень даже уместна: marketmovers.it И оформлена достаточно изящно (та, которая вверху)

    Ответить
    • Виталий Кириллов:

      Согласен, бегущая строка выглядит естественно.

      Ответить
  6. Александр:

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

    Ответить
    • Виталий Кириллов:

      Здравствуйте Александр! Всегда надо делать все с умом.

      Ответить
  7. Сергей Стрелков:

    Виталий, как всегда интересная статья. О бегущей строке знал, даже эксперементировал с ней. Прочитав статью, подумал, можно использовать бегущую собачку для привлечения внимания к рекламной строчке Nollix. Или какую ни будь новость, например конкурс на блоге. Хотя когда все прыгает и скачет, мне самому не нравится. У вас на блоге все хорошо подобрано, цвета, расположение и картинки. Оформление Топ комментаторов и подписка «получай статьи почтой» нравится.

    Ответить
    • Виталий Кириллов:

      Спасибо Сергей!

      Ответить
  8. Наталья:

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

    Ответить
    • Виталий Кириллов:

      Наталья, сделать все можно, но это тема другой статьи.

      Ответить
      • Наталья:

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

        Ответить
  9. Алекс:

    У меня не получилось это внедрить на свои страници! Сайт под управление джумлы 2.5! Может там этот тег не работает, так как после соххранения он пропадает

    Ответить
    • Виталий Кириллов:

      Алекс, на джумлы 2.5 не проверял.

      Ответить
  10. фиалка молчаливая:

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

    Ответить
  11. Svetlana:

    Виталий, а как создать скрипт с этим тегом, чтобы при наведении на бегущую строку и клику на нее — был переход на другую страницу?

    Ответить
    • Виталий Кириллов:

      Можно и выглядеть это будет так:

      <marquee><a href="URL страницы">Текст бегущей строки</a></marquee>
      Ответить
  12. Віталік:

    Круто очень полезная вещь)))

    Ответить
  13. Дмитрий:

    У меня на сайте есть бегущая строка и довольно простая. Размещена на нескольких страницах и что бы добавить туда объявление нужно редактировать каждую страницу. Возможно ли сделать бегущую строку что бы ее можно было корректировать из одного текстового файла для каждой страницы? Буду очень признателен!

    Ответить
    • Виталий Кириллов:

      Дмитрий, возможно надо вставить код бегущей строки непосредственно в файл single.php.

      Ответить
  14. Феофан:

    Однако с этим тэгом код будет невалидным.
    http: // htmlbook.ru/html/marquee

    Ответить
  15. Михаил:

    Здравствуйте!
    А как сделать
    Бегущая строка

    так чтобы картинка задерживалась на середине а потом продолжала свой путь?

    Ответить
    • Виталий Кириллов:

      Михаил, я не знаю как это реализовать.

      Ответить
  16. Алексей:

    Спасибо за интересную статью, Виталий! marquee — это конечно хорошо, но прихожу к выводу, что надо учить JavaScript. А то топорно как-то всё это. Хотя, в некоторых случаях может выручить и marquee.

    Ответить
  17. Ярослав:

    Подскажите? почему при использовании скрипта:

    <a href="URL статьи №1" rel="nofollow"></a><a href="URL статьи №2" rel="nofollow"></a><a href="URL статьи №3" rel="nofollow"></a>

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

    Ответить
  18. Andrey:

    Большое спасибо помогли))

    Ответить
  19. ZERRO:

    СУПЕР

    Ответить
  20. wandrys:

    Уважаемые! Подскажите кто знает — как сделать бегущую строку на фоне статичного изображения?
    Вот на этом сайте реализовано:
    http://www.platina-kostroma.ru

    Гугл и Яндекс бессильны.

    Ответить
  21. Эдакс:

    Классная статья!! Очень понравилась! =)

    Ответить
  22. Виталий:

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

    Ответить
  23. Иван:

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

    Ответить
    • Виталий Кириллов:

      Иван, оберните данный код в блок div и задайте класс. Затем в файле style css пропишите стили для заданного класса:

      .заданный класс img {
      margin-left: — 5px;
      }

      Возможно надо будет подкорректировать значение селектора margin-left. Если не сработает, напишите, тогда я проведу эксперимент и скажу точно.

      Ответить
  24. Влад:

    Подскажите, я можно ли сделать так, чтобы бегущая строка ВСЕГДА находилась в пределах видимости внизу экрана? Т.е сразу при открытии любой страницы она появлялась и не исчезала при скроллинге.

    Ответить
    • Виталий Кириллов:

      Влад, в программировании наверное нет ничего невозможного.

      Ответить
      • Влад:

        Несомненно, только как это реализовать?

        Ответить
        • Виталий Кириллов:

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

          Ответить
  25. Ярослав:

    Подскажите? почему при использовании скрипта:

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

    Ответить
    • Виталий Кириллов:

      Ярослав, делается это с помощью стилей. В вашем случаи надо прописать к заданному классу так:
      .заданный класс img {
      float: left;
      }

      Ответить
  26. Сергей:

    Ребята, а как реализовать бегущую строку как на телевидении?

    Ответить
  27. Артём:

    Подскажите как сделать бегущую строчку чтобы одна записть сменила другую, когда 1 записть ушла за экран?

    Ответить
    • Виталий Кириллов:

      С псредствами тега marquee это врятли возможно.

      Ответить
  28. Елена:

    Доброго времени суток! Для меня данная статья — просто находка! Я часто перерываю интернет в поисках чего-то нового, интересного и завлекательного, но это — просто бомба! Спасибо большое! Обязательно подпишусь на Вас, Виталий! Приятно иметь дело с человеком разумным, а не зарвавшимся «специалистом»! Премного благодарна!

    Ответить
    • Виталий Кириллов:

      И вам спасибо Елена на добром слове!

      Ответить
  29. Алексей:

    Виталий!
    Скрипт конечно интересный…
    НО! Он очень тормозит загрузку сайта
    Да и посетителями различного рода плавающие и прыгающие
    надписи воспринимаются не в плюс…
    данный скрипт скорее отвлечет и отпугнет от контента
    нежели положительно повлияет на поведенческие
    Думаю для блога он точна не принесет пользы
    … хотя это лично мое мнение

    Ответить
    • Виталий Кириллов:

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

      Ответить
  30. Ден:

    Скажите пожалуйста, как увеличить скорость бегущей строки?

    Ответить
    • Виталий Кириллов:

      scrollamount=»30″, где 30 — скорость прокрутки.

      Ответить
  31. Ден:

    И куда это вставлять scrollamount=»30″ для увеличения скорости бегущей строки? В ваших кодах я такого не нащел… В каком месте в коде нужно это вставить?

    Ответить
  32. Ден:

    Все нашел и разобрался. Спасибо!

    Ответить
  33. Михаил:

    Тема с движением картинок по принципу бегущей строки вдохновила меня на некоторые новшества для моих сайтов. Спасибо за подкинутую идею! Обязательно это реализую.

    Ответить
  34. Дмитрий:

    Виталий огромное спасибо , на двух сайтах запустил бегущую строчку о поступлении новинок … Ещё раз спасибо .

    Ответить
  35. Александр:

    У меня рамка очень высокая в отзывах, долго снизу поднимается, скажите как я могу сделать движение текста не с последней строчки , а с первой, и ответ можно на почту???
    kuvera88888@mail.ru

    Ответить
  36. Галина:

    Добрый день, Виталий!
    Огромное Вам спасибо за такой замечательный полезный урок! Просто СУПЕР!
    Подскажите, пож-та, как для бегущей строки изменять стиль шрифта: курсив, нежирный, цвет. Где можно найти номер желаемого цвета. color: #D9470D — это красный. А темно-синий, например, или любой другой потребуется в дальнейшем.
    Как изменить размер шрифта я поняла (font-size: 40px)

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

    Заранее Вас благодарю за помощь. Удачи Вам и процветания Вашему бизнесу.

    С уважением, Галина

    Ответить
    • Галина:

      адрес ссылки, о которой идет речь: В настоящее время объявлений нет

      Ответить
      • Галина:

        Со всеми прежними вопросами разобралась, за что еще Вам многократное спасибо!!!
        Пож-та, помогите, у самой не получается: как сделать бегущую строку НЕПРЕРЫВНОЙ?
        Вставка loop=»-1″ не срабатывает.

        Вот такой код я сообразила:

        Всем доброго времени суток! Мы рады приветствовать Вас на нашем сайте!

        Виталий, пож-та, прошу Вас, внесите требуемые изменения. Боюсь, сама я не справлюсь.

        Еще раз огромное Вам спасибо.

        С уважением, Галина

        Ответить
  37. Галина:

    набираю код вручную, т.к. приего вставки в текст сообщения он преобразовыввается в текст БЕГУЩЕЙ СТРОКИ

    <marquee loop="-1" scrollamount="2" style="color: #0066CC; font-size: 20px; font-weight: и т.д.

    Ответить
  38. Виталий:

    А как сделать что бы картинки расходились в разные стороны как показано в бегущей строке?

    Ответить
    • Виталий Кириллов:

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

      Ответить
      • Виталий:

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

        Ответить
  39. Саша:

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

    Ответить
  40. Саша:

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

    Ответить
    • Виталий Кириллов:

      Саша, а Вы не читали мою последнюю статью?

      Ответить
  41. Олег:

    Виталий , всё это интересно и мною уже применено . Возник теперь такой вопрос , как сделать управление бегущей строки или картинки при помощи , допустим, стрелок как в слайдере ? Очень интересует этот вопрос

    Ответить
  42. Олеся:

    Доброго времени суток!
    Сделала бегущую строку на сайте с баннерами. Все хорошо. Хотелось бы узнать, как сделать ту же бегущую строку, но, чтобы слайды двигались в направлении, заданном курсором (вправо-влево)?
    Спасибо за статью! 🙂

    Ответить
    • Виталий Кириллов:

      Олеся, это самой простой способ анимации и с помощью тега marquee того эффекта не добьешься.

      Ответить
      • Олеся:

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

        Ответить
        • Виталий Кириллов:

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

          Ответить
  43. Виктория:

    Вы просто супер!!!!Огромное вам спасибо!!!!!!!!

    Ответить
  44. Влад:

    Здравствуйте Уважаемый Виталий! Просто ну большое человеческое спасибо, давно искал эту прелесть но толкового исполнения как у Вас не встречал! Спасибо Вам! С Уважением Влад.

    Ответить
  45. Татьяна:

    Виталий , спасибо ! Сделала у себя на сайте рекламный блок . А вы с базами MySQL работаете? C PHP-скриптами? Или только HTML и CSS?

    Ответить
    • Виталий Кириллов:

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

      Ответить
  46. Евгения:

    Спасибо за полезный урок! У меня есть такой вопрос, можно ли на анимацию сделать активную ссылку? хочется чтоб анимашка была полезной,чтоб при кликании на нее открывалась другая страница

    Ответить
    • Виталий Кириллов:

      Можно, это есть в статье.

      Ответить
  47. Юрий:

    Лучший вариант бегущей строки для WordPress на сегодняшний день — это liMarqueeWP
    codecanyon.net/item/limarqueewp-horizontal-and-vertical-scrolling-of-text-and-image-and-html-code/16617917

    Ответить
  48. Елена:

    Как сделать, чтобы движение картинки останавливалось по центру блока.То есть 50% блока и еще 200px (при ширине картинки 400px).

    Ответить
    • Виталий Кириллов:

      Читайте тут.

      Ответить
  49. Елена:

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

    Ответить
  50. Валерий:

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

    Ответить
  51. Татьяна:

    Спасибо большое! Отличная статья, воспользуюсь Вашим кодом. Лента с картинками и ссылками на них — классно, надо будет тоже попробовать…

    Ответить
  52. Сергей:

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

    Ответить
  53. дмитрий:

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

    Ответить
    • Виталий Кириллов:

      Вот тут почитай.

      Ответить
  54. Василий:

    Текст не движется. Для эксперимента копировал ваш тек с кодом и вставлял, бесполезно. Наверное не поддерживается движущаяся строка.

    Ответить
  55. Михаил:

    Здравствуйте, Виталий!
    Почему у меня WordPress обрезает тег (Бегущая строка). То есть пред просмотр нормально, а при сохранении получается (Бегущая строка на сайте)

    Ответить
  56. Михаил:

    Здравствуйте!
    Почему WordPress обрезает тег — ? Ставлю Ваш код (Бегущая строка), сохраняю. Пред просмотр… Срока на двигается. Возвращаюсь в админку, тег — нет, осталось только текст «Бегущая строка».

    Ответить
    • Виталий Кириллов:

      Решение должно быть надо гуглить. Вы не переключайте режимы редактора при использовании тега и публикуйте в режиме «Текст».

      Ответить
  57. Ольга:

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

    Ответить
  58. Виктор:

    Здравствуйте, Виталий. Очень интересный и полезный материал! Написано очень доступно и главное, что всё работает на сайтах, хоть joomla, хоть wordpress, особенно полезен для новичков. Спасибо огромное за материал. Успехов вам и продвижения!

    Ответить
  59. леврон:

    Подскажите пожалуйста!
    Только у меня где-то 10 картинок. Не нравится т,о что движение этих картинок начинается с правой стороны но не в таблице, потом уже заходят в таблицу..что нужно сделать чтобы движение было в таблице? подскажите если можно

    Ответить
  60. Роман:

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

    Ответить
  61. Мария:

    Добрый день! Интересная статья, но остался один вопрос в первом и во втором варианте возможно ли добавить ссылку на слова в тексте? Если да то подскажите пожалуйста как это сделать?

    Ответить
  62. Roman:

    Довольно интересная статья, добавил в закладки браузера

    Ответить
  63. e-lub:

    Здравствуйте, Виталий.
    Все здорово за исключением того, что мне это не подходит :-). Мне нужно, чтобы текстовая строка «бежала» по картинке. Когда я увеличил height, думал высота перекроект картинку. Но она ее просто отодвинула вниз…
    Возможна ли доработка бегущей строки?

    Ответить
  64. e-lub:

    Здравствуйте, Виталий.
    Ищу способ написать бегущую текстовую строку поверх неподвижной картинки. Прошу помощи

    Ответить
    • Виталий Кириллов:

      Вы пробовали картинку через css подключить?

      Ответить
  65. Александр:

    Здравствуйте! Помогите пожалуйста с html кодом бегущей строки. Нужно зафиксировать бегущую строку наверху экрана, чтобы при пролистывании она также передвигалась. Буду очень благодарен)

    Ответить
  66. Ярослав:

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

    Ответить
    • Виталий Кириллов:

      Нет Ярослав, к сожалению нельзя.
      Используйте css (статья), там боле тонкие настройки.

      Ответить
  67. Мурат:

    Здравствуйте! Я создаю страницу HTML и у меня есть пункты меню, которые находятся вверху. Как сделать так, чтобы если я опускал и смотрел контент, со мной опускалось или поднималось меню?(Было подвижным: я вниз, а оно со мной.)

    Ответить
    • Виталий Кириллов:

      В двух словах не объяснишь. В сети есть материалы на эту тему. Ищите по запросу «фиксация меню».

      Ответить
  68. Evgeny:

    Отличная статья, спасибо огромное очень полезный урок.

    Ответить
  69. Дмитрий:

    Здравствуйте. Подскажите как добавить остановку прокрутки текста когда пользователь наводит курсор на ссылку в прокручиваемом тексте?

    Ответить
  70. Святослав Мишальченко:

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

    Ответить

Оставить комментарий

Внимание комментатор! Прежде чем вставить: HTML, JavaScript или PHP код в свой комментарий, преобразуй его в html сущность!

Subscribe without commenting

» Подписаться на комментарии по RSS