bonuswm.org - сервис раздачи бонусов webmoney

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

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

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

На этой странице вы узнаете как сделать бегущую строку у себя на сайте!


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

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

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

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

Вот он: «marquee»


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

Сделать бегущую строку простую:
Как сделать бегущую строку?
__________________________________________
Сделать бегущую строку с движением вправо:
Как сделать бегущую строку?
__________________________________________
Сделать бегущую строку с движением влево:
Как сделать бегущую строку?
__________________________________________
Движение бегущей строки снизу вверх:
Как сделать бегущую строку?
__________________________________________
Движение бегущей строки сверху вниз:
Как сделать бегущую строку?
__________________________________________
Можно увеличить скорость бегущей строки:
Как сделать бегущую строку?
__________________________________________
Сделать бегущую строку медленной и плавной:
Как сделать бегущую строку?


HTML коды

  1. Сделать бегущую строку простую:
  2. <marquee>Как сделать бегущую строку?</marquee>
  3. __________________________________________
  4. Сделать бегущую строку с движением вправо:
  5. <marquee style=“color: #C91A4C; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;”>Как сделать бегущую строку?</marquee>
  6. __________________________________________
  7. Сделать бегущую строку с движением влево:
  8. <marquee direction=“right” style=“color: #C91A4C; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;”>Как сделать бегущую строку?</marquee>
  9. __________________________________________
  10. Движение бегущей строки снизу вверх:
  11. <marquee direction=“up” style=“color: #C91A4C; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;”>Как сделать бегущую строку?</marquee>
  12. __________________________________________
  13. Движение бегущей строки сверху вниз:
  14. <marquee direction=“down” style=“color: #C91A4C; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;”>Как сделать бегущую строку?</marquee>
  15. __________________________________________
  16. Можно увеличить скорость бегущей строки:
  17. <marquee scrollamount=“30” direction=“down” style=“color: #C91A4C; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;”>Как сделать бегущую строку?</marquee>
  18. __________________________________________
  19. Сделать бегущую строку медленной и плавной:
  20. <marquee scrollamount=“1” style=“color: #C91A4C; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;”>Как сделать бегущую строку?</marquee>
  21. __________________________________________
  22. Бегущая строка доходит до границы блока и останавливается:
  23. <marquee behavior=“slide” scrollamount=“10” style=“color: #C91A4C; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;”>Как сделать бегущую строку?</marquee>
  24. __________________________________________
  25. Туда сюда от границ блока:
  26. <marquee behavior=“alternate” scrollamount=“10” style=“color: #C91A4C; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;”>Как сделать бегущую строку?</marquee>
  27. __________________________________________
  28. Сделать бегущую строку в разные стороны:
  29. <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>
  30. __________________________________________
  31. На цветном фоне сделать бегущую строку:
  32. <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>
  33. __________________________________________
  34. На белом фоне сделать бегущую строку:
  35. <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>
  36. __________________________________________
  37. Простая анимашка:
  38. <marquee direction=“right”><img src=“Путь до катринки” /></marquee>
  39. __________________________________________
  40. Простой слайдер:
  41. <marquee direction=“right” scrollamount=“10”><img src=“Путь до картинки №1”/><img src=“Путь до картинки №2” /><img src=“Путь до картинки №3”/><img src=“Путь до картинки №4”/><img src=“Путь до картинки №5”/></marquee>
  42. __________________________________________
  43. Каждую картинку в слайдере сделать ссылкой:
  44. <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>

Автор

admin

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

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.