Разработка продвинутой «Marquee»- анимации (бегущая строка) с помощью CSS3- анимаций. Сегодня мы поговорим с вами об анимационном эффекте «marquee» или иными словами - бегущая строка. Не так давно мы уже рассказывали вам о параметре - webkit- marquee, но на этот раз мы собираемся продвинуться немного дальше. В нашем сегодняшнем руководстве мы займемся разработкой эффекта в стиле бегущей строки при помощи CSS3- анимаций. Таким образом у нас будет возможность добавить больше функционала, который может быть реализован только лишь посредством - webkit- marquee. Если вы до сих пор не знакомы с анимациями в CSS3, то мы настоятельно рекомендуем вам ознакомиться с некоторой документацией: * CSS3 Animations – W3.
School* CSS Animations – Mozilla Dev. Network. Также учтите, что на данный момент CSS3- анимации будут работать только в Firefox 8+, Chrome 1. Safari 5. 0+ с помощью браузерных префиксов (- moz- и - webkit- ). Тем не менее, мы будем использовать лишь официальные версии из W3. C без префиксов, чтобы избежать захламления данного руководства кодами. Изучаем проблему с Marquee. Одна из проблем, возникающих с marquee, заключается в том, что текст движется бесконечно.
Это отвлекает от чтения, и текст довольно сложно прочесть. На этот раз мы попробуем создать собственную версию marquee, и сделаем ее более дружественной с пользователями. Например, вместо того, чтобы делать бесконечно движущийся текст, мы остановим его тогда, когда его полностью станет видно, чтобы пользователь смог прочесть все, что там написано. Раскадровка (нечто вроде)Каждый продукт творчества вроде логотипа или иллюстрации или целого веб- сайта начинается с набросков.
В сфере разработки анимации этот процесс представляет собой создание раскадровки. Перед тем как начать писать код, нам сначала нужно создать раскадровку, которая поможет нам понять, как что должно быть устроено и отображено. Как видно из раскадровки выше, мы планируем показать только 2 строки текста, которые будут перемещаться с правой стороны в левую. Наша раскадровка не такая сложная, как раскадровки к настоящим анимационным фильмам, но цель одна: мы можем визуализировать то, как будет вести себя marquee. HTML- разметка. Так как наша анимация будет очень простой, HTML- разметка также будет несложной: < div class=. Начнем с того, что добавим фоновую текстуру для HTML- элемента.
Бегущая строка в HTML. HTML теги, определяющие бегущую строку. При значении slide бегущая строка останавливается у противоположного края страницы. Бегущая строка на чистом HTML просто и быстро. CSS анимация — свойство animation. C уважением, Виталий Кириллов. Бегущая строка на чистом CSS. А ведь раньше ее можно было задать на чистом html (тегом <marquee>). Как-то раз появилась идея сделать эмуляцию светодиодной панели с помощью CSS animation. Первое, что пришло на ум, было найти .
Я считаю, что оправданна бегущая строка только в одном случае: когда на. Простая реализация на jQuery бегущей текстовой строки. Мы лишь слегка оформили задний фон с помощью css3 градиента.
- Тег marquee, задающий бегущую строку, придуман когда-то для Internet Exlorer и другие браузеры не всегда корректно отображают работу различных .
- Очень часто помимо простого текста, бегущие строки могут генерировать простейшую графику и накладывать различные эффекты на отображаемый текст. Анимация CSS дает возможность.
И так как абсолютное позиционирование приведет к сжатию элемента, нам нужно будет указать ширину элемента в 1. Вы можете самостоятельно добавить и другие стили, если хотите. Но мы советуем придерживаться указанного нами размера marquee (ширины и высоты) до конца руководства.
Анимация. Вкратце, анимация – это представление движущихся объектов. Каждое движение определяется кадром на временной шкале. Итак, когда мы работаем над анимацией, мы в целом работаем и со временем. Нужно учитывать такие вещи как: * Когда объект начинает движение?* Сколько времени займет перемещение объекта с одной точки до другой?* Насколько долго объект должен оставаться на конкретной точке?
В анимациях на CSS3 время может быть указано посредством синтаксиса @keyframe. Но, перед тем как мы дойдем до этого, давайте для начала определим исходную позицию marquee- текста. Мы предполагали, что текст будет появляться с правой стороны, а затем перемещаться влево. Итак, изначально мы расположим текст с правой стороны используя параметр CSS3 Transformation. Так что, то же самое мы применяем и здесь. Элемент paragraph будет перенесен вправо на 1. Кадры. Синтаксис @keyframe может немного смутить некоторых людей, поэтому здесь мы сделали простенькое визуальное руководство, которое поможет вам без труда понять, что здесь происходит.
Вся анимация длится около 2. Первая часть анимация – первый текст, – будет сразу же появляться с правой стороны, и оставаться видимым какой- то промежуток времени, чтобы пользователи смогли прочесть его, а второй текст будет оставаться скрытым. Во второй части первый текст будет перемещаться в левую сторону, а второй текст будет немедленно появляться за ним справа. И это весь необходимый нам keyframe- код, который позволит нам запустить анимацию.@keyframes left- one . Первая часть применяемся к первому тексту (или в нашем случае к первому элементу paragraph), а вторая часть применяется ко второму элементу paragraph соответственно.
Давайте посмотрим на действие в браузере.* Демо* Скачать исходный код. Дополнение. Мы так же можем определить, чтобы marquee- текст двигался сверху вниз и наоборот. Вы можете сделать это следующим образом: замените код анимации представленным ниже, чтобы текст двигался сверху вниз. Вот весь необходимый код. У вас нет прав для просмотра скрытого текста.
В завершение. Несмотря на низкий уровень поддержки данного эффекта современными браузерами, CSS3- анимация, если ее реализовать правильным образом, поможет вам решить многие проблемы с удобством использования вашего веб- сайта в будущем. Если нам понадобится коротенькая анимация для современных браузеров, то лучше будет воспользоваться анимациями на CSS3, нежели использовать скрипты j.