Главная » 2012 » Ноябрь » 14 » Разработка продвинутой «Marquee»-анимации (бегущая строка) с помощью CSS3-анимаций
03:32 Разработка продвинутой «Marquee»-анимации (бегущая строка) с помощью CSS3-анимаций | |
| Сегодня мы поговорим с вами об анимационном эффекте «marquee» или иными словами - бегущая строка. Не так давно мы уже рассказывали вам о параметре -webkit-marquee, но на этот раз мы собираемся продвинуться немного дальше. [img]/uploads/posts/2012-07/1343247263_marquee-01.jpg[/img] В нашем сегодняшнем руководстве мы займемся разработкой эффекта в стиле бегущей строки при помощи CSS3-анимаций. Таким образом у нас будет возможность добавить больше функционала, который может быть реализован только лишь посредством -webkit-marquee. Если вы до сих пор не знакомы с анимациями в CSS3, то мы настоятельно рекомендуем вам ознакомиться с некоторой документацией: * CSS3 Animations – W3School * CSS Animations – Mozilla Dev. Network Также учтите, что на данный момент CSS3-анимации будут работать только в Firefox 8+, Chrome 12+ и Safari 5.0+ с помощью браузерных префиксов (-moz- и -webkit-). Тем не менее, мы будем использовать лишь официальные версии из W3C без префиксов, чтобы избежать захламления данного руководства кодами. Изучаем проблему с Marquee Одна из проблем, возникающих с marquee, заключается в том, что текст движется бесконечно. Это отвлекает от чтения, и текст довольно сложно прочесть. На этот раз мы попробуем создать собственную версию marquee, и сделаем ее более дружественной с пользователями. Например, вместо того, чтобы делать бесконечно движущийся текст, мы остановим его тогда, когда его полностью станет видно, чтобы пользователь смог прочесть все, что там написано. Раскадровка (нечто вроде) Каждый продукт творчества вроде логотипа или иллюстрации или целого веб-сайта начинается с набросков. В сфере разработки анимации этот процесс представляет собой создание раскадровки. Перед тем как начать писать код, нам сначала нужно создать раскадровку, которая поможет нам понять, как что должно быть устроено и отображено. [img]/uploads/posts/2012-07/1343247233_marquee-02.jpg[/img] Как видно из раскадровки выше, мы планируем показать только 2 строки текста, которые будут перемещаться с правой стороны в левую. Наша раскадровка не такая сложная, как раскадровки к настоящим анимационным фильмам, но цель одна: мы можем визуализировать то, как будет вести себя marquee. HTML-разметка Так как наша анимация будет очень простой, HTML-разметка также будет несложной: How to add WordPress Related Posts Without Plugins Automate Your Dropbox Files With Actions Основные стили Перед тем как начать работать над анимацией, давайте добавим немного стилей. Начнем с того, что добавим фоновую текстуру для HTML-элемента. html {background: url('../images/skewed_print.png');} Далее, мы разместим marquee по центру окна браузера, а также добавим некоторые детали вроде внутренней тени, фоновой заливки и границ. .marquee {width: 500px;height: 50px;margin: 25px auto;overflow: hidden;position: relative;border: 1px solid #000;margin: 25px auto;background-color: #222;-webkit-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);} Далее мы позиционируем текст (который в данном случае обернут тэгом paragraph) абсолютно. И так как абсолютное позиционирование приведет к сжатию элемента, нам нужно будет указать ширину элемента в 100%, чтобы он охватил ширину родительского элемента. .marquee p {position: absolute;font-family: Tahoma, Arial, sans-serif;width: 100%;height: 100%;margin: 0;line-height: 50px;text-align: center;color: #fff;text-shadow: 1px 1px 0px #000000;filter: dropshadow(color=#000000, offx=1, offy=1);} Давайте посмотрим на то, что у нас получается. [img]/uploads/posts/2012-07/1343247313_marquee-03.jpg[/img] На данном этапе мы закончили разработку необходимых основных стилей. Вы можете самостоятельно добавить и другие стили, если хотите. Но мы советуем придерживаться указанного нами размера marquee (ширины и высоты) до конца руководства. Анимация Вкратце, анимация – это представление движущихся объектов. Каждое движение определяется кадром на временной шкале. Итак, когда мы работаем над анимацией, мы в целом работаем и со временем. Нужно учитывать такие вещи как: * Когда объект начинает движение? * Сколько времени займет перемещение объекта с одной точки до другой? * Насколько долго объект должен оставаться на конкретной точке? В анимациях на CSS3 время может быть указано посредством синтаксиса @keyframe. Но, перед тем как мы дойдем до этого, давайте для начала определим исходную позицию marquee-текста. Мы предполагали, что текст будет появляться с правой стороны, а затем перемещаться влево. Итак, изначально мы расположим текст с правой стороны используя параметр CSS3 Transformation. .marquee p { transform:translateX(100%); } Помните, что те 100%, которые мы задали нашему элементу paragraph были равны ширине его родительского элемента. Так что, то же самое мы применяем и здесь. Элемент paragraph будет перенесен вправо на 100%, что означает, что в нашем примере он будет равен 500 пикселям. Кадры Синтаксис @keyframe может немного смутить некоторых людей, поэтому здесь мы сделали простенькое визуальное руководство, которое поможет вам без труда понять, что здесь происходит. [img]/uploads/posts/2012-07/1343247316_marquee-04.jpg[/img] Вся анимация длится около 20 секунд, и она разделена на 2 действия, каждое из которых длится по 10 секунд. Первая часть анимация – первый текст, – будет сразу же появляться с правой стороны, и оставаться видимым какой-то промежуток времени, чтобы пользователи смогли прочесть его, а второй текст будет оставаться скрытым. Во второй части первый текст будет перемещаться в левую сторону, а второй текст будет немедленно появляться за ним справа. И это весь необходимый нам keyframe-код, который позволит нам запустить анимацию. @keyframes left-one {0%{transform:translateX(100%);}10% {transform:translateX(0);}40% {transform:translateX(0);}50% {transform:translateX(-100%);}100%{transform:translateX(-100%);}}@keyframes left-two {0% {transform:translateX(100%);}50% {transform:translateX(100%);}60% {transform:translateX(0);}90% {transform:translateX(0);}100%{transform:translateX(-100%);}} Кадры left-one определяют действия в первой части анимации, а кадры left-two определяют вторую часть. Применяем анимацию к элементам Для того чтобы анимация заработала, не забудьте применить ее к элементу. Первая часть применяемся к первому тексту (или в нашем случае к первому элементу paragraph), а вторая часть применяется ко второму элементу paragraph соответственно. .marquee p:nth-child(1) {animation: left-one 20s ease infinite;}.marquee p:nth-child(2) {animation: left-two 20s ease infinite;} И на этом мы закончили анимацию. Давайте посмотрим на действие в браузере. * Демо * Скачать исходный код Дополнение Мы так же можем определить, чтобы marquee-текст двигался сверху вниз и наоборот. Вы можете сделать это следующим образом: замените код анимации представленным ниже, чтобы текст двигался сверху вниз: .marquee p { transform:translateY(-100%); } @keyframes down-one { 0% { transform:translateY(-100%); } 10% { transform:translateY(0); } 40% { transform:translateY(0); } 50% { transform:translateY(100%); } 100%{ transform:translateY(100%); } } @keyframes down-two { 0% { transform:translateY(-100%); } 50% { transform:translateY(-100%); } 60% { transform:translateY(0); } 90% { transform:translateY(0); } 100%{ transform:translateY(100%); } } Обратите внимание на то, что мы изменили ось X на ось Y, и инвертировали все значения перемещений. Мы также переименовали анимацию на down-one и down-two, и теперь нам соответствующим образом нужно изменить это имя в элементе paragraph. .marquee p:nth-child(1) { animation: down-one 20s ease infinite; } .marquee p:nth-child(2) { animation: down-two 20s ease infinite; } Либо, если вы хотите, чтобы текст перемещался в обратном направлении – снизу вверх. Вот весь необходимый код: .marquee.up p { transform:translateY(100%); } .marquee.up p:nth-child(1) { animation: up-one 20s ease infinite; } .marquee.up p:nth-child(2) { animation: up-two 20s ease infinite; } @keyframes up-one { 0% { transform:translateY(100%); } 10% { transform:translateY(0); } 40% { transform:translateY(0); } 50% { transform:translateY(-100%); } 100%{ transform:translateY(-100%); } } @keyframes up-two { 0% { transform:translateY(100%); } 50% { transform:translateY(100%); } 60% { transform:translateY(0); } 90% { transform:translateY(0); } 100%{ transform:translateY(-100%); } } * Демо * Скачать исходный код Внимание! У вас нет прав для просмотра скрытого текста. В завершение Несмотря на низкий уровень поддержки данного эффекта современными браузерами, CSS3-анимация, если ее реализовать правильным образом, поможет вам решить многие проблемы с удобством использования вашего веб-сайта в будущем. Если нам понадобится коротенькая анимация для современных браузеров, то лучше будет воспользоваться анимациями на CSS3, нежели использовать скрипты jQuery. | |
|
| |
| Всего комментариев: 0 | |
