Как сделать бегущую строку и бегущее изображение в дневнике.
Часто при написании своего сайта, или его управлением, возникает потребность установить на сайт бегущую строку . Такой элемент дизайна привлекает внимание посетителей на нужные разделы сайта, а также может выделить определенную информацию на передний план, что даст возможность первоочередного просмотра нужной темы. В бегущей строке можно показывать рекламные обьявления, изображения, смайлики, баннеры и т. д.
Сама бегущая строка создается тегом < marquee > текст , а точнее создаёт динамический эффект автоматического скроллинга. Тег MARQUEE - блочный контейнер, аналогичный тегам P DIV SPAN, в который помещается нужная информация для отображения. Все моменты рассматривать довольно долго и сложно для начала, но здесь ниже будут показаны основные моменты для управления бегущей строкой и показаны примеры, на которых можно тренироваться.
Стандартная запись бегущей строки такая -
< marquee >
текст внутри блока, или изображение, или несколько изображений, или ссылки
,
соответствует такой записи -
< marquee behavior="scroll" direction="left" loop="-1" scrollamount="6" scrolldelay="0" > наполнение... < /marquee >
Атрибуты тега MARQUEE.
|
direction=" "
- атрибут устанавливающий направление скроллинга:
Значения: left - движение справа налево (по умолчанию) right - движение слева направо up - движение снизу верх down - движение сверху вниз |
behavior=" "
- атрибут устанавливающий тип скроллинга:
Значения: scroll - скроллинг в одном из заданных направлений (по умолчанию) slide - одноразовый скроллинг с остановом контента alternate - возвратно-поступательный скроллинг |
width=" " - устанавливает ширину блока для строки height=" " - устанавливает высоту блока hspace=" " - отступа в пикселях от вертикальных границ блока vspace=" " - отступ в пикселях от горизонтальных границ блока |
bgcolor=" "
|
loop=" " - определяет количество циклов перемещения "-1" или "infinite" - безконечное перемещение наполнения в блоке "N" - целое число, задающее количество показов в блоке |
bgcolor=" "
- атрибут устаналивающий параметр цвета фона скроллинга |
Атрибут scrollAmount - устанавливает скорость движения строки.
Примеры бегущей строки.
простая строка - по умолчаниюзаданные размеры блока строки
меняем фон блока
движение слева направо
постоянное движение
снизу вверх
Сверху вниз
меняем скорость на маленькую
медленное движение текста снизу вверх и наоборот
строка со ссылкой на
HTML - код примеров бегущей строки.
простая строка - по умолчанию заданные размеры блока строки меняем фон блока движение слева направо постоянное движение снизу вверх сверху вниз меняем скорость на маленькую медленное движение текста снизу вверх и наоборот строка со ссылкой на
Вот такие простые примеры бегущей строки , а проявив фантазию, или определив цели для использования текстов в таком блоке, можно придумать довольно невероятные варианты написания бегущих строк для своих сайтов.
по материалам сайта
Всего комментариев - 2 . Можете оставить свой комментарий.
Роман 2012-08-09 20:45:46 сайт автора -
Спасибо! Классная штука!
Antonina 2012-12-05 11:38:33 сайт автора - http://prosuperdom.com
Спасибо за замечательную подборку строк. Разместила у себя на сайте строку со ссылкой. Правда,сначала текст бежал под зеленой строчкой. Увеличила ширину, стал бежать по строчке. Когда изменила текст ссылки, она поднялась вверх и пришлось снова уменьшать ширину. Вот такие вот пришлось проделать манипуляции. Но строчку удалось установить в конкретную статью. А как сделать строчку просто на главной странице сайта,если он на Вордпрессе. Куда вставлять необходимый код? Если можно, подскажите, пожалуйста. Добро пожаловать в гости!
Будет не совсем обычный урок. Речь пойдет об анимации.
Нет, в фотошопе мы разбираться на будем, обойдемся старым добрым 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.
Если Вам понравилась статья, поделитесь с друзьями в соц сетях. А если вдруг будут вопросы, то задавайте их в комментариях. Удачи!
Бегущая строка в тексте документа является одним из легких способов оживить 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 пикселей в ширину. Определена бесконечная прокрутка текста, текст перемещается слева направо и имеет ярко-голубом фоне.
А так выглядит результат этого кода:
Пример берущей строки.
Всем привет. Сегодня я покажу вам 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, что я собственно и сделал (отступы, цвет, фон и т.д.)
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Тег
Первоначально тег
