Сейчас стали популярны различные анимации на сайте и особенным спросом пользуются анимации статуса серверов.
В этой теме я буду писать инструкции о том, как сделать различные анимации на примере статуса серверов движка Stress Web 13, но применить их можно практически к любому элементу сайта.
Я постараюсь описывать самые простые способы и варианты анимаций специально для тех, кто ничего не понимает в этом. Для тех кто разбирается достаточно просто скопировать стиль и присвоить класс нужному блоку.
Я напишу 1 пример, а любую другу анимацию вы будете делать аналогично:
============================ Начало примера==============================
Анимация #1 (Увеличение <=> уменьшение):
В
engine.css в самом низу добавляем:
Код HTML:
.l2banners_serv_animation_1 {
animation: l2banners_scale 2s infinite;
}
@keyframes l2banners_scale {
from {
transform: scale(1);
}
30% {
transform: scale(1.1);
}
to {
transform: scale(1);
}
}
В файле
server.tpl находим тег
[item] и после него в первом же теге прописываем класс:
Код HTML:
class="l2banners_serv_animation_1"
Например в
дефолтном шаблоне написано вот так:
значит у вас должно получиться вот так:
Код HTML:
[item]
<tr class="l2banners_serv_animation_1">
вместо <tr> там могут быть другие теги: <div> <li> <span> и т.д.. значит вставляете в тот который будет первым, если это
<div> то получится вот так:
Код HTML:
[item]
<div class="l2banners_serv_animation_1">
Если там уже написано
class= значит надо просто
добавить через пробел l2banners_serv_animation_1
Например было написано:
<div class="status">
вам надо просто добавить
<div class="status l2banners_serv_animation_1">
Вот этот класс class="l2banners_serv_animation_1" вы можете добавить к любому элементу на сайте, например к логотипу.
============================ Конец примера==============================
Итак, если вы поняли принцип в дальнейшем я буду публиковать стиль анимации и название класса
Если что-то не получается пишите код вашего server.tpl в коменты и адрес вашего сайта мне в личку.
Так же пишите в коменты, какие анимации вы хотели бы увидеть.
Добавлено через 2 минуты
Анимация №2 (Прыжки с тенью)
В
engine.css в самом низу добавляем:
Код HTML:
.l2banners_animation_2 {
animation: l2banners_bouncing 0.5s cubic-bezier(.1,.25,.1,1) 0s infinite alternate both;
position: relative; /* Если вдруг что-то не работает попробуйте удалить всю эту строку */
}
@keyframes l2banners_bouncing{
0% { bottom: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5);}
100%{ bottom: 50px; box-shadow: 0 50px 50px rgba(0,0,0,0.1);}
}
В файле
server.tpl добавляем класс:
Код HTML:
class="l2banners_animation_2"
Добавлено через 8 минут
Анимация №3 (Движение влево<=>вправо)
Данную анимацию обычно используют вместе со скриптом, что бы можно было менять время задержки, но я её упростил и поставил оптимальную задержку по умолчанию.
В
engine.css в самом низу добавляем:
Код HTML:
.l2banners_animation_3 {
animation: l2banners_swing 2.5s ease infinite;
}
@keyframes l2banners_swing
{
45%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
46%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
48%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
52%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
54%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
55%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
В файле
server.tpl добавляем класс:
Код HTML:
class="l2banners_animation_3"
Анимация №4 (l2banners_tada)
Как и в предыдущей анимации её обычно используют со скриптом, но мы будем делать максимально простым способом через ксс
В
engine.css в самом низу добавляем:
Код HTML:
.l2banners_animation_4 {
animation: l2banners_tada 3s infinite;
}
@keyframes l2banners_tada {
0% {
-webkit-transform:scale3d(1,1,1);
transform:scale3d(1,1,1)
}
25% {
-webkit-transform:scale3d(1,1,1);
transform:scale3d(1,1,1)
}
38%, 41% {
-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)
}
44%,50%,56%,62% {
-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)
}
47%,53%,59% {
-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)
}
70% {
-webkit-transform:scale3d(1,1,1);
transform:scale3d(1,1,1)
}
}
В файле
server.tpl добавляем класс:
Код HTML:
class="l2banners_animation_4"