Всем привет! Сегодня на seo-mayak.com будет не совсем обычный урок. Речь пойдет об анимации.
Нет, в фотошопе мы разбираться на будем, обойдемся старым добрым HTML и научимся делать несколько анимационных фокусов.
Анимация для сайта забавная штука, скажу я Вам, но почему-то редко применяемая, хотя сложного вообще ничего нет.
Я думаю, что многие веб-мастера просто не знают о существовании специального тега, который приводит в движение текст и оживляет картинки.
Фотошоп — великая сила, кстати скоро выйдет серия бесплатных видео уроков по анимации картинок, так что подписывайтесь на обновления блога.
Многие вещи можно анимировать без применения фотошопа, средствами обычного HTML, но давайте обо всем по-порядку. Поехали!
Как на сайте сделать бегущую строку с помощью HTML
Итак, знакомьтесь! Волшебный тег — <marquee>. Изначально этот тег был разработан для браузера Internet Explorer, но со временем и другие браузеры стали поддерживать его применение.
Давайте заставим строку двигаться. Для этого в редакторе WordPress, в HTML режиме вставляем следующее:
<marquee>Бегущая строка</marquee>
Вуаля
Невероятно, но строчка стала двигаться. Теперь давайте сделаем строчку немного заметнее, добавив стили.
<marquee style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Применив атрибут direction со значением right мы изменим направление движения бегущей строки и она будет двигаться справа налево:
<marquee direction="right" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
По умолчанию тегу <marquee> присвоен атрибут direction со значением left, поэтому строчка без применения атрибутов движется слева направо.
Подставив значение up для атрибута direction мы заставим строчку двигаться снизу вверх:
<marquee direction="up" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Значение down укажет строчке двигаться сверху вниз
<marquee direction="down" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Мне кажется надо увеличить скорость прокрутки бегущей строки, для этого мы используем атрибут scrollamount. В кавычках указываем число от 1. Например:
<marquee scrollamount="30" direction="down" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Теперь давайте немного остановимся и разберемся как работает тег <marquee>.
Анимация происходит за счет постоянного затирания информации и отображения ее на новом месте. С помощью значений для атрибута <marquee> мы устанавливаем расстояние в пикселях между стертым и новым положением строчки, тем самым влияя на скорость и плавность ее движения.
По молчанию стоит значение 6, но если задать значение 1, то расстояние между старым и новым положением строчки будет равняться 1 пикселю, что обеспечит медленный и плавный ход бегущей строки:
<marquee scrollamount="1" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Атрибут behavior задает способ прокрутки внутри заданного блока и по умолчанию имеет значение scroll, что заставляет бегущую строчку скрываться из виду и начинать движение сначала.
Но если подставить значение alternate, то строчка не будет скрываться из виду, а дойдя до границ блока начнет движение в обратную сторону:
<marquee behavior="alternate" scrollamount="10" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Значение slide для атрибута behavior дает команду бегущей строчке дойти до границы блока и остановиться:
<marquee behavior="slide" scrollamount="10" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Атрибут height задает высоту блока. По умолчанию стоит 12 пикселей, но давайте ее изменим и немного добавим к скорости прокрутки бегущей строки:
<marquee height="100" direction="up" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Атрибут width отвечает за ширину блока. Можно применять атрибуты width и height вместе, чтобы задать желаемые границы блока. Для наглядности добавим рамку в стили и чуть-чуть замедлим скорость прокрутки:
<marquee width="300" height="300" scrollamount="15" direction="up" style="border: 2px solid #000000; color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Теперь давайте зададим фон для бегущей строки. Для этого применим атрибут bgcolor и поставим для него желтый цвет фона:
<marquee bgcolor="#F5FF37" width="300" height="300" scrollamount="12" direction="down" style="border: 2px solid #000000; color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Теперь попробуем сделать так, чтобы бегущая строка двигалась в разные стороны.
<marquee width="49%" style="color: #D9470D; 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>
Устанавливаем время задержки анимации с помощью атрибута scrolldelay, подставляя числовые значения. По умолчанию стоит 80 миллисекунд:
<marquee scrolldelay="30" style="color: #D9470D; font-size: 40px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Атрибут scrolldelay — это еще один инструмент, с помощью которого мы можем регулировать скорость прокрутки.
Анимация изображений на сайте
Простой пример анимации изображения:
<marquee direction="right"><img src="Путь до катринки" /></marquee>
Конечно сама картинка анимирована в фотошопе, но мы ее заставили перемещаться по странице, создавая эффект движения.
Вот еще интересный пример, с помощью тега 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>
До встречи!
C уважением, Виталий Кириллов
Статьи по теме:
CSS анимация — свойство animation.
Вот это да! Супер! Я такого не знала, думала, что все нужно делать в фотошопе)) Обязательно воспользуюсь! Спасибо большое))
Пожалуйста Елена! Я думаю многие не знают про существование тега marquee.
Вот это супер!!! Вот результат
work-rub.ru/top_reyting.phpПлывущий банер заметно оживляет сайт! Спасибо автору!
Извините, если я Вас обижу. Но не могу пройти мимо. А в классном плывущем баннере, оживляющем сайт, специально так много орфографических ошибок? Не очень хочется переходить дальше по сайту, если даже немногословный баннер содержит столько ошибок в словах, отсутствуют пробелы между словами и т.д.
Автору Спасибо огромное! Всего 2-3 часа и статическая страница сайта заметно оживилась:
bitstyle.ruИ это чистый HTML! Также немного подрос приток целевых посетителей в мои проекты… Еще раз — БОЛЬШОЕ СПАСИБО!Спасибо. Очень интересная статья, способ действительно простой но можно хорошо использовать для привлечения внимания посетителя сайта.
Согласен, внимание посетителей бегущая строка точно привлечет.
Дело не в том, что не знают.. я, например, с самого начала постижения азов HTML читала, что использования подобного рода оформления текста плохой тон, и с тех пор даже не задумывалась о его применении.
Может, это прикольно и интересно, но нужно к этому относиться с большой осторожностью. Лично меня раздражают сайты со слайдерами, нельзя толком ничего рассмотреть. А бегущие строки.. вообще не знаю, где это может быть уместно.
Анимация вообще отвлекает, например, невозможно читать текст там, где анимированная картинка (как у Вас). Мне кажется, что веб-дизайнер, который вставляет такие картинки, не заботится о своем читателе.
Но за урок спасибо!
Наталья, понятно, что всему надо знать меру. У меня получилась вся статья анимированная, а не только картинка, но это ради наглядности.
Как известно на вкус и цвет товарищей нет и я думаю, что «разумная» анимация не должна повредить сайту. Возможно не для каждой тематики анимация будет к месту, но что это плохой тон, я не согласен.
Виталий, я не про статью.. это понятно, что Вы приводили примеры, и на них даже было интересно смотреть, как они двигаются в разных направлениях)
Я имела ввиду анимированную картинку в начале поста. Рядом с ней текст читать невозможно. Приходится экран прокручивать так, чтобы она исчезла, а потом читать
Моей дочке картинка понравилась)) Интересно, что скажут другие читатели.
Мне тоже интересно, Виталий.. это же субъективное мнение)
Вот случайно наткнулась на сайт, где бегущая строка очень даже уместна: marketmovers.it И оформлена достаточно изящно (та, которая вверху)
Согласен, бегущая строка выглядит естественно.
Приветствую, Виталий!
Статья очень интересная. О теге marquee тоже ничего не слышал.
Конечно, применять бегущую строку или слайдер нужно только там, где это действительно уместно.
Здравствуйте Александр! Всегда надо делать все с умом.
Виталий, как всегда интересная статья. О бегущей строке знал, даже эксперементировал с ней. Прочитав статью, подумал, можно использовать бегущую собачку для привлечения внимания к рекламной строчке Nollix. Или какую ни будь новость, например конкурс на блоге. Хотя когда все прыгает и скачет, мне самому не нравится. У вас на блоге все хорошо подобрано, цвета, расположение и картинки. Оформление Топ комментаторов и подписка «получай статьи почтой» нравится.
Спасибо Сергей!
Виталий, интересная статья. А можно сделать что бы не картинка двигалась, а просто оставалась на месте, но трансформировалась в другую, т.е. на одном и том же месте появлялась то одна, то другая картинка?
Наталья, сделать все можно, но это тема другой статьи.
буду ждать с нетерпением, уже приглядела две тематических картинки для своего блога.
У меня не получилось это внедрить на свои страници! Сайт под управление джумлы 2.5! Может там этот тег не работает, так как после соххранения он пропадает
Алекс, на джумлы 2.5 не проверял.
я тоже была не в курсе, что бегущую строку можно делать в фотошопе! вообще вещь хорошая, главное не увлекаться, без фанатизма, что называется.
Виталий, а как создать скрипт с этим тегом, чтобы при наведении на бегущую строку и клику на нее — был переход на другую страницу?
Можно и выглядеть это будет так:
Круто очень полезная вещь)))
У меня на сайте есть бегущая строка и довольно простая. Размещена на нескольких страницах и что бы добавить туда объявление нужно редактировать каждую страницу. Возможно ли сделать бегущую строку что бы ее можно было корректировать из одного текстового файла для каждой страницы? Буду очень признателен!
Дмитрий, возможно надо вставить код бегущей строки непосредственно в файл single.php.
Однако с этим тэгом код будет невалидным.
http: // htmlbook.ru/html/marquee
Здравствуйте!
А как сделать
Бегущая строка
так чтобы картинка задерживалась на середине а потом продолжала свой путь?
Михаил, я не знаю как это реализовать.
Спасибо за интересную статью, Виталий! marquee — это конечно хорошо, но прихожу к выводу, что надо учить JavaScript. А то топорно как-то всё это. Хотя, в некоторых случаях может выручить и marquee.
Подскажите? почему при использовании скрипта:
<a href="URL статьи №1" rel="nofollow"></a><a href="URL статьи №2" rel="nofollow"></a><a href="URL статьи №3" rel="nofollow"></a>
Картинки идут одна под другой, а не в один ряд? Как можно исправить данный скрипт, чтобы картинки шли одна за другой в одну линию? Как у вас это отображается на примере.
Большое спасибо помогли))
СУПЕР
Уважаемые! Подскажите кто знает — как сделать бегущую строку на фоне статичного изображения?
Вот на этом сайте реализовано:
http://www.platina-kostroma.ruГугл и Яндекс бессильны.
Классная статья!! Очень понравилась! =)
текст бегущий применял, скриптом красивее получается. а вот картинки интересно. сейчас попробую. отпишусь
Подскажите пожалуйста, как сделать бегущую строку из картинок, по типу вашего последнего примера, но так, чтобы картинки не прерывались а шли одна за другой беспрерывно.?
Иван, оберните данный код в блок div и задайте класс. Затем в файле style css пропишите стили для заданного класса:
.заданный класс img {
margin-left: — 5px;
}
Возможно надо будет подкорректировать значение селектора margin-left. Если не сработает, напишите, тогда я проведу эксперимент и скажу точно.
Подскажите, я можно ли сделать так, чтобы бегущая строка ВСЕГДА находилась в пределах видимости внизу экрана? Т.е сразу при открытии любой страницы она появлялась и не исчезала при скроллинге.
Влад, в программировании наверное нет ничего невозможного.
Несомненно, только как это реализовать?
Изучать языки программирования или нанять специалиста, если нет собственных знаний.
Подскажите? почему при использовании скрипта:
Картинки идут одна под другой, а не в один ряд? Как можно исправить данный скрипт, чтобы картинки шли одна за другой в одну линию? Как у вас это отображается на примере.
Использую сайт на конструкторе JIMDO
Ярослав, делается это с помощью стилей. В вашем случаи надо прописать к заданному классу так:
.заданный класс img {
float: left;
}
Ребята, а как реализовать бегущую строку как на телевидении?
Подскажите как сделать бегущую строчку чтобы одна записть сменила другую, когда 1 записть ушла за экран?
С псредствами тега marquee это врятли возможно.
Доброго времени суток! Для меня данная статья — просто находка! Я часто перерываю интернет в поисках чего-то нового, интересного и завлекательного, но это — просто бомба! Спасибо большое! Обязательно подпишусь на Вас, Виталий! Приятно иметь дело с человеком разумным, а не зарвавшимся «специалистом»! Премного благодарна!
И вам спасибо Елена на добром слове!
Виталий!
Скрипт конечно интересный…
НО! Он очень тормозит загрузку сайта
Да и посетителями различного рода плавающие и прыгающие
надписи воспринимаются не в плюс…
данный скрипт скорее отвлечет и отпугнет от контента
нежели положительно повлияет на поведенческие
Думаю для блога он точна не принесет пользы
… хотя это лично мое мнение
Алексей, каждый волен сам выбирать, мое же дело рассказать о существовании такой возможности.
Скажите пожалуйста, как увеличить скорость бегущей строки?
scrollamount=»30″, где 30 — скорость прокрутки.
И куда это вставлять scrollamount=»30″ для увеличения скорости бегущей строки? В ваших кодах я такого не нащел… В каком месте в коде нужно это вставить?
Все нашел и разобрался. Спасибо!
Тема с движением картинок по принципу бегущей строки вдохновила меня на некоторые новшества для моих сайтов. Спасибо за подкинутую идею! Обязательно это реализую.
Виталий огромное спасибо , на двух сайтах запустил бегущую строчку о поступлении новинок … Ещё раз спасибо .
У меня рамка очень высокая в отзывах, долго снизу поднимается, скажите как я могу сделать движение текста не с последней строчки , а с первой, и ответ можно на почту???
kuvera88888@mail.ruДобрый день, Виталий!
Огромное Вам спасибо за такой замечательный полезный урок! Просто СУПЕР!
Подскажите, пож-та, как для бегущей строки изменять стиль шрифта: курсив, нежирный, цвет. Где можно найти номер желаемого цвета. color: #D9470D — это красный. А темно-синий, например, или любой другой потребуется в дальнейшем.
Как изменить размер шрифта я поняла (font-size: 40px)
Добавьте, пож-та, если можно, в эту ссылку курсив и подскажите, где брать номера различных цветов.
Заранее Вас благодарю за помощь. Удачи Вам и процветания Вашему бизнесу.
С уважением, Галина
адрес ссылки, о которой идет речь: В настоящее время объявлений нет
Со всеми прежними вопросами разобралась, за что еще Вам многократное спасибо!!!
Пож-та, помогите, у самой не получается: как сделать бегущую строку НЕПРЕРЫВНОЙ?
Вставка loop=»-1″ не срабатывает.
Вот такой код я сообразила:
Всем доброго времени суток! Мы рады приветствовать Вас на нашем сайте!
Виталий, пож-та, прошу Вас, внесите требуемые изменения. Боюсь, сама я не справлюсь.
Еще раз огромное Вам спасибо.
С уважением, Галина
набираю код вручную, т.к. приего вставки в текст сообщения он преобразовыввается в текст БЕГУЩЕЙ СТРОКИ
<marquee loop="-1" scrollamount="2" style="color: #0066CC; font-size: 20px; font-weight: и т.д.
А как сделать что бы картинки расходились в разные стороны как показано в бегущей строке?
На примере с бегущей строкой все показано, просто надо картинки за место слов поставить.
ага, разобрался уже пока ждал. просто пораскинул мозгами)))) бегущие строки вставил в портал и ещё буду применять на других сайтах, благодарю за информацию
Как сделать, чтоб бегущая строка двигалась плавно, а не рывками?
Как сделать, чтоб бегущая строка двигалась плавно, а не рывками? и чтоб он не заканчиваясь повторялся сначала
Саша, а Вы не читали мою последнюю статью?
Виталий , всё это интересно и мною уже применено . Возник теперь такой вопрос , как сделать управление бегущей строки или картинки при помощи , допустим, стрелок как в слайдере ? Очень интересует этот вопрос
Доброго времени суток!
Сделала бегущую строку на сайте с баннерами. Все хорошо. Хотелось бы узнать, как сделать ту же бегущую строку, но, чтобы слайды двигались в направлении, заданном курсором (вправо-влево)?
Спасибо за статью! 🙂
Олеся, это самой простой способ анимации и с помощью тега marquee того эффекта не добьешься.
Спасибо за ответ 🙂 А Вы не подскажете, с помощью какого тэга такой эффект можно получить или где можно найти такую информацию?
Чтобы перехватить движение курсора и подстроить под него слайдер понадобится не тег, а мощный код. Поишите плагин, который имеет подобный функционал.
Вы просто супер!!!!Огромное вам спасибо!!!!!!!!
Здравствуйте Уважаемый Виталий! Просто ну большое человеческое спасибо, давно искал эту прелесть но толкового исполнения как у Вас не встречал! Спасибо Вам! С Уважением Влад.
Виталий , спасибо ! Сделала у себя на сайте рекламный блок . А вы с базами MySQL работаете? C PHP-скриптами? Или только HTML и CSS?
Приходится работать так или иначе со всем языками, другое дело, что обучению нет границ.
Спасибо за полезный урок! У меня есть такой вопрос, можно ли на анимацию сделать активную ссылку? хочется чтоб анимашка была полезной,чтоб при кликании на нее открывалась другая страница
Можно, это есть в статье.
Лучший вариант бегущей строки для WordPress на сегодняшний день — это liMarqueeWP
codecanyon.net/item/limarqueewp-horizontal-and-vertical-scrolling-of-text-and-image-and-html-code/16617917Как сделать, чтобы движение картинки останавливалось по центру блока.То есть 50% блока и еще 200px (при ширине картинки 400px).
Читайте тут.
Помогите пожалуйста, Имеется две отдельные бегущие строки на странице. Как запустить вторую после окончания движения первой (то есть с некоторой задержкой)
Виталий здравствуйте! Скажите, можно ли применить бегущую строку в плейкасте, нам бегущая строка нравится и хотели бы применить её в плейкасте, конечно если возможно. С уважением Валерий
Спасибо большое! Отличная статья, воспользуюсь Вашим кодом. Лента с картинками и ссылками на них — классно, надо будет тоже попробовать…
Скажите а возможно сделать так, что при каждом обновлении страница менялась бегущая строка на другую, или к примеру. при нажатии на нее будет идти другая строка?
если не трудно подскажи такой кодик чтоб текст появлялась и проподал и потом следущий текст и так далее. текст цветной если можно на почту
Вот тут почитай.
Текст не движется. Для эксперимента копировал ваш тек с кодом и вставлял, бесполезно. Наверное не поддерживается движущаяся строка.
Здравствуйте, Виталий!
Почему у меня WordPress обрезает тег (Бегущая строка). То есть пред просмотр нормально, а при сохранении получается (Бегущая строка на сайте)
Здравствуйте!
Почему WordPress обрезает тег — ? Ставлю Ваш код (Бегущая строка), сохраняю. Пред просмотр… Срока на двигается. Возвращаюсь в админку, тег — нет, осталось только текст «Бегущая строка».
Решение должно быть надо гуглить. Вы не переключайте режимы редактора при использовании тега и публикуйте в режиме «Текст».
Виталий, добрый день.. Случайно натолкнулась на Вашу работу о движущихся строках и текста..Как кстати!!!.Мне нужно, чтобы мой текст двигался в рамочке.. Здорово!!! мало места и установить скорость можно как пожелаешь.. С Вашего разрешения сделаю у себя в дневнике краикое сообщение о Вашей статье с ссылкой на Вас. Спасибо большое.
Здравствуйте, Виталий. Очень интересный и полезный материал! Написано очень доступно и главное, что всё работает на сайтах, хоть joomla, хоть wordpress, особенно полезен для новичков. Спасибо огромное за материал. Успехов вам и продвижения!
Подскажите пожалуйста!
Только у меня где-то 10 картинок. Не нравится т,о что движение этих картинок начинается с правой стороны но не в таблице, потом уже заходят в таблицу..что нужно сделать чтобы движение было в таблице? подскажите если можно
Спасибо за качественный и полезный материал, хотелось бы спросить как сделать что бы картинки в слайдере со ссылками уходили до края и обратно возврашались, что бы не было пустого пространства. Спасибо
Роман, вам сюда.
Добрый день! Интересная статья, но остался один вопрос в первом и во втором варианте возможно ли добавить ссылку на слова в тексте? Если да то подскажите пожалуйста как это сделать?
Довольно интересная статья, добавил в закладки браузера
Здравствуйте, Виталий.
Все здорово за исключением того, что мне это не подходит :-). Мне нужно, чтобы текстовая строка «бежала» по картинке. Когда я увеличил height, думал высота перекроект картинку. Но она ее просто отодвинула вниз…
Возможна ли доработка бегущей строки?
Здравствуйте, Виталий.
Ищу способ написать бегущую текстовую строку поверх неподвижной картинки. Прошу помощи
Вы пробовали картинку через css подключить?
Здравствуйте! Помогите пожалуйста с html кодом бегущей строки. Нужно зафиксировать бегущую строку наверху экрана, чтобы при пролистывании она также передвигалась. Буду очень благодарен)
А можно с помощью этого тега сделать чтобы картинки двигались непрерывно друг за другом в одном направлении, не выходя за пределы элемента/экрана и не меняя направления?
Нет Ярослав, к сожалению нельзя.
Используйте css (статья), там боле тонкие настройки.
Здравствуйте! Я создаю страницу HTML и у меня есть пункты меню, которые находятся вверху. Как сделать так, чтобы если я опускал и смотрел контент, со мной опускалось или поднималось меню?(Было подвижным: я вниз, а оно со мной.)
В двух словах не объяснишь. В сети есть материалы на эту тему. Ищите по запросу «фиксация меню».
Отличная статья, спасибо огромное очень полезный урок.
Здравствуйте. Подскажите как добавить остановку прокрутки текста когда пользователь наводит курсор на ссылку в прокручиваемом тексте?
В таком случаи не обойтись без css.
Вам сюда: CSS анимация — свойство animation
А как сделать так чтобы беущая строка двигалась сверху вниз доходя до края блока и поменяла направление на снизу к верху