Домой / Вопрос/Ответ / Как сделать бегущую строку на сайте?

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

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

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

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


А в добавок Вы узнаете о том, как создать анимацию на сайте, без применения фотошоп! Просто применив HTML код и специальный тег. О котором я Вам по-секрету сегодня расскажу!

Начнем...

 

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

 
Все наверное видели рекламу бегущую строку, по телеку, в городе на вывесках? Да где ее только нет! Конечно видели и кто-то думаю, многие захотели ее применить себе на сайт блог! Но подумали, тут же «Да это наверное очень сложно?» Ничего подобного! Все до смешного просто и выполнимо! Я Вам сейчас расскажу и покажу...

 

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

 
Есть очень замечательный тег, который наверное почти всем известен, но не все его помнят и используют!

 
Вот он: «marquee»

 
А вот так мы сделаем, чтобы стока двигалась:

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

 
Теперь давайте сделаем нашу надпись цветной и более симпатичной! Как это сделать? Сейчас покажу:

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

 
А давайте сделаем эту бегущую строку, наоборот! Справа на лево:

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

 
А теперь снизу вверх:

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

 

 
Ну, а если сверху вниз:

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

 

 
Завораживает! Не правда ли? Давайте увеличим скорость нашей бегущей строки!

 

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

 

 
Придадим медленный и плавный ход бегущей строке:

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

 
Давайте дадим нашей бегущей строке дойти до границы блока и остановиться:

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

 
Сделаем, чтобы бегала туда сюда от границ блока:

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

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

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

 

 
Давайте сделаем бегущую строку на цветном фоне в рамочке:

 

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

 

 
Теперь в другую сторону и на белом фоне поместим нашу бегущую строку:

 

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


 

 
Давайте теперь с Вами сделаем небольшой бегущую строку — мультик «анимашку»:
 

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

 
Может Вам нужен слайдер? Запросто можно его сделать! Без применения плагина:

 
при помощи HTMLпри помощи HTMLпри помощи HTMLпри помощи HTMLпри помощи HTML
 

 
Или слайдер со ссылками? Нет проблем! Делаем:

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

 
Все делается очень просто. Вы не подумайте, я вам не вру! Ниже находится материал, в котором все коды HTML данных мной выше способов «Как сделать бегущую строку?», а также «анимашек» и слайдеров.

 
Пользуйтесь на здоровье! Говорите спасибо нажав на кнопочки «Поделиться в соцсетях!»

 

Сделать бегущую строку простую:

<marquee>Как сделать бегущую строку?</marquee>
__________________________________________

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

<marquee style="color: #C91A4C; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Как сделать бегущую строку?</marquee>

__________________________________________

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

<marquee direction="right" style="color: #C91A4C; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Как сделать бегущую строку?</marquee>

__________________________________________

Движение бегущей строки снизу вверх:

<marquee direction="up" style="color: #C91A4C; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Как сделать бегущую строку?</marquee>

__________________________________________

Движение бегущей строки сверху вниз:

<marquee direction="down"  style="color: #C91A4C; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Как сделать бегущую строку?</marquee>

__________________________________________

Можно увеличить скорость бегущей строки:

<marquee scrollamount="30" direction="down" style="color: #C91A4C; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Как сделать бегущую строку?</marquee>

__________________________________________

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

<marquee scrollamount="1" style="color: #C91A4C; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Как сделать бегущую строку?</marquee>

__________________________________________

Бегущая строка доходит до границы блока и останавливается:

<marquee behavior="slide" scrollamount="10" style="color: #C91A4C; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Как сделать бегущую строку?</marquee>

__________________________________________

Туда сюда от границ блока:

<marquee behavior="alternate" scrollamount="10" style="color: #C91A4C; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Как сделать бегущую строку?</marquee>

__________________________________________

Сделать бегущую строку в разные стороны:

<marquee width="49%" style="color: #C91A4C; 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>

__________________________________________

На цветном фоне сделать бегущую строку:

<marquee bgcolor="#9AFF9A" width="300" height="300" scrollamount="12" direction="down" style="border: 2px solid #000000; color: #C91A4C; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Как сделать бегущую строку?</marquee>

__________________________________________

На белом фоне сделать бегущую строку:

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

__________________________________________

Простая анимашка:

<marquee direction="right"><img src="Путь до катринки" /></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>

 

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

 
Не забудьте подписаться на новости! Получите БЕСПЛАТНО видеокурс «Создать блог на WordPress за 1 час»

 



Про Валерий Бородин

Проверьте также

как отключить рекламу в utorrent

Как отключить рекламу в uTorrent? Узнай прямо сейчас!

Простые два способа как отключить рекламу в uTorrent! Здравствуйте, уважаемые друзья и гости блога! Сегодня …

  • Владимир

    Здравствуйте! Всё это интересно, но не совсем понятно как,например, вставить скопированный код в музыкальную открытку.

    • https://pribylwm.ru/ Валерий Бородин

      Если Вы знаете, где должна быть строка, то ничего сложного тут нет!

Блог Валерия Бородина: LiveInternet число посетителей за сегодня Блог Валерия Бородина: данные за сегодня (Yandex.Metrika) Блог Валерия Бородина: рейтинг МайлРу