HTML: тег marquee – анимация
Долго бегал по сети в поисках простого решения для несложной анимации текста и графики. Почти все решения выглядят либо очень громоздко: требуется подключение JS-библиотек огромнейших (даже по сегодняшним меркам) размеров, либо включения в HTML-код страницы довольно сложных скриптов. Но внимание привлек все тот же избитый и всеми охаянный HTML-тег <marquee>, который профи предпочитают не ставить и пишут, что это является «плохим тоном».
Хотя данный тег и создавался для браузера IE, тем не менее, он поддерживается всеми современными браузерами и позволяет создать достаточно интересную анимацию минимальными усилиями. Жаль, что до сих пор HTML-тег не принят консорциумом WWW и является нестандартным (запрещенным).
Примеры анимации текста: прыгающие буквы.
Сделаем надпись мигающей. Обычная мигающая на одном месте надпись создается при помощи HTML-тега blink (мерцание), , а мерцание с движением создается при помощи HTML-тега marquee так:
Еще примерчики: заставим буковки попрыгать во все стороны.
Примеры "зеркала" (отражение).
|
|
Эффект "матрица":
Меняем надпись справа-налево и наоборот:
Пока все, еще несколько спеэффектов с красивой анимацией добавлю чуть позже. Посмотреть как сделаны эффекты можно из кода этой страницы.
Несмотря на такую простенькую анимацию (как текста, так и картинок) — сделать можно довольно-таки много интересных вещей с помощью HTML-тега marquee, а чего не хватает, можно для этого же тега дополнить и JS-функциями, все ограниченно только нашей собственной фантазией. Итак, если Вы хотите минимизировать графику на сайте для оптимизации (ускорения загрузки), то <marquee> — лучшее тому решение, ведь как ни крути, а текст и весит меньше, и запросы к серверу на графические файлы не нужны.
Если нужно сделать динамику статичной (останавливать движение текста при наводе мыши и продаолжать его движение при отводе мыши), то можно воспользоваться таким кодом:
<marquee onmouseover="this.stop();" onmouseout="this.start();">marquee</marquee>
Другие статьи по теме seo (оптимизация), монетизации и раскрутке:
Метки статьи: Комментариев: Комментарии (4)
Опубликованно: Четверг, Июль 29th, 2010 в 13:19
Обновлено: 18 Февраль 2011 в 1:07.
Директории: Programming
Автор: admin, все авторы.
В статье: 405 слов. Ссылки на странице.
Понравилась статья? - Не пропустите следующую, подпишитесь на RSS-канал[],
Также Вы можете оставить комментарий, или на Вашем сайте.
Эту статью находят по поисковым запросам:
463768885,
zgr@bk.ru...
Блогер-сеошник, веду сайты:
Остров ПОЭЗЫ,
Остров УСЛУГ,
Остров ЛИТЕРАТУРЫ.
Это техническая страница, более подробно обо мне смотрите 
Декабрь 2nd, 2010 Комментариев: 1
Цитировать
Обожаю этот тэг
Когда делал свой первый сайт лет эдак в 16, зафигачил суперский эффект (в те года-то, на мой взгляд) чуть ли не на каждой странице сайта ))
Декабрь 7th, 2010 Комментариев: 2
Цитировать
Очень клёвый тег. И главное Есть много приемов и эффектов, обязательно поставлю его на свой сайт, а статейка не плохая вышла =)
Февраль 28th, 2011 Комментариев: 1
Цитировать
Да, помню тоже с ним экспериментировала в своей первой страничке на html
Март 2nd, 2011 Комментариев: 1
Цитировать
Давно искал как сделать подобные анимации текста. Как ни странно в html учебниках данный способ не описан