<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

В начале курса у нас будет только идея, а в конце готовый продукт, который можно использовать в практических целях.

В рамках упражнений курса Вы параллельно со мной будете создавать свою большую программу на Java, что даст Вам необходимую практику, после которой для Вас уже не будет разницы, какого размера создавать программы.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Анимация текста в CSS

Анимация текста в CSS

На этом уроке мы разберем основные правила CSS анимации на веб-странице, которые можно применить к любому элементу, а не только к тексту.

Просто вероятность того, что вам в дальнейшем потребуется анимировать именно текст, а не геометрические фигуры, крайне высока. Итак, приступим.

Анимация текста в CSS.

Я не буду подробно описывать, как стилизовался текст, остановимся только на самых сложных и важных моментах. Посмотреть весь код вы сможете на Codepen, ссылка будет внизу статьи.

HTML разметка

Создадим параграф p, внутри которого припишем тег span с нашим текстом.

<p>
  <span>
    Animated text
  </span>
</p>

CSS стили

Параграф – тег p, будет служить ограничителем для подпрыгивающего текста. В качестве ограничителя выступит полупрозрачная двойная рамка, сверху и снизу. Никакой полезной нагрузки эта рамка не несёт, просто визуально, эффект анимации текста, будет красивее смотреться.

p {
  border: 4px double rgba(255, 255, 255, 0.25);
  border-width: 4px 0;
}

Подпрыгивать у нас будет тег span, внутри которого мы разместили текст с тенью. По умолчанию span является строчным элементом, но прописав ему display: block, мы сделали его блочным, иначе никакая анимация работать не будет.

span {
  display: block;
}

Переходим к анимации текста

В CSS анимации могут участвовать все свойства, значения которых можно задать численно, в пикселях, процентах и в других единицах измерения. Обратите внимание, что изначально заданные единицы измерения элемента должны совпадать с анимированными, иначе браузер не отобразит анимацию. Например, если заданная высота в CSS стилях прописана в пикселях, то и в анимации высоту указывайте в пикселях.

Демонстрация.

Правило @keyframe

Создадим ключевые кадры нашей анимации. Сначала пишем @keyframes и сразу за ним название нашей анимации, которое придумываем сами. Желательно название давать осмысленное, у нас текст будет подпрыгивать к верху и поэтому назовем мы нашу анимацию bounce-top.

@keyframes bounce-top {

Далее задаём все кадры нашей анимации, как минимум, у любой анимации должны обязательно присутствовать: первый (0% или from) и последний (100% или to) кадры.

В нашей анимации будет 11 кадров, которые распределяются в процентах, например кадр 25%, означает, что прошло 25% анимации. Кадры с одинаковыми свойствами можно объединить, прописав их через запятую.

Мы будем сдвигать текст по оси Y, в соответствующем кадре на энное количество пикселей. За это отвечает свойство transform: translateY. При нулевом значении этого свойства, в пяти кадрах, текст будет падать вниз и снова слегка отскакивать.

У некоторых кадров прописано ещё два свойства, но у каждого свой вариант:

animation-timing-function: ease-in;
animation-timing-function: ease-out;

Это функция, которая обозначает то, как будет происходить анимация, равномерно или нет. При значении ease-in, анимация вначале ускоряется и наоборот замедляется - ease-out. Благодаря замедлению и ускорению, выглядит данный эффект реалистично.

See the Pen Animated text CSS3 by porsake (@porsake) on CodePen.

Для того, чтобы применить нашу анимацию к элементу span, необходимо к селектору span добавить строчку animation и прописать свойства, где

span {
  animation: bounce-top 2s infinite both;
}

bounce-top – название анимации, у span и @keyframe название должно быть одинаковым.

2s – продолжительность анимации.

infinite – бесконечная анимация. Если мы хотим, ограничить число циклов анимации, то вместо infinite, надо поставить число. Для наглядности примера, у меня задана бесконечная анимация. Однако на реальном сайте, так не следует делать, достаточно заголовку подпрыгнуть несколько раз. Это реально раздражает, бесконечная анимация как-то оправдана, на элементе с призывом к действию.

both – CSS стили применяются к элементу до и после анимации.

Научиться применять полученные знания при создании сайтов, вам поможет этот видеокурс "HTML5 и CSS3 с Нуля до Гуру"

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.