—»     —»   Создаем эффект подпрыгивания при помощи CSS3-анимации
  Раздел: Анимация   Нет комментариев  

Создаем эффект подпрыгивания при помощи CSS3-анимации



Сегодня мы хотим немного поэкспериментировать с CSS3-анимациями. В нашем предыдущем руководстве мы рассказывали о создании продвинутой «Marquee»-анимации (бегущая строка) с помощью CSS3-анимаций. На этот раз давайте попробуем создать «панель оповещения» с эффектом подпрыгивания.

Итак, давайте приступим.

* Посмотреть демо

Приступаем к разработке

Давайте создадим новый HTML-документ, и добавим в него следующую разметку для панели оповещения.

<div class="css3-notification">
<p>Hi, this is a notification and it bounces.</p>
</div>

Затем нужно добавить некоторые декоративные стили, чтобы немного приукрасить нашу панель.

.css3-notification {
font-size: .8em;
text-align: center;
padding: 10px;
background-color: #111;
color: #fff;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .3);
text-transform: uppercase;
position: relative;
font-weight: bold;
}

На данном этапе результат нашей будет выглядеть следующим образом.

Создаем эффект подпрыгивания при помощи CSS3-анимации

Создаем ключевые кадры CSS3-анимации

Идея подпрыгивания заключается в том, что объект при первом помещении на поверхность отпрыгивает от нее и достигает наивысшего пика. Затем амплитуда прыжков постепенно сокращается до тех пор, пока объект не перестанет подпрыгивать. Это показано на следующем изображении.

Создаем эффект подпрыгивания при помощи CSS3-анимации

Этап 1: создаем ключевой кадр анимации

Теперь давайте начнем с создания ключевого кадра (keyframe) нашей css3-анимации в таблицах стилей. В данном примере мы назовем наш кадр просто bounce.

@keyframes bounce {  

}

Учтите, что в данном руководстве мы используем стандартный код @keyframe из W3C, чтобы наш код выглядел проще. Но если вам нужно, чтобы анимации работала и в других браузерах, то вам нужно будет воспользоваться браузерными префиксами, которые указаны в исходных кодах сегодняшнего проекта.

Этап 2: указываем исходную позицию

Сначала нам нужно выставить объект на исходную позицию. В CSS3 transform мы добавляем отрицательное значение оси Y. В следующем отрывке кода мы выставляем позицию от 0% до 5% на временной шкале. То есть, панель оповещения будет находиться в таком состоянии достаточно мало времени.

0% {
transform:translateY(-100%);
opacity: 0;
}
5% {
transform:translateY(-100%);
opacity: 0;
}

Этап 3: указываем первый прыжок

Затем, от 5% до 15% по временной шкале, объект начинает двигаться к исходной позиции. Мы выставляем параметр translateY обратно на 0%. Прыгающий объект будет слегка эластичным.

То есть, когда объект достигает другого плотного объекта, сторона соприкосновения с поверхностью должна немного сжиматься и деформироваться. Так что, в нашем случае, мы немного сокращаем padding-bottom – от 10px до 5px.

15% {
transform:translateY(0);
padding-bottom: 5px;
}

После столкновения с поверхностью, объект снова подпрыгнет вверх. На данном этапе объект подпрыгивает на максимальную высоту, то есть – на 50% на 30% временной шкалы.

30% {  
transform:translateY(-50%);
}

Этап 4: указываем второй прыжок

После достижения пика, объект должен вернуться обратно к 0 или, другими словами, опуститься на землю. На этот раз объект будет деформирован немного меньше, нежели это было в прошлом соприкосновении. Итак, здесь мы сократим padding-bottom всего до 6px.

40% {
transform:translateY(0%);
padding-bottom: 6px;
}

Затем он подпрыгивает.

На этот раз, он достигает позиции ниже той, которая была достигнута в первый раз. Он поднимается всего на 30% от своей текущей позиции.

50% {  
transform:translateY(-30%);
}

Этап 5: продолжительные скачки до полной остановки

Эти события будут повторяться до конца временной шкалы и до конца всей анимации, то есть – от 70% до 100% по временной шкале.

70% {
transform:translateY(0%);
padding-bottom: 7px;
}
80% {
transform:translateY(-15%);
}
90% {
transform:translateY(0%);
padding-bottom: 8px;
}
95% {
transform:translateY(-7%);
}
97% {
transform:translateY(0%);
padding-bottom: 9px;
}
99% {
transform:translateY(-3%);
}
100% {
transform:translateY(0);
padding-bottom: 9px;
opacity: 1;
}

И это весь код, который нам сегодня понадобится. Теперь вы можете посмотреть эффект подпрыгивания элементов в действии, перейдя по ссылке на демо.

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 10804   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Август 2017    »
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
28293031