Здравствуйте, дорогие друзья и гости моего блога! Снова приветствую Вас у себя на страницах. Если Вы зашли сюда, значит Вам нужен полезный совет по вопросу:
Вы правильно сделали свой выбор, посетив мой блог!
Сейчас я Вам расскажу и покажу, как сделать бегущую строку на сайте
, например как у меня. Или другую. Вариантов Вам предложу кучу.
А в добавок Вы узнаете о том, как создать анимацию на сайте, без применения фотошоп! Просто применив HTML код и специальный тег. О котором я Вам по-секрету сегодня расскажу!
Все наверное видели рекламу бегущую строку, по телеку, в городе на вывесках? Да где ее только нет! Конечно видели и кто-то думаю, многие захотели ее применить себе на сайт блог! Но подумали, тут же «Да это наверное очень сложно?» Ничего подобного! Все до смешного просто и выполнимо! Я Вам сейчас расскажу и покажу...
Как сделать бегущую строку на сайте при помощи HTML кода!!!
Есть очень замечательный тег, который наверное почти всем известен, но не все его помнят и используют!
Вот он : «marquee»
А вот так мы сделаем, чтобы стока двигалась:
Теперь давайте сделаем нашу надпись цветной и более симпатичной! Как это сделать? Сейчас покажу:
Как сделать бегущую строку?
А давайте сделаем эту бегущую строку, наоборот! Справа на лево:
Как сделать бегущую строку?
А теперь снизу вверх:
Как сделать бегущую строку?
Ну, а если сверху вниз:
Как сделать бегущую строку?
Завораживает! Не правда ли? Давайте увеличим скорость нашей бегущей строки!
Как сделать бегущую строку?
Придадим медленный и плавный ход бегущей строке:
Как сделать бегущую строку?
Давайте дадим нашей бегущей строке дойти до границы блока и остановиться:
Как сделать бегущую строку?
Сделаем, чтобы бегала туда сюда от границ блока:
Как сделать бегущую строку?
Или вдруг Вам нужно сделать бегущую строку, разбегающуюся от центра в разные стороны:
Как сделать бегущую строку? Как сделать бегущую строку?
Давайте сделаем бегущую строку на цветном фоне в рамочке:
Как сделать бегущую строку?
Теперь в другую сторону и на белом фоне поместим нашу бегущую строку:
Как сделать бегущую строку?
Давайте теперь с Вами сделаем небольшой бегущую строку — мультик «анимашку»:
Может Вам нужен слайдер? Запросто можно его сделать! Без применения плагина:
Все делается очень просто. Вы не подумайте, я вам не вру! Ниже находится материал, в котором все коды HTML данных мной выше способов «Как сделать бегущую строку?», а также «анимашек» и слайдеров.
Сделать бегущую строку простую: __________________________________________ Сделать бегущую строку с движением вправо: __________________________________________ Сделать бегущую строку с движением влево: __________________________________________ Движение бегущей строки снизу вверх: __________________________________________ Движение бегущей строки сверху вниз: __________________________________________ Можно увеличить скорость бегущей строки: __________________________________________ Сделать бегущую строку медленной и плавной: __________________________________________ Бегущая строка доходит до границы блока и останавливается: __________________________________________ Туда сюда от границ блока: __________________________________________ Сделать бегущую строку в разные стороны: __________________________________________ На цветном фоне сделать бегущую строку: __________________________________________ На белом фоне сделать бегущую строку: __________________________________________ Простая анимашка: __________________________________________ Простой слайдер: __________________________________________ Каждую картинку в слайдере сделать ссылкой:
Спасибо! Всегда к Вашим услугам Валерий Бородин. Пишите свои вопросы в комментариях, отвечу всем!
В этой статье я расскажу о том как сделать бегущую строку на сайте с помощью специального тега HTML -
На мой взгляд, бегущие строки в нынешних условиях вообще лучше не использовать. В крайних случаях их можно использовать лишь для лучшей видимости важной информации (например, актуальные акции, скидки). Есть масса других современных способов как можно донести до пользователя полезную информацию (flash-анимация, баннеры).
Также стоит отметить, что есть и другой способ создания бегущей строки помимо тега marquee. Этот способ реализуется через JavaScript, но из-за нецелесообразности его применения (он нагружает страницу), мы даже не станем его рассматривать.
HTML тег
Итак, в HTML есть специальный тег для создания бегущей строки: . У него есть множество атрибутов с параметрами, которые довольно просты, поэтому проблем с настройками не должно возникнуть. Ниже я разберу подробно все атрибуты и параметры тега marquee. Кстати, в него можно заключать не только текст, но и изображение и другие элементы сайта. Поэтому эта статья отвечает ещё и на вопрос как сделать бегущее изображение, объект и т.п.
Синтаксис тега
Атрибуты и параметры
1. width="число/процент" - задает ширину бегущей строки в пикселях/процентах. Те, кто знаком с html наверняка знакомы с таким атрибутом. Например:
- width="240px" - задает ширину в 240 пикселей;
- width="40%" - задает ширину в 40% в зависимости от ширины блока, в котором находится объект;
2. height="число/процент" - задает высоту бегущей строки в пикселях/процентах. Пример можно привести такой же как и с первым атрибутом. Например:
- height="400px" - задает высоту в 400 пикселей;
- height="30%" - задает высоту в 30% в зависимости от высоты блока, в котором находится объект;
Примечание : если бегущая строка состоит только из одной строки, то высоту можно не указывать, поскольку она автоматически определиться в зависимости от размера шрифта, который задается параметром font-size: Npx .
3. bgcolor="цвет" - задает цвет фона контейнера. Выбрать цвет можно на странице: коды html цветов . Примечание : если атрибут bgcolor не задан, то по умолчанию фоном будет цвет фона страницы.
4. behavior="параметр"
- это один из самых важных атрибутов бегущий строки. Он задает поведение бегущей строки. Имеет довольно много различных вариантов:
. alternate
- бегущая строка перемещается циклично: справа налево, далее слева направо (бегает между краями). Например:
А так эта строка выглядит на сайте:
Строка с атрибутом behavior="alternate"
Scroll - бегущая строка перемещается за пределы области в том направлении, которое указывает атрибут direction (с параметром), а далее циклично повторяется. На мой взгляд этот вариант встречается чаще всего. Например:
. slide - очень похож на scroll, однако в конце строка останавливается и больше не повторяется. Например:
Строка с атрибутом behavior="slide" direction="right"
5. direction="параметры"
- задает направление движения бегущей строки. Может принимать следующие значения:
. down
- движение сверху вниз. Например:
Строка с атрибутом behavior="scroll" direction="down"
. up - движение снизу вверх. Например:
Строка с атрибутом behavior="scroll" direction="up"
. left - движение справа налево. Примечание: left установлено по умолчанию. Например:
Строка с атрибутом behavior="scroll" direction="left"
. right - движение слева направо. Например:
Строка с атрибутом behavior="scroll" direction="right"
6. hspace="число" - задает отступ строки по горизонтали до других объектов. Аналогичный атрибут есть у популярного тега img .
7. vspace="число" - задает отступ по вертикали до других объектов.
8. loop="число" - какое количество раз нужно прокрутить содержимое. В параметре указывается число, которое и задает количество повторений. Примечание: число -1 означает бесконечный цикл прокрутки. По умолчанию установлено -1.
9. scrollamount="число" - скорость движения бегущей строки. Число задает количество пикселей, на которое переместиться объект за один такт. Примечание: по умолчанию скорость равна 6 пикс./сек. Например:
Строка с атрибутом scrollamount="10"
10. scrolldelay="число" - задает задержку между шагами бегущей строки в миллисекундах. Например:
Строка с атрибутом scrolldelay="500"
Напоследок приведу 2 примера использования бегущих строк. Пример с использованием объекта div:
Бегущий элемент div
Пример бегущего изображения:
Будет не совсем обычный урок. Речь пойдет об анимации.
Нет, в фотошопе мы разбираться на будем, обойдемся старым добрым 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 можно создать простенький слайдер:
анимированные фавиконы различные баннеры и слайдеры. Анимация широко используется на сайтах.
Я же показал Вам самый простой способ анимации, с помощью тега marquee.
Если Вам понравилась статья, поделитесь с друзьями в соц сетях. А если вдруг будут вопросы, то задавайте их в комментариях. Удачи!
Всем привет. Сегодня я покажу вам 1 быстрый способ, как делается в html бегущая строка. Для этого мы будем использовать тег marquee, который позволяет перемещать не только текст, но и строки. Но мы ограничимся текстом.
Тег marquee и его атрибуты
На самом деле с помощью этого тега сделать бегущую строку невероятно просто. Смотрите на код:
Все мы, вебмастера и разработчики, постоянно работаем с сайтами. Хотел бы вам порекомендовать площадки, которыми пользуюсь сам:
- Reg.ru - здесь регистрирую и продлеваю доменные имена, очень надежная компания!
- HostIQ - хостинг премиум качества.
- Ihor - более бюджетный, но тоже очень качественный хостинг-провайдер.
- Telderi.ru - единственная надежная биржа в рунете, на которой можно купить готовые сайты с доходом!
Через css настроим фоновый цвет, цвет текста и размер шрифта.
marquee{
background: #246B5C;
font-size: 22px;
color: #fff;
}
И вот он уже результат:
Здесь может быть ваша реклама
А теперь разбираемся с атрибутами. Во-первых, это direction . Мы указали right , но можно также указать left , тогда движение будет начинаться с правого конца и идти в левый. Кроме этого, движение может быть вверх и вниз (up и down). Можете сами протестировать разные значения.
Не менее важным является атрибут behavior , который определяет тип движения. У него есть три значения:
- scroll — содержимое доходит до края, заходит за край и появляется вначале, начиная движение заново.
- alternate — содержимое не выходит за края, перемещаясь внутри них.
- slide — контент перемещается один раз в указанную сторону, доходит до края и останавливается.
Какие еще есть атрибуты (необязательные):
- scrollamount — скорость движения строки. Задается в пикселах без px, только числом. По умолчанию стоит 6 пикселей. Вы можете поставить больше и меньше, чтобы протестировать в работе это значение.
- loop — кол-во повторений движений. Задается любым положительным числом. Если атрибут не прописывать, будет бесконечное кол-во повторений.
В общем-то, это все атрибуты, которые вам надо знать, чтобы управлять бегущей строкой. Все остальное можно настроить через css, что я собственно и сделал (отступы, цвет, фон и т.д.)
Бегущая строка в тексте документа является одним из легких способов оживить Web-страницу. Бегущие объекты всегда привлекают внимание, и пользователь обязательно прочтет что там написано. Так же бегущую строку можно применять, там где мало места. Но не следует злоупотреблять экономией места. Помните, что посетитель может просто не дождаться, когда в бегущей строке отобразится весь текст сообщения.
Бегущая строка создаётся с помощью контейнера тэгов ... со следующими атрибутами:
- width="..." - ширина бегущей строки в пикселях или процентах от ширины экрана.
- height="..." - высота бегущей строки в пикселях или процентах. (Если вы делаете бегущую строку в одну строчку, то можно высоту не указывать, она сама подбирается под размер букв).
- bgcolor="..." - определяет цвет фона бегущей строки.
- behavior="..."
задает тип движения (поведение) бегущей строки и
имеет следующие значения:
- scroll - циклическая прокрутка текста из одного конца в другой Бегущая строка
- slide - текст появляется с одного края и останавливается у другого. Бегущая строка
- alternate - текст перемещается от одного края к другому и обратно. Бегущая строка
- direction="..."
- определяет направление движения бегущей строки.
Имеет следующие значения:
- left - текст движется влево по строке Бегущая строка
- right - текст движется вправо по строке Бегущая строка
- up - вся строка перемещается снизу вверх Бегущая строка
- down - строка движется сверху вниз Бегущая строка
- scrollamount="..."
- шаг перемещения в строке в пикселах, на
который перемещается текст за заданный интервал времени. Например:
Бегущая строка - scrollamount="1"
Бегущая строка - scrollamount="2"
Бегущая строка - scrollamount="2" - scrolldelay="..."
- Этот атрибут задаёт временной интервал между
шагами бегущей строки в миллисекундах. Например:
Бегущая строка - scrolldelay="100"
Бегущая строка - scrolldelay="200"
Бегущая строка - scrolldelay="300" - loop="..." - задаёт число проходов текста бегущей строки. По умолчанию или при указании значения -1 (infinite) броузер будет прокручивать текст бесконечное число раз.
- hspace="..."
- Этот атрибут задает поле в пикселах справа и слева
от бегущей строки.
Бегущая строка - hspace="10"
Бегущая строка - hspace="0" - vspace="..."
- Этот атрибут задает отступ в пикселах выше и ниже
бегущей строки.
Бегущая строка - hspace="0"
Бегущая строка - hspace="10"
Ниже приведен пример кода для бегущей строки размеро 50 пикселей в высоту и 250 пикселей в ширину. Определена бесконечная прокрутка текста, текст перемещается слева направо и имеет ярко-голубом фоне.
А так выглядит результат этого кода:
Пример берущей строки.
