Создание расширенного «Marquee» с анимацией CSS3
Сегодня мы собираемся взглянуть на “шатер” снова. Мы уже говорили об этом в нашем предыдущем посте, в котором говорилось об использовании -WebKit-шатер собственность, но на этот раз мы возьмем эту тему немного дальше.
В этом посте мы собираемся создать шатёр, как эффект с использованием анимации CSS3. Таким образом, мы сможем добавить больше функциональных возможностей, которые не могут быть достигнуты только с -WebKit-шатер.
Если вы уже не знакомы с модулем CSS3 Animation, мы рекомендуем вам ознакомиться со следующими ссылками, прежде чем приступить к этой документации:
- CSS3 анимации - W3School
- CSS анимации - Mozilla Dev. сеть
Также обратите внимание, что на данный момент CSS3 Animation может работать только в Firefox 8+, Chrome 12+ и Safari 5.0+ с префиксной версией (-Мос- а также -WebKit-). Тем не менее, мы будем использовать только официальную версию от W3C без префикса, чтобы избежать чрезмерного наполнения этой статьи лишними кодами..
Решение проблемы с выделением
Одной из проблем с выделением является то, что текст постоянно движется. Такое поведение мешает чтению, и текст также трудно читать. На этот раз мы попытаемся создать собственную версию marquee и сделать ее более удобной для пользователя. Например; вместо того, чтобы текст двигался непрерывно, мы остановим его, когда он будет полностью виден, чтобы пользователь мог на мгновение прочитать текст.
Раскадровка (вроде)
Каждое творческое и дизайнерское создание, например, логотип, иллюстрация или веб-сайт, обычно начинается с эскиза. В области производства анимации это делается с помощью раскадровки. Прежде чем мы начнем на любом кодировании, мы сначала создадим своего рода раскадровка, чтобы помочь нам визуализировать нашу анимацию.
Как видно из приведенного выше раскадровки, мы планируем показать только две строки текста, которые будут последовательно перемещаться справа налево..
Наша раскадровка не так сложна, как раскадровка для реального анимационного фильма, но суть в том, что теперь мы можем визуализировать, как будет выглядеть наш шатер.
HTML-разметка
Поскольку наша анимация будет простой, HTML-разметка также будет такой простой:
Как добавить WordPress похожие посты без плагинов
Автоматизируйте ваши файлы Dropbox с помощью действий
Основные стили
Прежде чем приступить к анимации, давайте добавим несколько основных стилей. Давайте начнем с добавления фоновой текстуры для HTML элемент.
html background: url ('… /images/skewed_print.png'); Далее мы разместим область в центре окна браузера, а также добавим некоторые детали, такие как внутренняя тень, цвет фона и границы..
.выделение ширина: 500 пикселей; высота: 50 пикселей; маржа: 25px авто; переполнение: скрытое; положение: относительное; граница: 1px solid # 000; маржа: 25px авто; цвет фона: # 222; -webkit-border-radius: 5px; радиус границы: 5 пикселей; -webkit-box-shadow: врезка 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2); тень от рамки: врезка 0px 2px 2px rgba (0, 0, 0, .5), 0px 1px 0px rgba (250, 250, 250, .2);
Затем мы разместим текст - который в этом случае будет заключен в тег абзаца - абсолютно, и так как абсолютный положение приведет к разрушению элемента, нам нужно определить элемент ширины, чтобы 100% чтобы покрыть ширину своего родителя.
.шатер p позиция: абсолютная; семейство шрифтов: Tahoma, Arial, без засечек; ширина: 100%; высота: 100%; поле: 0; высота строки: 50 пикселей; выравнивание текста: по центру; цвет: #fff; тень текста: 1px 1px 0px # 000000; фильтр: drophadow (цвет = # 000000, offx = 1, offy = 1);
Давайте посмотрим на результат на некоторое время.
На данный момент мы сделали все основные стили, которые нам нужны; Вы можете добавить больше или персонализировать стили. Но мы предлагаем вам придерживаться указанного размера пометки (высоты и ширины) до конца урока.
Анимация
Короче говоря, анимация - это представление движущихся объектов. Каждое движение определяется во временных рамках. Итак, когда мы работаем над анимацией, мы в основном имеем дело с Время. Мы принимаем во внимание такие вопросы, как:
- Когда объект начинает двигаться?
- Сколько времени требуется для перемещения объекта из одной точки в другую??
- Когда и как долго объект должен оставаться в данной точке?
В анимации CSS3 время можно определить с помощью @keyframe синтаксис. Но прежде чем перейти к этому разделу, давайте сначала определим начальную позицию текста выделенного текста..
Мы запланировали, что текст будет начинаться справа, а затем двигаться вправо. Итак, здесь мы сначала поместим его вправо, используя свойство CSS3 Transformation.
.marquee p transform: translateX (100%);
Помните, что 100% что мы определили для нашего элемента абзаца был равен его родителю ширина. Таким образом, то же самое будет применяться и здесь; элемент абзаца будет переведенный вправо для 100% который в этом примере равен 500px.
Keyframes
@keyframe Синтаксис может быть немного загадочным для некоторых людей, поэтому здесь мы создали простое визуальное руководство, которое поможет вам легко понять, что происходит в @keyframe синтаксис.
Нажмите здесь, чтобы увидеть большую версию.
Вся анимация будет длиться около 20 секунд и делится на две последовательности продолжительностью 10 секунд каждый.
В первой последовательности первый текст будет мгновенно вставлен справа и на мгновение останется видимым, чтобы пользователь мог прочитать текст, а второй текст останется скрытым. Во второй последовательности первый текст выделится влево, а второй - сразу справа.
И вот все коды ключевых кадров, которые мы должны применить, чтобы запустить анимацию.
@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%);
левый один ключевые кадры будут определять первую последовательность анимации, а слева два ключевые кадры будут определять вторую последовательность.
Применение анимации к элементам
Чтобы анимация работала, не забудьте применить анимацию к элементу. Первая последовательность применяется к первому тексту или, в данном случае, к первому абзацу, а вторая последовательность применяется и ко второму абзацу..
.marquee p: nth-child (1) animation: left-one 20s замедляет бесконечность; .marquee p: nth-child (2) animation: left-two 20s облегчают бесконечность;
Мы все сделали с нашей анимацией; давайте посмотрим результаты в браузере.
- демонстрация
- Скачать исходный код
бонус
Мы также можем определить текст выделения, чтобы переместить его сверху вниз или наоборот, как мы делали в предыдущем посте. Вот как это сделать; замените наши приведенные выше коды анимации на приведенные ниже переместить текст вниз:
.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%);
Обратите внимание, что мы изменили Ось абсцисс в Ось ординат и переверните все перевод отрицательное значение к положительному и наоборот.
У нас также есть переименовал анимацию в вниз один а также вниз два, поэтому нам нужно повторно применить имя анимации в элементе абзаца, а также.
.marquee p: nth-child (1) animation: down-one 20s облегчает бесконечность; .marquee p: nth-child (2) animation: down-two 20s облегчают бесконечность;
Или, если вы хотите переместить это наоборот; снизу вверх. Вот все коды, которые необходимо применить:
.marquee.up p transform: translateY (100%); .marquee.up p: nth-child (1) animation: up-one 20s замедляет бесконечность; .marquee.up p: nth-child (2) animation: up-two 20s замедляет бесконечность; @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 Animation, чем загружать скрипт jQuery..
И наконец, мы знаем, что эта статья может быть немного подавляющей для некоторых людей, поэтому, если у вас есть какие-либо вопросы относительно этой статьи, не стесняйтесь размещать ее в разделе комментариев ниже.
