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

Вы хотите знать, как сделать бегущую строку на сайте самостоятельно? Руководство здесь!

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

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

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

Начнем…

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

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

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

Вот он: “marquee”

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Все делается очень просто. Вы не подумайте, я вам не вру! Ниже находится материал, в котором все коды 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 час”